コントロールとパターンの概要Intro to controls and patterns

UWP アプリ開発では、コントロールは、コンテンツを表示したり、操作を有効にしたりする UI 要素です。In UWP app development, a control is a UI element that displays content or enables interaction. ボタン、テキスト ボックス、コンボ ボックスなどのコントロールを使って、データを表示し、ユーザー入力を取得するためのアプリの UI を作ります。You create the UI for your app by using controls such as buttons, text boxes, and combo boxes to display data and get user input.

重要な API:Windows.UI.Xaml.Controls 名前空間Important APIs: Windows.UI.Xaml.Controls namespace

パターンとは、コントロールを変更するか、いくつかのコントロールを組み合わせて、新しいものを作成するためのレシピです。A pattern is a recipe for modifying a control or combining several controls to make something new. たとえば、マスター/詳細パターンが使用できる方法をSplitViewのアプリのナビゲーション コントロール。For example, the master/details pattern is a way that you can use a SplitView control for app navigation. 同様のテンプレートをカスタマイズすることができます、 NavigationViewタブ パターンを実装するコントロール。Similarly, you can customize the template of a NavigationView control to implement the tab pattern.

多くの場合、コントロールはそのまま使用できます。In many cases, you can use a control as-is. ただし、XAML コントロールでは、機能が構造や外観とは分離されているため、ニーズに合わせてさまざまなレベルで変更することができます。But XAML controls separate function from structure and appearance, so you can make various levels of modification to make them fit your needs. XAML スタイルコントロール テンプレートを使用してコントロールを変更する方法については、「スタイル」セクションをご覧ください。In the Style section, you can learn how to use XAML styles and control templates to modify a control.

このセクションでは、アプリ UI の構築に使用できる各 XAML コントロールに関するガイダンスを提供します。In this section, we provide guidance for each of the XAML controls you can use to build your app UI. まず、この記事では、アプリにコントロールを追加する方法について説明します。To start, this article shows you how to add controls to your app. アプリでコントロールを使用するには、次の 3 つの重要な手順があります。There are 3 key steps to using controls to your app:

  • アプリの UI にコントロールを追加します。Add a control to your app UI.
  • 幅、高さ、前景色など、コントロールのプロパティを設定します。Set properties on the control, such as width, height, or foreground color.
  • 動作を行うためのコードをコントロールに追加します。Add code to the control's event handlers so that it does something.

コントロールの追加Add a control

アプリにコントロールを追加するには、いくつかの方法があります。You can add a control to an app in several ways:

  • Blend for Visual Studio や Microsoft Visual Studio Extensible Application Markup Language (XAML) デザイナーなどのデザイン ツールを使用する。Use a design tool like Blend for Visual Studio or the Microsoft Visual Studio Extensible Application Markup Language (XAML) designer.
  • Visual Studio XAML エディターで XAML マークアップにコントロールを追加する。Add the control to the XAML markup in the Visual Studio XAML editor.
  • コードでコントロールを追加する。Add the control in code. コードで追加するコントロールは、アプリを実行するときには表示されますが、Visual Studio XAML デザイナーでは表示されません。Controls that you add in code are visible when the app runs, but are not visible in the Visual Studio XAML designer.

Visual Studio でアプリにコントロールを追加して操作するときには、[ツールボックス]、XAML デザイナー、XAML エディター、[プロパティ] ウィンドウなど、Visual Studio の多くの機能を利用できます。In Visual Studio, when you add and manipulate controls in your app, you can use many of the program's features, including the Toolbox, XAML designer, XAML editor, and the Properties window.

Visual Studio の [ツールボックス] には、アプリで使用できる多くのコントロールが表示されます。The Visual Studio Toolbox displays many of the controls that you can use in your app. コントロールをアプリに追加するには、[ツールボックス] でそのコントロールをダブルクリックします。To add a control to your app, double-click it in the Toolbox. たとえば、TextBox コントロールをダブルクリックすると、この XAML が [XAML] ビューに追加されます。For example, when you double-click the TextBox control, this XAML is added to the XAML view.

<TextBox HorizontalAlignment="Left" Text="TextBox" VerticalAlignment="Top"/>

また、コントロールを [ツールボックス] から XAML デザイナーにドラッグすることもできます。You can also drag the control from the Toolbox to the XAML designer.

コントロールの名前の設定Set the name of a control

