xaml
レイアウトコントロール

キャンバス

Canvasはパネルの中で最もシンプルです。指定されたTop/Left座標にアイテムを配置します。

<Canvas>
  <TextBlock 
    Canvas.Top="50" 
    Canvas.Left="50" 
    Text="This is located at 50, 50"/>
  <TextBlock 
    Canvas.Top="100"
    Canvas.Left="50"
    Width="150"
    Height="23"
    Text="This is located at 50, 100 with height 23 and width 150"/>
</Canvas>

DockPanel

DockPanelは、コントロールに配置されている順序で、ドックプロパティに従ってコントロールを整列します。

注： DockPanelはWPFフレームワークの一部ですが、Silverlight / WinRT / UWPは付属していません。オープンソースの実装は簡単に見つけることができます。

<DockPanel LastChildFill="False">
  <!-- This will strech along the top of the panel -->
  <Button DockPanel.Dock="Top" Content="Top"/>
  <!-- This will strech along the bottom of the panel -->
  <Button DockPanel.Dock="Bottom" Content="Bottom"/>
  <!-- This will strech along the remaining space in the left of the panel -->
  <Button DockPanel.Dock="Left" Content="Left"/>
  <!-- This will strech along the remaining space in the right of the panel -->
  <Button DockPanel.Dock="Right" Content="Right"/>
  <!-- Since LastChildFill is false, this will be placed at the panel's right, to the left of the last button-->
  <Button DockPanel.Dock="Right" Content="Right"/>
</DockPanel>

<!-- When lastChildFill is true, the last control in the panel will fill the remaining space, no matter what Dock was set to it -->
<DockPanel LastChildFill="True">
  <!-- This will strech along the top of the panel -->
  <Button DockPanel.Dock="Top" Content="Top"/>
  <!-- This will strech along the bottom of the panel -->
  <Button DockPanel.Dock="Bottom" Content="Bottom"/>
  <!-- This will strech along the remaining space in the left of the panel -->
  <Button DockPanel.Dock="Left" Content="Left"/>
  <!-- This will strech along the remaining space in the right of the panel -->
  <Button DockPanel.Dock="Right" Content="Right"/>
  <!-- Since LastChildFill is true, this will fill the remaining space-->
  <Button DockPanel.Dock="Right" Content="Fill"/>
</DockPanel>

StackPanel

StackPanelはそのコントロールを次々に配置します。これは、コントロールパネルのドックがすべて同じ値に設定されたドックパネルのように機能します。

<!-- The default StackPanel is oriented vertically, so the controls will be presented in order from top to bottom -->
<StackPanel>
  <Button Content="First"/>
  <Button Content="Second"/>
  <Button Content="Third"/>
  <Button Content="Fourth"/>
</StackPanel>

<!-- Setting the Orientation property to Horizontal will display the control in order from left to right (or right to left, according to the FlowDirection property) -->
<StackPanel Orientation="Horizontal">
  <Button Content="First"/>
  <Button Content="Second"/>
  <Button Content="Third"/>
  <Button Content="Fourth"/>
</StackPanel>

下から上にアイテムを積み重ねるには、ドックパネルを使用します。

グリッド

Gridはテーブルレイアウトの作成に使用されます。

基本的な行と列の定義

<Grid>
  <!-- Define 3 columns with width of 100 -->
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="100"/>
    <ColumnDefinition Width="100"/>
    <ColumnDefinition Width="100"/>
  </Grid.ColumnDefinitions>
  <!-- Define 3 rows with height of 50 -->
  <Grid.RowDefinitions>
    <RowDefinition Height="50"/>
    <RowDefinition Height="50"/>
    <RowDefinition Height="50"/>
  </Grid.RowDefinitions>
  <!-- This is placed at the top left (first row, first column) -->
  <Button 
      Grid.Column="0"
      Grid.Row="0"
      Content="Top Left"/>
  <!-- This is placed at the top left (first row, second column) -->
  <Button 
      Grid.Column="1"
      Grid.Row="0"
      Content="Top Center"/>
  <!-- This is placed at the center (second row, second column) -->
  <Button 
      Grid.Column="1"
      Grid.Row="1"
      Content="Center"/>
  <!-- This is placed at the bottom right (third row, third column) -->
  <Button 
      Grid.Column="2"
      Grid.Row="2"
      Content="Bottom Right"/>
</Grid>

注：次の例はすべて列のみを使用しますが、行にも適用できます 。

自動サイズ定義

列と行は、幅と高さを「自動」で定義できます。自動サイズは、内容を表示するのに必要なスペースとそれ以上のスペースを必要としません。
自動サイズ定義は、固定サイズ定義で使用できます。

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="50"/>
  </Grid.ColumnDefinitions>
  <!-- This column won't take much space -->
  <Button Grid.Column="0" Content="Small"/>
  <!-- This column will take much more space -->
  <Button Grid.Column="1" Content="This text will be very long."/>
  <!-- This column will take exactly 50 px -->
  <Button Grid.Column="2" Content="This text will be cut"/>
</Grid>

シンプルなスターサイズの定義

