XAML デザイナーでレイアウト コンテナーにオブジェクトを編成するOrganize objects into layout containers in XAML Designer

イメージ、ボタン、ビデオなどのオブジェクトをどこに表示させたいか想像してください。Imagine where you'd like objects to appear on a page; objects such as images, buttons, and videos. 縦か横の単一行の行列、または固定位置に表示させたいのではないでしょうか。Maybe you want them to appear in rows and columns, in a single line vertically or horizontally, or in fixed positions.

ページの表示方法について考える段階になったら、レイアウト パネルを選択します。After you've had a chance to think about how the page might appear, choose a layout panel. オブジェクトを追加するための何かが必要になるため、すべてのページはあるものから開始します。All pages start with one because you need something to add your objects to. これは既定ではグリッドですが、変更しても構いません。By default, it's a Grid but you can change that.

レイアウト パネルでは、ページ上にオブジェクトを配置できますが、それ以上のことができます。Layout panels help you arrange objects on a page, but they do more than that. さまざまな画面サイズと解像度で設計するのに役立ちます。They help you design for different screen sizes and resolutions. ユーザーが自分のアプリを実行する際、デバイスの実際の画面と一致させるためにレイアウト パネル内のすべてのものがサイズ変更されます。When users run your app, everything in a layout panel resizes to match the screen real estate of their device. もちろん、レイアウトのサイズ変更をしたくない場合は、レイアウトの一部または全体の動作をオーバーライドできます。Of course, if you don't want your layout to do that, you can override that behavior for a part of the layout, or the entire layout. これを制御するには、高さと幅のプロパティを使用します。You can use height and width properties to control that.

このページでは、レイアウト パネルとコントロールについて説明した後、パネルとコントロールの使用を開始する助けとなる短いビデオに移ります。This page describes layout panels and controls, and then directs you to short videos that help you get started with them.

注意

一部のビデオでは Blend や Expression Blend に言及していることがありますが、それらのツールでは Visual Studio および Blend for Visual Studio と同じ XAML デザイナーを使用します。Some of the videos may refer to Blend or Expression Blend, which use the same XAML designer as Visual Studio and Blend for Visual Studio.

レイアウト パネルLayout panels

いずれかのレイアウト パネルを選択して、ページを開始します。Start your page by choosing one of these layout panels. ページは、複数にすることができます。Your page can have more than one. たとえば、グリッド レイアウト パネルで開始してから StackPanelグリッド内の領域に追加することがあります。そうすることで、その要素内でコントロールを縦方向に配置できます。For example, you might start with a Grid layout panel, and then add a StackPanel to an area in the Grid so that you can arrange controls vertically in that element.

次のレイアウト パネルは最もよく使用されますが、他にもレイアウト パネルがあります。The following layout panels are the most popularly used, but there are others. すべてのレイアウト コントロールは [アセット] パネルにあります。You can find them all in the Assets panel.

グリッドGrid

行と列にオブジェクトを配置します。Arrange objects into rows and columns.

短いビデオを見る: インストール済みフィーチャーの構成 グリッドを使用するWatch a short video: Configure Installed Features Using Grids

UniformGridUniformGrid

オブジェクトを等しい、統一されたグリッド領域に配置します。Arrange objects into equal, or uniform, grid regions. このパネルは、イメージの一覧を配置するのに適しています。This panel is great for arranging a list of images.

(WPF プロジェクトでのみ使用可能)(Available only for WPF projects)

短いビデオを見る: インストール済みフィーチャーの構成 UniformGrid を使用するWatch a short video: Configure Installed Features Working with a UniformGrid

キャンバスCanvas

任意の方法でオブジェクトを配置します。Arrange objects any way you want. ユーザーがアプリを実行しているとき、これらの要素は画面上の固定位置にあります。When users run your app, these elements will have fixed positions on the screen.

短いビデオを見る: インストール済みフィーチャーの構成 キャンバスを使用するWatch a short video: Configure Installed Features Working with the canvas

StackPanelStackPanel

横方向または縦方向の単一行にオブジェクトを配置します。Arrange objects in a single line horizontally or vertically.

