XAML でのレスポンシブ レイアウトResponsive layouts with XAML

XAML レイアウト システムでは、応答性の高い UI を作成するために、自動サイズ変更、レイアウト パネル、表示状態、独立した UI 定義が提供されます。The XAML layout system provides automatic sizing, layout panels, visual states, and even separate UI definitions to create a responsive UI. レスポンシブ レイアウトを使用すると、サイズ、解像度、ピクセル密度、向きがさまざまに異なるアプリのウィンドウを画面で適切に表示できます。With a responsive layout, you can make your app look great on screens with different app window sizes, resolutions, pixel densities, and orientations. レスポンシブ デザイン テクニック」で説明されているように、位置変更、サイズ変更、リフロー、表示/非表示、再配置、またはアプリの UI の再構築にも XAML を使用できます。You can also use XAML to reposition, resize, reflow, show/hide, replace, or re-architect your app's UI, as discussed in Responsive design techniques. ここでは、XAML を使ったレスポンシブ レイアウトを実装する方法について説明します。Here, we discuss how to implement responsive layouts with XAML.

プロパティとパネルを使用した柔軟なレイアウトFluid layouts with properties and panels

レスポンシブ レイアウトの基盤は、XAML レイアウト プロパティとパネルを適切に使用することにより、柔軟な方法でコンテンツの位置変更、サイズ変更、再配置を行うことです。The foundation of a responsive layout is the appropriate use of XAML layout properties and panels to reposition, resize, and reflow content in a fluid manner.

XAML レイアウト システムでは、静的レイアウトと柔軟なレイアウトの両方がサポートされます。The XAML layout system supports both static and fluid layouts. 静的レイアウトでは、コントロールのピクセル サイズと位置を明示的に指定します。In a static layout, you give controls explicit pixel sizes and positions. ユーザーがデバイスの解像度や向きを変えても、UI は変更されません。When the user changes the resolution or orientation of their device, the UI doesn't change. 静的レイアウトは、フォーム ファクターやディスプレイ サイズが変わると、不適切にはみ出すことがあります。Static layouts can become clipped across different form factors and display sizes. 一方、柔軟なレイアウトは、デバイス上で使用できる表示領域に合わせて縮小、拡大、再配置されます。On the other hand, fluid layouts shrink, grow, and reflow to respond to the visual space available on a device.

実際には、静的要素と柔軟な要素の組み合わせを使って UI を作成します。In practice, you use a combination of static and fluid elements to create your UI. 静的な要素と値を使用して、いくつかの場所では、全体的な UI がさまざまな解像度、画面サイズ、およびビューへの応答性であることを確認します。You still use static elements and values in some places, but make sure that the overall UI is responsive to different resolutions, screen sizes, and views.

ここでは、XAML プロパティとレイアウト パネルを使って、柔軟なレイアウトを作成する方法を説明します。Here, we discuss how to use XAML properties and layout panels to create a fluid layout.

レイアウト プロパティLayout properties

レイアウト プロパティは、要素のサイズと位置を制御します。Layout properties control the size and position of an element. 滑らかなレイアウトを作成するには、要素の場合、自動または比例サイズ設定を使用し、必要に応じて、その子を配置するレイアウト パネルを設定します。To create a fluid layout, use automatic or proportional sizing for elements, and allow layout panels to position their children as needed.

いくつかの一般的なレイアウト プロパティと、それらを使用して柔軟なレイアウトを作成する方法を示します。Here are some common layout properties and how to use them to create fluid layouts.

高さと幅Height and Width

Height プロパティと Width プロパティは要素のサイズを指定します。The Height and Width properties specify the size of an element. 有効ピクセル単位で測定された固定値を使うことも、自動サイズ変更または比例サイズ変更を行うこともできます。You can use fixed values measured in effective pixels, or you can use auto or proportional sizing.

自動サイズ変更は、UI 要素をコンテンツや親コンテナーに合わせてサイズ変更します。Auto sizing resizes UI elements to fit their content or parent container. グリッドの行と列を使って、自動サイズ変更を行うこともできます。You can also use auto sizing with the rows and columns of a grid. 自動サイズ変更を使うには、UI 要素の Height や Width を Auto に設定します。To use auto sizing, set the Height and/or Width of UI elements to Auto.

注意

コンテンツやコンテナーに合わせて要素のサイズが変更されるかどうかは、親コンテナーで子のサイズ変更を処理する方法によって決まります。Whether an element resizes to its content or its container depends on how the parent container handles sizing of its children. 詳しくは、この記事の「レイアウト パネル」をご覧ください。For more info, see Layout panels later in this article.

比例サイズ変更 (スター サイズ指定とも呼ばれる) を使うと、使用可能なスペースが加重比率によりグリッドの行と列の間で分散されます。Proportional sizing, also called star sizing, distributes available space among the rows and columns of a grid by weighted proportions. XAML、星型の値として表されます*(またはn *スターのサイズ変更の加重計算される)。In XAML, star values are expressed as * (or n* for weighted star sizing). たとえば、2 段組レイアウトで 1 つの列と、幅が 5 倍の列とを指定するには、ColumnDefinition 要素の Width プロパティで "5*" と "*" を使います。For example, to specify that one column is 5 times wider than the second column in a 2-column layout, use "5*" and "*" for the Width properties in the ColumnDefinition elements.