コントロールをコードで操作する場合は、コントロールの x:Name 属性を設定し、コードでは名前でコントロールを参照します。To work with a control in code, you set its x:Name attribute and reference it by name in your code. 名前は、Visual Studio の [プロパティ] ウィンドウまたは XAML で設定できます。You can set the name in the Visual Studio Properties window or in XAML. 以下では、[プロパティ] ウィンドウの上部にある [名前] ボックスを使って、現在選択されているコントロールの名前を設定する方法を示しています。Here's how to set the name of the currently selected control by using the Name text box at the top of the Properties window.

コントロールに名前を付けるにはTo name a control

  1. 名前を付ける要素を選びます。Select the element to name.
  2. [プロパティ] パネルで、[名前] ボックスに名前を入力します。In the Properties panel, type a name into the Name text box.
  3. Enter キーを押して、名前をコミットします。Press Enter to commit the name.

Visual Studio デザイナーでの Name プロパティ

XAML エディターで x:Name 属性を追加してコントロールの名前を設定する方法を示します。Here's how to set the name of a control in the XAML editor by adding the x:Name attribute.

<Button x:Name="Button1" Content="Button"/>

コントロールのプロパティの設定Set the control properties

プロパティを使って、コントロールの外観、内容、その他の属性を指定します。You use properties to specify the appearance, content, and other attributes of controls. デザイン ツールを使ってコントロールを追加すると、Visual Studio によってサイズ、位置、コンテンツを制御するプロパティが設定されることがあります。When you add a control using a design tool, some properties that control size, position, and content might be set for you by Visual Studio. Width、Height、Margin など、いくつかのプロパティは、[デザイン] ビューでコントロールを選んで操作することで変更できます。You can change some properties, such as Width, Height or Margin, by selecting and manipulating the control in the Design view. 次の図は、[デザイン] ビューで使用できるサイズ変更ツールの一部を示しています。This illustration shows some of the resizing tools available in Design view.

Visual Studio デザイナーでのサイズ変更ツール

コントロールのサイズと位置が自動的に調整されることが望ましいということも考えられます。You might want to let the control be sized and positioned automatically. この場合、Visual Studio によって設定されるサイズと位置に関するプロパティをリセットできます。In this case, you can reset the size and position properties that Visual Studio set for you.

プロパティをリセットするにはTo reset a property

  1. [プロパティ] パネルで、プロパティ値の横のプロパティ マーカーをクリックします。In the Properties panel, click the property marker next to the property value. プロパティ メニューが開きます。The property menu opens.
  2. プロパティ メニューで、[リセット] をクリックします。In the property menu, click Reset.

Visual Studio のプロパティ メニューのリセット オプション

コントロールのプロパティは、[プロパティ] ウィンドウ、XAML、またはコードで設定できます。You can set control properties in the Properties window, in XAML, or in code. たとえば、Button の前景色を変更するには、コントロールの Foreground プロパティを設定します。For example, to change the foreground color for a Button, you set the control's Foreground property. 次の図は、[プロパティ] ウィンドウのカラー ピッカーを使って Foreground プロパティを設定する方法を示しています。This illustration shows how to set the Foreground property by using the color picker in the Properties window.

Visual Studio デザイナーでのカラー ピッカー

次に、XAML エディターの Foreground プロパティを設定する方法を示します。Here's how to set the Foreground property in the XAML editor. 構文の入力を簡単にするために、Visual Studio の IntelliSense ウィンドウが開いています。Notice the Visual Studio IntelliSense window that opens to help you with the syntax.

XAML での Intellisense パート 1

XAML での Intellisense パート 2

Foreground プロパティを設定した後の結果の XAML を次に示します。Here's the resulting XAML after you set the Foreground property.

<Button x:Name="Button1" Content="Button" 
        HorizontalAlignment="Left" VerticalAlignment="Top"
        Foreground="Beige"/>

次に、Foreground プロパティをコードで設定する方法を示します。Here's how to set the Foreground property in code.

Button1.Foreground = new SolidColorBrush(Windows.UI.Colors.Beige);

イベント ハンドラーの作成Create an event handler