幅と高さを*列と行を定義できます。スターサイズの行/列は 、内容にかかわらず、それと同じ大きさのスペースをとります。
スターサイズの定義は、固定サイズおよび自動サイズの定義で使用できます。スターサイズがデフォルトであるため、列の幅または行の高さは省略できます。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="50"/>
    </Grid.ColumnDefinitions>
    <!-- This column will be as wide as it can -->
    <Button Grid.Column="0" Content="Small"/>
    <!-- This column will take exactly 50 px -->
    <Button Grid.Column="2" Content="This text will be cut"/>
</Grid>

比例星サイズ定義

星はできるだけ多くのスペースを取るという事実に加えて、星の定義もお互いに比例しています。何も言及されていない場合、各星の定義は、現在のグリッドの他のものと同じくらい多くのスペースを取るでしょう。

しかし、単純に乗算器を追加するだけで、異なる定義のサイズ間の比率を定義することは可能です。したがって、 2*として定義された列は、 *として定義された列の2倍の幅になります。単一ユニットの幅は、使用可能なスペースを乗算器の合計で割って計算されます（1でない場合）。
したがって、 * 、 2* 、 *と定義された3列のグリッドは、1/4、1/2、1/4と表示されます。
そして、 2* 、 3*として定義された2*つの列を持つものは、2 / 5,3 / 5と表示されます。

セットに自動または固定の定義がある場合は、最初にこれらの定義が計算され、その後、星の定義には残りのスペースが使用されます。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <!-- This column will be as wide as the third column -->
    <Button Grid.Column="0" Content="Small"/>
    <!-- This column will be twice as wide as the rest -->
    <Button Grid.Column="1" Content="This text will be very long."/>
    <!-- This column will be as wide as the first column -->
    <Button Grid.Column="2" Content="This text will may be cut"/>
</Grid>

列/行スパン

Row / ColumnSpanを設定することで、コントロールをセルの外側に広げることが可能です。設定される値は、行/列の数です。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <!-- This control will streach across most of the grid -->
    <Button Grid.Column="0" Grid.ColumnSpan="2" Content="Small"/>
    <Button Grid.Column="2" Content="This text will may be cut"/>
</Grid>

WrapPanel

ラップパネルは、スタックパネルと同様に動作します。項目がサイズを超えていることを認識した場合を除いて、向きに応じて新しい行/列にラップします。

水平方向

<WrapPanel Width="100">
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
</WrapPanel>

垂直ラップパネル

<WrapPanel Height="70" Orientation="Vertical">
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
</WrapPanel>

UniformGrid

ユニフォームグリッドはすべての子をグリッドレイアウトに配置し、各子はそれ自身のセルです。すべてのセルは同じサイズになります。これは、すべての行と列の定義が*設定されているグリッドの省略形と考えることができます。

デフォルトの行と列

デフォルトでは、UniformGridは同じ数の行と列を作成しようとします。行が長くなると、新しい列が追加されます。

このコードでは、最初の2行が塗りつぶされ、最後に1つのボタンが3×3のグリッドが作成されます。

<UniformGrid>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
</UniformGrid>

指定された行/列

あなたはUniformGridに、あなたが持ちたい行や列の数を正確に伝えることができます。

<UniformGrid Columns="2" >
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
</UniformGrid>

注：行と列の両方が設定されていて、セルより多くの子がある場合、グリッド内の最後の子は表示されません

FirstColumnプロパティ

Columnsプロパティが設定されると、FirstColumnプロパティを設定できます。このプロパティは、最初の子が表示される前に最初の行にx空のセルを入力します。 FirstColumnは、Columnsプロパティよりも小さい数値に設定する必要があります。

この例では、最初の行の2番目の列に最初のボタンが表示されます。

<UniformGrid Columns="2" FirstColumn="1">
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
</UniformGrid>

相対パネル

RelativePanelはWindows 10で導入され、主にアダプティブレイアウトをサポートするために使用されています。ここでは、パネルの子要素が使用可能な領域に応じて異なるレイアウトになっています。 RelativePanelは、通常、 ビジュアルステートで使用されます。 ビジュアルステートは 、レイアウト設定を切り替えたり、画面やウィンドウのサイズ、方向またはユースケースに合わせて使用​​します。子要素は、パネルと互いの位置関係を定義する添付プロパティを使用します。

<RelativePanel
    VerticalAlignment="Stretch"
    HorizontalAlignment="Stretch">
    <Rectangle
        x:Name="rectangle1"
        RelativePanel.AlignLeftWithPanel="True"
        Width="360"
        Height="50"
        Fill="Red"/>
    <Rectangle
        x:Name="rectangle2"
        RelativePanel.Below="rectangle1"
        Width="360"
        Height="50"
        Fill="Green" />
</RelativePanel>
<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState>
            <VisualState.StateTriggers>
                <!--VisualState to be triggered when window width is >=720 effective pixels.-->
                <AdaptiveTrigger
                    MinWindowWidth="720" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter
                    Target="rectangle2.(RelativePanel.Below)"
                    Value="{x:Null}" />
                <Setter
                    Target="rectangle2.(RelativePanel.RightOf)"
                    Value="rectangle1" />
                <Setter
                    Target="rectangle1.(RelativePanel.AlignLeftWithPanel)"
                    Value="False" />
                <Setter
                    Target="rectangle1.(RelativePanel.AlignVerticalCenterWithPanel)"
                    Value="True" />
                <Setter
                    Target="rectangle2.(RelativePanel.AlignVerticalCenterWithPanel)"
                    Value="True" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>