次の例では、4 つの列を含む Grid で、固定、自動、比例サイズ指定を組み合わせています。This example combines fixed, auto, and proportional sizing in a Grid with 4 columns.

     
Column_1Column_1 AutoAuto 列は、コンテンツが収まるようにサイズ変更されます。The column will size to fit its content.
Column_2Column_2 * [自動] 列の計算後、この列は残りの幅の一部を取得します。After the Auto columns are calculated, the column gets part of the remaining width. Column_2 の幅は Column_4 の半分になります。Column_2 will be one-half as wide as Column_4.
Column_3Column_3 4444 列の幅は 44 ピクセルに設定されます。The column will be 44 pixels wide.
Column_4Column_4 2*2* [自動] 列の計算後、この列は残りの幅の一部を取得します。After the Auto columns are calculated, the column gets part of the remaining width. Column_4 の幅は Column_2 の 2 倍になります。Column_4 will be twice as wide as Column_2.

既定の列の幅は "*" であるため、2 つ目の列については、この値を明示的に設定する必要はありません。The default column width is "*", so you don't need to explicitly set this value for the second column.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition/>
        <ColumnDefinition Width="44"/>
        <ColumnDefinition Width="2*"/>
    </Grid.ColumnDefinitions>
    <TextBlock Text="Column 1 sizes to its content." FontSize="24"/>
</Grid>

Visual Studio の XAML デザイナーでは、結果は次のように表示されます。In the Visual Studio XAML designer, the result looks like this.

Visual Studio デザイナーでの 4 列のグリッド

実行時に要素のサイズを取得するには、Height と Width の代わりに、読み取り専用の ActualHeight プロパティと ActualWidth プロパティを使います。To get the size of an element at runtime, use the read-only ActualHeight and ActualWidth properties instead of Height and Width.

サイズの制約Size constraints

UI で自動サイズ変更を使用する場合でも、要素のサイズに制約を設けることが必要になる可能性があります。When you use auto sizing in your UI, you might still need to place constraints on the size of an element. MinWidth/MaxWidthMinHeight/MaxHeight の各プロパティを設定することによって、柔軟なサイズ変更を許可しながら、要素のサイズを制約する値を指定できます。You can set the MinWidth/MaxWidth and MinHeight/MaxHeight properties to specify values that constrain the size of an element while allowing fluid resizing.

また、Grid では、MinWidth/MaxWidth を列定義と共に使用でき、MinHeight/MaxHeight を行定義と共に使用できます。In a Grid, MinWidth/MaxWidth can also be used with column definitions, and MinHeight/MaxHeight can be used with row definitions.

アラインメントAlignment

親コンテナー内の要素の配置方法を指定するには、HorizontalAlignment プロパティと VerticalAlignment プロパティを使います。Use the HorizontalAlignment and VerticalAlignment properties to specify how an element should be positioned within its parent container.

  • HorizontalAlignment の値は、LeftCenterRightStretch です。The values for HorizontalAlignment are Left, Center, Right, and Stretch.
  • VerticalAlignment の値は、TopCenterBottomStretch です。The values for VerticalAlignment are Top, Center, Bottom, and Stretch.

Stretch 配置にすると、要素は、親コンテナーで提供されたスペース全体に配置されます。With the Stretch alignment, elements fill all the space they're provided in the parent container. Stretch は、両方の配置プロパティの既定値です。Stretch is the default for both alignment properties. ただし、Button などの一部のコントロールでは、その既定のスタイルでこの値がオーバーライドされます。However, some controls, like Button, override this value in their default style. 子要素を持つことができるすべての要素で、HorizontalAlignment プロパティと VerticalAlignment プロパティの Stretch 値を一意に処理することができます。Any element that can have child elements can treat the Stretch value for HorizontalAlignment and VerticalAlignment properties uniquely. たとえば、既定の Stretch 値を使用する要素が Grid に配置された場合、要素はその要素を含むセルいっぱいに拡大されます。For example, an element using the default Stretch values placed in a Grid stretches to fill the cell that contains it. 同じ要素が Canvas に配置された場合は、そのコンテンツに合わせてサイズが変更されます。The same element placed in a Canvas sizes to its content. 各パネルでの Stretch 値の処理方法について詳しくは、「レイアウト パネル」をご覧ください。For more info about how each panel handles the Stretch value, see the Layout panels article.

詳しくは、「配置、余白、およびパディング」や、HorizontalAlignmentVerticalAlignment のリファレンス ページをご覧ください。For more info, see the Alignment, margin, and padding article, and the HorizontalAlignment and VerticalAlignment reference pages.

可視性Visibility

表示したり、設定、要素を非表示にその可視性プロパティのいずれかを可視性列挙値。表示されるまたは折りたたまれているします。You can reveal or hide an element by setting its Visibility property to one of the Visibility enumeration values: Visible or Collapsed. 要素が Collapsed である場合、UI レイアウト内の領域は使用されません。When an element is Collapsed, it doesn't take up any space in the UI layout.

コードまたは表示状態で、要素の Visibility プロパティを変更できます。You can change an element's Visibility property in code or in a visual state. 要素の Visibility が変更されると、そのすべての子要素も変更されます。When the Visibility of an element is changed, all of its child elements are also changed. 1 つのパネルを表示して別のパネルを折りたたむことによって、UI のセクションを置き換えることができます。You can replace sections of your UI by revealing one panel while collapsing another.

ヒント