短いビデオを見る: インストール済みフィーチャーの構成 StackPanel と WrapPanel を使用するWatch a short video: Configure Installed Features Working with StackPanel and WrapPanel

WrapPanelWrapPanel

左から右へ順番にオブジェクトを配置します。Arrange objects sequentially from left to right. パネルの右端に余地がない場合、コンテンツを次の行に折り返します。同様に左から右、上から下へ実行します。When the panel runs out of room at the far-right edge, it wraps the content to the next line, and so on from left-to-right, top-to-bottom. 上から下、左から右へオブジェクトが流れるよう、[折り返し] パネルの向きを縦方向にすることもできます。You can also make the orientation of a wrap panel vertical so that objects flow from top-to-bottom, left-to-right.

(WPF プロジェクトでのみ使用可能)(Available only for WPF projects)

短いビデオを見る: インストール済みフィーチャーの構成 StackPanel と WrapPanel を使用するWatch a short video: Configure Installed Features Working with StackPanel and WrapPanel

DockPanelDockPanel

オブジェクトをパネルの 1 辺に沿うように (ドッキングして) 整列します。Arrange objects so that they stay, or dock, to one edge of the panel.

(WPF プロジェクトでのみ使用可能)(Available only for WPF projects)

短いビデオを見る: インストール済みフィーチャーの構成 WPF - DockPanelWatch a short video: Configure Installed Features WPF - DockPanel

レイアウト コントロールLayout controls

オブジェクトをレイアウト コントロールに追加することもできます。You can add your objects to layout controls as well. レイアウト パネルほど機能が豊富ではありませんが、特定のシナリオで役立つことがあります。They aren't as feature-rich as a layout panel, but you might find them helpful for certain scenarios.

次のレイアウト コントロールは最もよく使用されますが、他にもレイアウト コントロールがあります。The following layout controls are the most popularly used but there are others. すべてのレイアウト コントロールは [アセット] パネルにあります。You can find them all in the Assets panel.

境界線Border

罫線、背景、またはその両方をオブジェクトの周りに作成します。Create a border, background, or both around an object. 境界線に対して追加できるオブジェクトは 1 つのみです。You can add only one object to a Border. 複数のオブジェクトに境界線や背景を適用する場合は、レイアウト パネルを境界線に追加します。If you want to apply a border or background for more than one object, add layout panel to the Border. 次に、オブジェクトをそのパネルまたはコントロールに追加します。Then, add objects to that panel or control.

短いビデオを見る: インストール済みフィーチャーの構成 境界線を使用するWatch a short video: Configure Installed Features Working with Borders

ウィンドウで情報またはオプションをユーザーに表示します。Show information or options to users in a window. ポップアップに対して追加できるオブジェクトは 1 つのみです。You can add only one object to a Popup. 既定では、ポップアップにはグリッドが含まれていますが、これは変更することができます。By default, a Popup contains a Grid but you can change that.

ScrollViewerScrollViewer

ページまたはページの領域を下にスクロールできるようになります。Enable uses to scroll down a page or area of a page. ScrollViewer に追加できるオブジェクトは 1 つのみであるため、グリッドStackPanel などのレイアウト パネルを追加することには大きな意味があります。You can add only one object to a ScrollViewer so it makes a lot of sense to add a layout panel such as a Grid or StackPanel.

ViewboxViewbox

ズーム コントロールのようにオブジェクトを拡大または縮小します。Scale objects much like you would with a zoom control. ViewBox に対して追加できるオブジェクトは 1 つのみです。You can add only one object to a Viewbox. 複数のオブジェクトにその効果を適用する場合は、レイアウト パネルを ViewBox に追加してから、コントロールをそのレイアウト パネルに追加します。If you want to apply that effect to more than one object, add a layout panel to the ViewBox, and then add your controls to that layout panel.

(WPF プロジェクトでのみ使用可能)(Available only for WPF projects)

関連項目See Also

Working with elements in XAML Designer Working with elements in XAML Designer
XAML デザイナーを使用した UI の作成Creating a UI by using XAML Designer