各コントロールには、ユーザーの操作またはアプリ内での他の変更に対して応答するためのイベントが用意されています。Each control has events that enable you to respond to actions from your user or other changes in your app. たとえば、Button コントロールには、ユーザーがボタンをクリックしたときに発生する Click イベントがあります。For example, a Button control has a Click event that is raised when a user clicks the Button. イベントを処理するために、イベント ハンドラーと呼ばれるメソッドを作成します。You create a method, called an event handler, to handle the event. [プロパティ] ウィンドウでは、XAML またはコードでイベント ハンドラー メソッドとコントロールのイベントを関連付けることができます。You can associate a control's event with an event handler method in the Properties window, in XAML, or in code. イベントについて詳しくは、「イベントとルーティング イベントの概要」をご覧ください。For more info about events, see Events and routed events overview.

イベント ハンドラーを作成するには、コントロールを選んだ後、[プロパティ] ウィンドウの上部にある [イベント] タブをクリックします。To create an event handler, select the control and then click the Events tab at the top of the Properties window. [プロパティ] ウィンドウに、そのコントロールに対して利用可能なすべてのイベントの一覧が表示されます。The Properties window lists all of the events available for that control. Button のイベントの一部を次に示します。Here are some of the events for a Button.

Visual Studio のイベント一覧

イベント ハンドラーを既定の名前で作成するには、[プロパティ] ウィンドウ内でイベント名の横にあるテキスト ボックスをダブルクリックします。To create an event handler with the default name, double-click the text box next to the event name in the Properties window. イベント ハンドラーをカスタム名で作成するには、テキスト ボックスに名前を入力して Enter キーを押します。To create an event handler with a custom name, type the name of your choice into the text box and press enter. イベント ハンドラーが作成され、コード ビハインド ファイルがコード エディターで開きます。The event handler is created and the code-behind file is opened in the code editor. イベント ハンドラーのメソッドには、パラメーターが 2 つあります。The event handler method has 2 parameters. 1 つが sender です。これは、ハンドラーがアタッチされているオブジェクトへの参照です。The first is sender, which is a reference to the object where the handler is attached. sender パラメーターは Object 型です。The sender parameter is an Object type. sender オブジェクト自体で状態を確認または変更する必要がある場合には、通常、sender をもっと正確な型にキャストします。You typically cast sender to a more precise type if you expect to check or change the state on the sender object itself. それぞれのアプリ設計に基づき、sender のキャスト先として安全な型をハンドラーのアタッチ先を基に把握する必要があります。Based on your own app design, you expect a type that is safe to cast the sender to, based on where the handler is attached. 2 つ目の値はイベント データです。これは通常、e パラメーターまたは args パラメーターとしてシグネチャに表示されます。The second value is event data, which generally appears in signatures as the e or args parameter.

Button1 という名前が付いた Button の Click イベントを処理するコードを以下に示します。Here's code that handles the Click event of a Button named Button1. ボタンをクリックすると、クリックした Button の Foreground プロパティが青色に設定されます。When you click the button, the Foreground property of the Button you clicked is set to blue.

private void Button_Click(object sender, RoutedEventArgs e)
{
    Button b = (Button)sender;
    b.Foreground = new SolidColorBrush(Windows.UI.Colors.Blue);
}

また、イベント ハンドラーを XAML で関連付けることもできます。You can also associate an event handler in XAML. XAML エディターで、処理するイベント名を入力します。In the XAML editor, type in the event name that you want to handle. 入力を始めると、Visual Studio に IntelliSense ウィンドウが表示されます。Visual Studio shows an IntelliSense window when you begin typing. イベントを指定した後は、IntelliSense ウィンドウで <New Event Handler> をダブルクリックして新しいイベント ハンドラーを既定の名前で作成するか、一覧から既にあるイベント ハンドラーを選びます。After you specify the event, you can double-click <New Event Handler> in the IntelliSense window to create a new event handler with the default name, or select an existing event handler from the list.

表示される IntelliSense ウィンドウを次に示します。Here's the IntelliSense window that appears. IntelliSense ウィンドウは、新しいイベント ハンドラーを作成したり、既存のイベント ハンドラーを選択するのに役立ちます。It helps you create a new event handler or select an existing event handler.

クリック イベント用の Intellisense

次の例では、XAML で Click イベントを Button_Click という名前のイベント ハンドラーと関連付ける方法を示しています。This example shows how to associate a Click event with an event handler named Button_Click in XAML.

<Button Name="Button1" Content="Button" Click="Button_Click"/>

イベントは、コード ビハインド内でイベント ハンドラーに関連付けることもできます。You can also associate an event with its event handler in the code-behind. イベント ハンドラーをコードで関連付ける方法を次に示します。Here's how to associate an event handler in code.

Button1.Click += new RoutedEventHandler(Button_Click);