UI 内の要素がある場合Collapsed既定では、オブジェクトはまだ起動時に、場合でも作成されるには表示されません。When you have elements in your UI that are Collapsed by default, the objects are still created at startup, even though they aren't visible. これらの要素の読み込みを表示されたときまで遅延するには、x:DeferLoadStrategy 属性を "Lazy" に設定します。You can defer loading these elements until they are shown by setting the x:DeferLoadStrategy attribute to "Lazy". これにより起動時のパフォーマンスが向上することがあります。This can improve startup performance. 詳しくは、「x:DeferLoadStrategy 属性」をご覧ください。For more info, see x:DeferLoadStrategy attribute.

Style リソースStyle resources

コントロールに対して各プロパティ値を個別に設定する必要はありません。You don't have to set each property value individually on a control. 通常、プロパティ値を Style リソースとしてグループ化し、Style をコントロールに適用する方が効率的です。It's typically more efficient to group property values into a Style resource and apply the Style to a control. これは、特に、同じプロパティ値を多くのコントロールに適用する必要がある場合に当てはまります。This is especially true when you need to apply the same property values to many controls. スタイルの使用について詳しくは、「コントロールのスタイル」をご覧ください。For more info about using styles, see Styling controls.

レイアウト パネルLayout panels

ビジュアル オブジェクトを配置するには、パネルなどのコンテナー オブジェクトにビジュアル オブジェクトを配置する必要があります。To position visual objects, you must put them in a panel or other container object. XAML フレームワークには、UI 要素を内部に配置できるコンテナーとしての役割を持つさまざまなパネル クラス (CanvasGridRelativePanelStackPanel など) が用意されています。The XAML framework provides various panel classes, such as Canvas, Grid, RelativePanel and StackPanel, which serve as containers and enable you to position and arrange the UI elements within them.

レイアウト パネルを選ぶ際に主に考慮が必要なのは、パネルでの子要素の配置とサイズです。The main thing to consider when choosing a layout panel is how the panel positions and sizes its child elements. 重複する子要素をお互いに重ねる方法を検討する必要があることもあります。You might also need to consider how overlapping child elements are layered on top of each other.

XAML フレームワークで提供されるパネル コントロールの主な機能の比較を以下に示します。Here's a comparison of the main features of the panel controls provided in the XAML framework.

