XAMLコンテナメモ 

環境：Visual Studio 2017 Community

例題：500*500の正方形のウインドウに上下左右に幅50のボタンをつける。
#Canvas
##説明
左上(上下左右可能)からの相対座標を指定する。
##サンプルソース
```xml:test.xaml
    <Canvas>
        <Button Content="TOP" Height="50" Width="500" Canvas.Top="0" Canvas.Left="0"/>
        <Button Content="BOTTOM" Height="50" Width="500" Canvas.Bottom="0" Canvas.Left="0"/>
        <Button Content="LEFT" Height="500" Width="50" Canvas.Top="0" Canvas.Left="0"/>
        <Button Content="RIGHT" Height="500" Width="50" Canvas.Top="0" Canvas.Right="0"/>
    </Canvas>
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/187121/8180b355-7f7a-2c96-7e11-8f3e245bf4aa.png)

##実行結果
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187121/32e45705-afab-3b0f-e496-7156dc55eb99.png)

##問題点
ウインドウのリサイズに対応しない。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187121/fdf9fdc0-abbd-e667-e014-a7b82ba74ff3.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187121/eaa45ff8-3e73-eb02-16db-c552f4ab73b5.png)
ボタンの階層構造が判別しにくい。
#DockPanel
##説明
DockPanel.Dockで指定した方向に子要素を張り付ける。(1個だと意味ない、複数の子要素が必要。)

##サンプルソース
```xml:test.xaml
    <DockPanel>
        <Button Content="TOP" Height="50"  DockPanel.Dock="Top"/>
        <Button Content="BOTTOM" Height="50" DockPanel.Dock="Bottom"/>
        <Button Content="LEFT" Width="50" DockPanel.Dock="Left" />
        <Button Content="RIGHT" Width="50" DockPanel.Dock="Right"/>
        <Button Content="center" Height="50" />
    </DockPanel>
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187121/69271751-4e07-7aa1-74f0-f3191fb6f8ff.png)
##実行結果
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187121/a5d5e900-98e4-f1d8-d1f5-c33adf311c92.png)

##問題点
ウインドウのリサイズに対応可能だが、使いにくい。
centerのボタンを無くすとレイアウトが崩れる・・・
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187121/38e923ed-dbe4-2ecc-fe27-dd4c339a7a5f.png)

#Grid
##説明
テーブル形式で、行と列の場所を指定する。
##サンプルソース
```xml:test.xaml
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50"/>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="50" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="50"/>
        </Grid.RowDefinitions>
        <Button Content="TOP" Grid.Row="0" Grid.ColumnSpan="3"/>
        <Button Content="BOTTOM" Grid.Row="2" Grid.ColumnSpan="3"/>
        <Button Content="LEFT" Grid.Row="1" Grid.Column="0"/>
        <Button Content="RIGHT" Grid.Row="1" Grid.Column="2"/>
    </Grid>
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187121/89461bc9-9251-7366-2bf2-fecb9f9ac849.png)

##実行結果
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187121/da7f2971-7eb0-3d0e-3022-ee9c972576da.png)

##問題点
升目上になるレイアウトで、行の数、列の数がある程度決まっている場合は、これが使い勝手が良さそう。ただ、後で行、列の数が変わると面倒になる考えられる。
#StackPanel
##説明
縦・横に積み上げていく。(Orientationで縦横の指定が可能)

##サンプルソース
```xml:test.xaml
    <StackPanel>
        <Button Content="TOP" Height="50"/>
        <StackPanel Orientation="Horizontal">
            <Button Content="LEFT" Width="50" />
            <Grid Height="400" Width="400" />
            <Button Content="RIGHT" Width="50"/>
        </StackPanel>
        <Button Content="BOTTOM" Height="50"/>
    </StackPanel>
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187121/09ce1430-d5bc-b39b-9dcd-c1837b1e3836.png)

##実行結果
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187121/e9fb5189-e1ee-2d27-cf36-ddc41df8d893.png)

##問題点
空白を開けるようなデザインには向いていない。
#WrapPanel
##説明
##サンプルソース
##実行結果
##問題点
#StackPanelとWrapPanelの違い
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187121/345a7c37-758a-09bb-2d33-e6d684fce2a0.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187121/039e261e-758d-1f73-66c0-0d3889463102.png)