パネル コントロールPanel Control 説明Description
CanvasCanvas Canvas は柔軟な UI をサポートしていません。子要素の配置とサイズに関するすべての側面を制御します。Canvas doesn’t support fluid UI; you control all aspects of positioning and sizing child elements. 通常、グラフィックスの作成などの特殊な場合や、大規模なアダプティブ UI の小さな静的領域を定義するために使用します。You typically use it for special cases like creating graphics or to define small static areas of a larger adaptive UI. コードまたは表示状態を使って、実行時に要素の位置を変更できます。You can use code or visual states to reposition elements at runtime.
  • Canvas.Top 添付プロパティと Canvas.Left 添付プロパティを使って、要素を絶対的に配置します。Elements are positioned absolutely using Canvas.Top and Canvas.Left attached properties.
  • Canvas.ZIndex 添付プロパティを使って、重なりを明示的に指定することもできます。Layering can be explicitly specified using the Canvas.ZIndex attached property.
  • HorizontalAlignment/VerticalAlignment の Stretch の値は無視されます。Stretch values for HorizontalAlignment/VerticalAlignment are ignored. 要素のサイズが明示的に設定されていない場合は、そのコンテンツに合わせてサイズ変更されます。If an element's size is not set explicitly, it sizes to its content.
  • パネルより大きい場合、子のコンテンツは視覚上クリップされません。Child content is not visually clipped if larger than the panel.
  • 子のコンテンツはパネルの境界によって制約されません。Child content is not constrained by the bounds of the panel.
  • GridGrid Grid は、子要素の柔軟なサイズ変更をサポートしています。Grid supports fluid resizing of child elements. コードまたは表示状態を使って、要素の位置の変更や再配置を実行できます。You can use code or visual states to reposition and reflow elements.
  • Grid.Row 添付プロパティと Grid.Column 添付プロパティを使って、要素は行と列に配置されます。Elements are arranged in rows and columns using Grid.Row and Grid.Column attached properties.
  • 行や列をまたいで要素を表示するには、Grid.RowSpan 添付プロパティと Grid.ColumnSpan 添付プロパティを使います。Elements can span multiple rows and columns using Grid.RowSpan and Grid.ColumnSpan attached properties.
  • HorizontalAlignment/VerticalAlignment の Stretch の値は考慮されます。Stretch values for HorizontalAlignment/VerticalAlignment are respected. 要素のサイズを明示的に設定しないと、グリッド セルの利用可能な領域いっぱいに拡大されます。If an element's size is not set explicitly, it stretches to fill the available space in the grid cell.
  • パネルより大きい場合、子のコンテンツは視覚上クリップされます。Child content is visually clipped if larger than the panel.
  • コンテンツのサイズはパネルの境界によって制約されるため、スクロール可能なコンテンツでは必要に応じてスクロール バーが表示されます。Content size is constrained by the bounds of the panel, so scrollable content shows scroll bars if needed.
  • RelativePanelRelativePanel
  • 要素は、パネルの端または中央を基準として、および互いを基準として配置されます。Elements are arranged in relation to the edge or center of the panel, and in relation to each other.
  • 要素は、パネルの配置、兄弟の配置、兄弟の位置を制御するさまざまな添付プロパティを使用して配置されます。Elements are positioned using a variety of attached properties that control panel alignment, sibling alignment, and sibling position.
  • HorizontalAlignment/VerticalAlignment の Stretch 値は、配置の RelativePanel 添付プロパティが拡大の原因である場合 (要素がパネルの右端と左端の両方に整列される場合など) を除き、無視されます。Stretch values for HorizontalAlignment/VerticalAlignment are ignored unless RelativePanel attached properties for alignment cause stretching (for example, an element is aligned to both the right and left edges of the panel). 要素のサイズが明示的に設定されておらず、要素が拡大されていない場合、要素はそのコンテンツに合わせてサイズ変更されます。If an element's size is not set explicitly and it's not stretched, it sizes to its content.
  • パネルより大きい場合、子のコンテンツは視覚上クリップされます。Child content is visually clipped if larger than the panel.
  • コンテンツのサイズはパネルの境界によって制約されるため、スクロール可能なコンテンツでは必要に応じてスクロール バーが表示されます。Content size is constrained by the bounds of the panel, so scrollable content shows scroll bars if needed.
  • StackPanelStackPanel
  • 要素は、水平方向または垂直方向に 1 列に並べて表示されます。Elements are stacked in a single line either vertically or horizontally.
  • HorizontalAlignment/VerticalAlignment の Stretch 値は、Orientation プロパティとは逆の方向で考慮されます。Stretch values for HorizontalAlignment/VerticalAlignment are respected in the direction opposite the Orientation property. 要素のサイズが明示的に設定されていない場合、利用可能な幅 (Orientation が Horizontal の場合は高さ) いっぱいに拡大されます。If an element's size is not set explicitly, it stretches to fill the available width (or height if the Orientation is Horizontal). 要素は、Orientation プロパティで指定された方向に、そのコンテンツに合わせてサイズ変更されます。In the direction specified by the Orientation property, an element sizes to its content.
  • パネルより大きい場合、子のコンテンツは視覚上クリップされます。Child content is visually clipped if larger than the panel.
  • コンテンツのサイズは、Orientation プロパティで指定された方向では、パネルの境界によって制約されないため、スクロール可能なコンテンツはパネルの境界を越えて拡大され、スクロール バーは表示されません。Content size is not constrained by the bounds of the panel in the direction specified by the Orientation property, so scrollable content stretches beyond the panel bounds and doesn't show scrollbars. スクロール バーを表示するには、子のコンテンツの高さ (または幅) を明示的に制約する必要があります。You must explicitly constrain the height (or width) of the child content to make its scrollbars show.
  • VariableSizedWrapGridVariableSizedWrapGrid
  • 要素は、複数行、複数列に配置され、MaximumRowsOrColumns 値に達すると新しい行または列に自動的に折り返して配置されます。Elements are arranged in rows or columns that automatically wrap to a new row or column when the MaximumRowsOrColumns value is reached.
  • 要素を行と列のどちらの形式で配置するかは、Orientation プロパティで指定します。Whether elements are arranged in rows or columns is specified by the Orientation property.
  • 行や列をまたいで要素を表示するには、VariableSizedWrapGrid.RowSpan 添付プロパティと VariableSizedWrapGrid.ColumnSpan 添付プロパティを使います。Elements can span multiple rows and columns using VariableSizedWrapGrid.RowSpan and VariableSizedWrapGrid.ColumnSpan attached properties.
  • HorizontalAlignment/VerticalAlignment の Stretch の値は無視されます。Stretch values for HorizontalAlignment/VerticalAlignment are ignored. ItemHeight プロパティと ItemWidth プロパティを指定すると、要素のサイズが変更されます。Elements are sized as specified by the ItemHeight and ItemWidth properties. これらのプロパティが設定されていない場合、最初のセルの項目はそのコンテンツに合わせてサイズ変更され、その他のすべてのセルはこのサイズを継承します。If these properties are not set, the item in the first cell sizes to its content, and all other cells inherit this size.
  • パネルより大きい場合、子のコンテンツは視覚上クリップされます。Child content is visually clipped if larger than the panel.
  • コンテンツのサイズはパネルの境界によって制約されるため、スクロール可能なコンテンツでは必要に応じてスクロール バーが表示されます。Content size is constrained by the bounds of the panel, so scrollable content shows scroll bars if needed.
  • これらのパネルの例および詳細情報については、「レイアウト パネル」をご覧ください。For detailed information and examples of these panels, see Layout panels. レスポンシブな手法のサンプルに関するページもご覧ください。Also, see the Responsive techniques sample.

    レイアウト パネルでは、コントロールの論理グループに UI を整理することができます。Layout panels let you organize your UI into logical groups of controls. 適切なプロパティの設定で使用する場合、UI 要素の自動サイズ変更、位置変更、再配置などのサポートを取得します。When you use them with appropriate property settings, you get some support for automatic resizing, repositioning, and reflowing of UI elements. ただし、ほとんどの UI レイアウトでは、ウィンドウのサイズに大幅な変更がある場合、さらに変更が必要です。However, most UI layouts need further modification when there are significant changes to the window size. これには、表示状態を使うことができます。For this, you can use visual states.

    表示状態と状態トリガーを使ったアダプティブ レイアウトAdaptive layouts with visual states and state triggers

    ウィンドウのサイズまたはその他の変更に基づいて、UI に大幅な変更を行うには、表示状態を使用します。Use visual states to make significant alterations to your UI based on window size or other changes.

    アプリ ウィンドウを一定量を超えて拡大/縮小するときに、レイアウト プロパティを変更して、UI のセクションの位置変更、サイズ変更、再配置、表示、置換を行うことが必要になる可能性があります。When your app window grows or shrinks beyond a certain amount, you might want to alter layout properties to reposition, resize, reflow, reveal, or replace sections of your UI. UI のさまざまな表示状態を定義し、ウィンドウの幅や高さが指定したしきい値を超えたときに適用できます。You can define different visual states for your UI, and apply them when the window width or window height crosses a specified threshold.

    AdaptiveTrigger を使うと、状態を適用するしきい値 ("ブレークポイント" とも呼ばれます) を簡単に設定できます。An AdaptiveTrigger provides an easy way to set the threshold (also called 'breakpoint') where a state is applied. VisualState は、要素が特定の状態にあるときに、要素に適用されるプロパティ値を定義します。A VisualState defines property values that are applied to an element when it’s in a particular state. 指定された条件が満たされたときに適切な VisualState を適用する VisualStateManager で表示状態をグループ化します。You group visual states in a VisualStateManager that applies the appropriate VisualState when the specified conditions are met.

    コードでの表示状態の設定Set visual states in code

    コードで表示状態を適用するには、VisualStateManager.GoToState メソッドを呼び出します。To apply a visual state from code, you call the VisualStateManager.GoToState method. たとえば、アプリ ウィンドウが特定のサイズであるときに状態を適用するには、SizeChanged イベントを処理し、GoToState を呼び出して適切な状態を適用します。For example, to apply a state when the app window is a particular size, handle the SizeChanged event and call GoToState to apply the appropriate state.

    ここでは、VisualStateGroup に 2 つの VisualState の定義が含まれています。Here, a VisualStateGroup contains two VisualState definitions. 最初の DefaultState は空です。The first, DefaultState, is empty. これが適用される場合、XAML ページで定義されている値が適用されます。When it's applied, the values defined in the XAML page are applied. 2 番目の WideState は、SplitViewDisplayMode プロパティを Inline に変更し、ウィンドウを開きます。The second, WideState, changes the DisplayMode property of the SplitView to Inline and opens the pane. この状態は、ウィンドウの幅が 640 有効ピクセルより大きい場合に、SizeChanged イベント ハンドラーで適用されます。This state is applied in the SizeChanged event handler if the window width is greater than 640 effective pixels.

    注意

    先に進む前に知っておくべきですが、アプリが実行されている特定のデバイスをアプリが検出する手段は、Windows では提供されていません。Windows doesn't provide a way for your app to detect the specific device your app is running on. アプリが実行されているデバイス ファミリー (モバイル、デスクトップなど)、効果的な解像度、およびアプリが利用できる画面領域の量 (アプリのウィンドウのサイズ) は伝えることができます。It can tell you the device family (mobile, desktop, etc) the app is running on, the effective resolution, and the amount of screen space available to the app (the size of the app's window). 画面のサイズとブレークポイントの表示状態を定義することをお勧めします。We recommend defining visual states for screen sizes and break points.

    <Page ...>
        <Grid>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup>
                    <VisualState x:Name="DefaultState">
                            <Storyboard>
                            </Storyboard>
                        </VisualState>
    
                    <VisualState x:Name="WideState">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames
                                Storyboard.TargetProperty="SplitView.DisplayMode"
                                Storyboard.TargetName="mySplitView">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <SplitViewDisplayMode>Inline</SplitViewDisplayMode>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames
                                Storyboard.TargetProperty="SplitView.IsPaneOpen"
                                Storyboard.TargetName="mySplitView">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="True"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
    
            <SplitView x:Name="mySplitView" DisplayMode="CompactInline"
                       IsPaneOpen="False" CompactPaneLength="20">
                <!-- SplitView content -->
    
                <SplitView.Pane>
                    <!-- Pane content -->
                </SplitView.Pane>
            </SplitView>
        </Grid>
    </Page>
    
    private void CurrentWindow_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
    {
        if (e.Size.Width > 640)
            VisualStateManager.GoToState(this, "WideState", false);
        else
            VisualStateManager.GoToState(this, "DefaultState", false);
    }
    

    XAML マークアップでの表示状態の設定Set visual states in XAML markup

    Windows 10 より前のバージョンでは、VisualState の定義にプロパティ変更のための Storyboard オブジェクトが必要であり、コードで GoToState を呼び出して状態を適用する必要がありました。Prior to Windows 10, VisualState definitions required Storyboard objects for property changes, and you had to call GoToState in code to apply the state. これは前の例に示されています。This is shown in the previous example. この構文はまだ多くの例で使用されており、この構文を使用する既存のコードがある可能性もあります。You will still see many examples that use this syntax, or you might have existing code that uses it.

    Windows 10 以降では、ここで示す簡素化された Setter 構文を使うことができ、XAML マークアップで StateTrigger を使って状態を適用できます。Starting in Windows 10, you can use the simplified Setter syntax shown here, and you can use a StateTrigger in your XAML markup to apply the state. 状態トリガーを使って、アプリのイベントに応答して自動的に表示状態の変更をトリガーする単純な規則を作成します。You use state triggers to create simple rules that automatically trigger visual state changes in response to an app event.

    この例は前の例と同じですが、プロパティの変更を定義する Storyboard の代わりに、簡素化された Setter 構文を使用しています。This example does the same thing as the previous example, but uses the simplified Setter syntax instead of a Storyboard to define property changes. また、GoToState を呼び出す代わりに、組み込みの AdaptiveTrigger 状態トリガーを使って状態を適用しています。And instead of calling GoToState, it uses the built in AdaptiveTrigger state trigger to apply the state. 状態トリガーを使う場合、空の DefaultState を定義する必要はありません。When you use state triggers, you don't need to define an empty DefaultState. 状態トリガーの条件が満たされなくなったときには、既定の設定が自動的に再適用されます。The default settings are reapplied automatically when the conditions of the state trigger are no longer met.

    <Page ...>
        <Grid>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup>
                    <VisualState>
                        <VisualState.StateTriggers>
                            <!-- VisualState to be triggered when the
                                 window width is >=640 effective pixels. -->
                            <AdaptiveTrigger MinWindowWidth="640" />
                        </VisualState.StateTriggers>
    
                        <VisualState.Setters>
                            <Setter Target="mySplitView.DisplayMode" Value="Inline"/>
                            <Setter Target="mySplitView.IsPaneOpen" Value="True"/>
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
    
            <SplitView x:Name="mySplitView" DisplayMode="CompactInline"
                       IsPaneOpen="False" CompactPaneLength="20">
                <!-- SplitView content -->
    
                <SplitView.Pane>
                    <!-- Pane content -->
                </SplitView.Pane>
            </SplitView>
        </Grid>
    </Page>
    

    重要

    VisualStateManager.VisualStateGroups 添付プロパティが設定されて、前の例で、グリッド要素。In the previous example, the VisualStateManager.VisualStateGroups attached property is set on the Grid element. StateTriggers を使う場合は、トリガーを自動的に有効にするために、常にルートの最初の子に VisualStateGroups が添付されていることを確認しますWhen you use StateTriggers, always ensure that VisualStateGroups is attached to the first child of the root in order for the triggers to take effect automatically. (ここでは、Grid がルートの Page 要素の最初の子です)。(Here, Grid is the first child of the root Page element.)

    添付プロパティの構文Attached property syntax

    VisualState では、通常、コントロールのプロパティの値、つまりコントロールを含むパネルのいずれかの添付プロパティの値を設定します。In a VisualState, you typically set a value for a control property, or for one of the attached properties of the panel that contains the control. 添付プロパティを設定するときは、添付プロパティ名をかっこで囲みます。When you set an attached property, use parentheses around the attached property name.

    この例では、myTextBox という名前の TextBox に対して、RelativePanel.AlignHorizontalCenterWithPanel 添付プロパティを設定する方法を示しています。This example shows how to set the RelativePanel.AlignHorizontalCenterWithPanel attached property on a TextBox named myTextBox. 最初の XAML では ObjectAnimationUsingKeyFrames 構文を使用し、2 つ目の XAML では Setter 構文を使用しています。The first XAML uses ObjectAnimationUsingKeyFrames syntax and the second uses Setter syntax.

    <!-- Set an attached property using ObjectAnimationUsingKeyFrames. -->
    <ObjectAnimationUsingKeyFrames
        Storyboard.TargetProperty="(RelativePanel.AlignHorizontalCenterWithPanel)"
        Storyboard.TargetName="myTextBox">
        <DiscreteObjectKeyFrame KeyTime="0" Value="True"/>
    </ObjectAnimationUsingKeyFrames>
    
    <!-- Set an attached property using Setter. -->
    <Setter Target="myTextBox.(RelativePanel.AlignHorizontalCenterWithPanel)" Value="True"/>
    

    カスタム状態トリガーCustom state triggers

    StateTrigger クラスを拡張して、さまざまなシナリオに対するカスタム トリガーを作成できます。You can extend the StateTrigger class to create custom triggers for a wide range of scenarios. たとえば、入力の種類に基づいてさまざまな状態をトリガーする StateTrigger を作成して、入力の種類がタッチである場合はコントロールの周囲の余白を増やすことができます。For example, you can create a StateTrigger to trigger different states based on input type, then increase the margins around a control when the input type is touch. また、アプリが実行されるデバイス ファミリに基づいてさまざまな状態を適用する StateTrigger を作成することもできます。Or create a StateTrigger to apply different states based on the device family the app is run on. カスタム トリガーを作成し、それらを使用して単一の XAML ビュー内から最適化された UI エクスペリエンスを作成する方法の例については、状態トリガーのサンプルに関するページをご覧ください。For examples of how to build custom triggers and use them to create optimized UI experiences from within a single XAML view, see the State triggers sample.

    表示状態とスタイルVisual states and styles

    表示状態で Style リソースを使って、一連のプロパティの変更を複数のコントロールに適用できます。You can use Style resources in visual states to apply a set of property changes to multiple controls. スタイルの使用について詳しくは、「コントロールのスタイル」をご覧ください。For more info about using styles, see Styling controls.

    状態トリガーのサンプルに関するページから引用したこの簡略化された XAML では、Style リソースを Button に適用して、マウスまたはタッチ入力の場合にサイズと余白を調整しています。In this simplified XAML from the State triggers sample, a Style resource is applied to a Button to adjust the size and margins for mouse or touch input. このカスタム状態トリガーの完全なコードおよび定義については、状態トリガーのサンプルに関するページをご覧ください。For the complete code and the definition of the custom state trigger, see the State triggers sample.

    <Page ... >
        <Page.Resources>
            <!-- Styles to be used for mouse vs. touch/pen hit targets -->
            <Style x:Key="MouseStyle" TargetType="Rectangle">
                <Setter Property="Margin" Value="5" />
                <Setter Property="Height" Value="20" />
                <Setter Property="Width" Value="20" />
            </Style>
            <Style x:Key="TouchPenStyle" TargetType="Rectangle">
                <Setter Property="Margin" Value="15" />
                <Setter Property="Height" Value="40" />
                <Setter Property="Width" Value="40" />
            </Style>
        </Page.Resources>
    
        <RelativePanel>
            <!-- ... -->
            <Button Content="Color Palette Button" x:Name="MenuButton">
                <Button.Flyout>
                    <Flyout Placement="Bottom">
                        <RelativePanel>
                            <Rectangle Name="BlueRect" Fill="Blue"/>
                            <Rectangle Name="GreenRect" Fill="Green" RelativePanel.RightOf="BlueRect" />
                            <!-- ... -->
                        </RelativePanel>
                    </Flyout>
                </Button.Flyout>
            </Button>
            <!-- ... -->
        </RelativePanel>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="InputTypeStates">
                <!-- Second set of VisualStates for building responsive UI optimized for input type.
                     Take a look at InputTypeTrigger.cs class in CustomTriggers folder to see how this is implemented. -->
                <VisualState>
                    <VisualState.StateTriggers>
                        <!-- This trigger indicates that this VisualState is to be applied when MenuButton is invoked using a mouse. -->
                        <triggers:InputTypeTrigger TargetElement="{x:Bind MenuButton}" PointerType="Mouse" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="BlueRect.Style" Value="{StaticResource MouseStyle}" />
                        <Setter Target="GreenRect.Style" Value="{StaticResource MouseStyle}" />
                        <!-- ... -->
                    </VisualState.Setters>
                </VisualState>
                <VisualState>
                    <VisualState.StateTriggers>
                        <!-- Multiple trigger statements can be declared in the following way to imply OR usage.
                             For example, the following statements indicate that this VisualState is to be applied when MenuButton is invoked using Touch OR Pen.-->
                        <triggers:InputTypeTrigger TargetElement="{x:Bind MenuButton}" PointerType="Touch" />
                        <triggers:InputTypeTrigger TargetElement="{x:Bind MenuButton}" PointerType="Pen" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="BlueRect.Style" Value="{StaticResource TouchPenStyle}" />
                        <Setter Target="GreenRect.Style" Value="{StaticResource TouchPenStyle}" />
                        <!-- ... -->
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Page>
    

    カスタマイズされたレイアウトTailored layouts

    さまざまなデバイスで UI のレイアウトに大幅な変更を加えるときは、1 つの UI を適合させるのではなく、デバイスに合わせてカスタマイズされたレイアウトを含む個別の UI ファイルを定義すると便利な場合があります。When you make significant changes to your UI layout on different devices, you might find it more convenient to define a separate UI file with a layout tailored to the device, rather than adapting a single UI. 複数のデバイス間で機能が同じである場合は、同じコード ファイルを共有する個別の XAML ビューを定義できます。If the functionality is the same across devices, you can define separate XAML views that share the same code file. ビューと機能の両方がデバイス間で大幅に異なる場合は、個別の Page を定義し、アプリの読み込み時に移動する Page を選ぶことができます。If both the view and the functionality differ significantly across devices, you can define separate Pages, and choose which Page to navigate to when the app is loaded.

    デバイス ファミリごとの個別の XAML ビューSeparate XAML views per device family

    同じ分離コードを共有する複数の UI 定義を作成するには、XAML ビューを使用します。Use XAML views to create different UI definitions that share the same code-behind. デバイス ファミリごとに固有の UI 定義を提供できます。You can provide a unique UI definition for each device family. 次の手順に従って、アプリに XAML ビューを追加します。Follow these steps to add a XAML view to your app.

    XAML ビューをアプリに追加するにはTo add a XAML view to an app

    1. [プロジェクト] の [新しい項目の追加] をクリックします。Select Project > Add New Item. [新しい項目の追加] ダイアログ ボックスが開きます。The Add New Item dialog box opens.

      ヒント  ソリューション エクスプローラーで、ソリューションではなく、フォルダーまたはプロジェクトが選択されていることを確認します。Tip  Make sure a folder or the project, and not the solution, is selected in Solution Explorer.

    2. 左側のウィンドウの [Visual C#] または [Visual Basic] の下で、テンプレートの種類として [XAML] を選びます。Under Visual C# or Visual Basic in the left pane, pick the XAML template type.
    3. 中央のウィンドウで、[XAML ビュー] を選びます。In the center pane, pick XAML View.
    4. ビューの名前を入力します。Enter the name for the view. ビューには、正しく名前を付ける必要があります。The view must be named correctly. 命名方法について詳しくは、このセクションの後半をご覧ください。For more info on naming, see the remainder of this section.
    5. [追加] をクリックします。Click Add. ファイルがプロジェクトに追加されます。The file is added to the project.

    前の手順では、XAML ファイルのみを作成し、関連付けられた分離コード ファイルは作成していません。The previous steps create only a XAML file, but not an associated code-behind file. 代わりに、ファイル名やフォルダー名の一部である "DeviceName" 修飾子を使って、XAML ビューが既存の分離コード ファイルに関連付けられています。Instead, the XAML view is associated with an existing code-behind file using a "DeviceName" qualifier that's part of the file or folder name. この修飾子名は、アプリが現在実行されているデバイスのデバイス ファミリを表す文字列値 ("Desktop"、"Tablet"、およびその他のデバイス ファミリの名前) にマップすることができます (「ResourceContext.QualifierValues」をご覧ください)。This qualifier name can be mapped to a string value that represents the device family of the device that your app is currently running on, such as, "Desktop", "Tablet", and the names of the other device families (see ResourceContext.QualifierValues).

    ファイル名に修飾子を追加することや、修飾子名を持つフォルダーにファイルを追加することができます。You can add the qualifier to the file name, or add the file to a folder that has the qualifier name.

    ファイル名を使用して、Use file name

    ファイルに修飾子名を使用するには、 [pageName] .DeviceFamily- [qualifierString] .xaml という形式を使用します。To use the qualifier name with the file, use this format: [pageName].DeviceFamily-[qualifierString].xaml.

    MainPage.xaml という名前のファイルの例を見てみましょう。Let's look at an example for a file named MainPage.xaml. タブレット デバイス用のビューを作成するには、XAML ビューに MainPage.DeviceFamily-Tablet.xaml という名前を付けます。To create a view for tablet devices, name the XAML view MainPage.DeviceFamily-Tablet.xaml. PC デバイス用のビューを作成するには、ビューに MainPage.DeviceFamily-Desktop.xaml という名前を付けます。To create a view for PC devices, name the view MainPage.DeviceFamily-Desktop.xaml. Microsoft Visual Studio で、ソリューションがどのように表示されるかを以下に示します。Here's what the solution looks like in Microsoft Visual Studio.

    修飾ファイル名を持つ XAML ビュー

    フォルダー名を使用します。Use folder name

    フォルダーを使用して Visual Studio プロジェクト内のビューを整理するには、フォルダーで修飾子名を使うことができます。To organize the views in your Visual Studio project using folders, you can use the qualifier name with the folder. これを行うには、次のように、フォルダーを名前します。DeviceFamily - [qualifierString] します。To do so, name your folder like this: DeviceFamily-[qualifierString]. この場合は、各 XAML ファイルの名前は同じになります。In this case, each XAML view file has the same name. ファイル名に修飾子を含めないでください。Don't include the qualifier in the file name.

    MainPage.xaml という名前のファイルの例を以下に示します。Here's an example, again for a file named MainPage.xaml. タブレット デバイス用のビューを作成するには、"DeviceFamily-Tablet" という名前のフォルダーを作成し、このフォルダーに MainPage.xaml という名前の XAML ビューを配置します。To create a view for tablet devices, create a folder named "DeviceFamily-Tablet", and place a XAML view named MainPage.xaml into it. PC デバイス用のビューを作成するには、"DeviceFamily-Desktop" という名前のフォルダーを作成し、このフォルダーに MainPage.xaml という名前の別の XAML ビューを配置します。To create a view for PC devices, create a folder named "DeviceFamily-Desktop", and place another XAML view named MainPage.xaml into it. Visual Studio で、ソリューションがどのように表示されるかを以下に示します。Here's what the solution looks like in Visual Studio.

    フォルダー内の XAML ビュー

    どちらの場合も、タブレット デバイスと PC デバイス用に固有のビューが使用されます。In both cases, a unique view is used for tablet and PC devices. 既定の MainPage.xaml ファイルは、実行されているデバイスがデバイス ファミリ固有のビューのいずれにも一致しない場合に使用されます。The default MainPage.xaml file is used if the device it's running on doesn't match any of the device family specific views.

    デバイス ファミリごとの個別の XAML ページSeparate XAML pages per device family

    固有のビューと機能を提供するために、個別の Page ファイル (XAML とコード) を作成し、ページが必要になったときに適切なページに移動することができます。To provide unique views and functionality, you can create separate Page files (XAML and code), and then navigate to the appropriate page when the page is needed.

    XAML ページをアプリに追加するにはTo add a XAML page to an app

    1. [プロジェクト] の [新しい項目の追加] をクリックします。Select Project > Add New Item. [新しい項目の追加] ダイアログ ボックスが開きます。The Add New Item dialog box opens.

      ヒント  ソリューション エクスプローラーで、ソリューションではなく、プロジェクトが選択されていることを確認します。Tip  Make sure the project, and not the solution, is selected in Solution Explorer.

    2. 左側のウィンドウの [Visual C#] または [Visual Basic] の下で、テンプレートの種類として [XAML] を選びます。Under Visual C# or Visual Basic in the left pane, pick the XAML template type.
    3. 中央のウィンドウで、[空白のページ] を選びます。In the center pane, pick Blank page.
    4. ページの名前を入力します。Enter the name for the page. たとえば、"MainPage_Tablet" と入力します。For example, "MainPage_Tablet". MainPage_Tablet.xaml と MainPage_Tablet.xaml.cs/vb/cpp コード ファイルの両方が作成されます。Both a MainPage_Tablet.xaml and MainPage_Tablet.xaml.cs/vb/cpp code file are created.
    5. [追加] をクリックします。Click Add. ファイルがプロジェクトに追加されます。The file is added to the project.

    実行時に、アプリが実行されているデバイス ファミリを確認し、次のように適切なページに移動します。At runtime, check the device family that the app is running on, and navigate to the correct page like this.

    if (Windows.System.Profile.AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.Tablet")
    {
        rootFrame.Navigate(typeof(MainPage_Tablet), e.Arguments);
    }
    else
    {
        rootFrame.Navigate(typeof(MainPage), e.Arguments);
    }
    

    さまざまな条件に従って移動先のページを決定することもできます。You can also use different criteria to determine which page to navigate to. 他の例については、カスタマイズされた複数のビューのサンプルに関するページをご覧ください。このサンプルでは、GetIntegratedDisplaySize 関数を使って、統合ディスプレイの物理サイズを確認しています。For more examples, see the Tailored multiple views sample, which uses the GetIntegratedDisplaySize function to check the physical size of an integrated display.