StackPanelコントロールは、子要素を縦方向または横方向に一列に並べるコントロールです。
StackPanelを入れ子にすることで、レイアウトを細かく指定できます。
なお、子要素が外にはみ出したときには自動制御的な表示はされません。
<Window x:Class="WpfDevelop.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="MainWindow" Height="240" Width="360">
<StackPanel Name="stackPanel1" Orientation="Vertical">
<Button Name="button1" MinHeight="30">Button1</Button>
<Button Name="button2" MinHeight="30" FontSize="16">Button2</Button>
<Button Name="button3" MinHeight="30" FontSize="24">Button3</Button>
<StackPanel Name="stackPanel2" Orientation="Horizontal">
<Button Name="button4" MinHeight="90">Button1</Button>
<Button Name="button5" MinHeight="90" FontSize="16">Button2</Button>
<Button Name="button6" MinHeight="90" FontSize="24">Button3</Button>
</StackPanel>
</StackPanel>
</Window>
WrapPanelコントロールは、子要素が外にはみ出したときに折り返して表示するコントロールです。
TextBox コントロールで長いテキストを折り返すことを "wrap" といいますが、WrapPanelは子要素を wrap 可能にします。
基本的にはStackPanelコントロールと同じ挙動です。
<Window x:Class="WpfDevelop.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="500">
<WrapPanel>
<Button Content="Button" Width="80" Margin="5"/>
<Button Content="Button" Width="80" Margin="5"/>
<Button Content="Button" Width="80" Margin="5"/>
<Button Content="Button" Width="80" Margin="5"/>
<Button Content="Button" Width="80" Margin="5"/>
<Button Content="Button" Width="80" Margin="5"/>
<Button Content="Button" Width="80" Margin="5"/>
<Button Content="Button" Width="80" Margin="5"/>
</WrapPanel>
</Window>
DockPanelコントロールは、コントロールを上下左右と残りの部分にわけて配置するコントロールです。
<Window x:Class="WpfDevelop.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<DockPanel>
<!-- メニューバー -->
<Menu Name="menu1" DockPanel.Dock="Top">
<MenuItem Header="メニュー１(_F)" Width="Auto"></MenuItem>
<MenuItem Header="メニュー２(_E)" Width="Auto"></MenuItem>
</Menu>
<!-- ツールバー -->
<ToolBarTray DockPanel.Dock="Top">
<ToolBar Name="toolbar1" Height="30">
<Button Command="Open" Width="22" Height="22" ToolTip="ファイルを開く">
<Button.Content>
<Image Source="OpenFile.png" Width="16" Height="16" Stretch="Uniform"/>
</Button.Content>
</Button>
</ToolBar>
</ToolBarTray>
<!-- ステータスバー -->
<StatusBar DockPanel.Dock="Bottom" Height="30">
<StatusBarItem>
<TextBlock>ステータスバー１</TextBlock>
</StatusBarItem>
<StatusBarItem>
<TextBlock>ステータスバー２</TextBlock>
</StatusBarItem>
</StatusBar>
<!-- 残りの領域が描写の中央部分に位置します。 -->
<!-- 左ペイン -->
<Button DockPanel.Dock="Left" Content="Tree" MinWidth="150" />
<!-- メインペイン -->
<Button Content="Content" />
</DockPanel>
</Window>
Gridコントロールは、表形式（列位置と行位置の指定）レイアウトを作成するコントロールです。
行と列を定義して、子要素を任意の行と列に配置できます。
GridSplitter という Grid コントロール用スプリッタコントロールも用意されています。
<Window x:Class="WpfDevelop.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="MainWindow" Height="240" Width="360">
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<!-- 子要素の配置 -->
<StackPanel Grid.Row="1" Grid.Column="1">
<Button Content="Button"/>
</StackPanel>
<GridSplitter Grid.Column ="0" Grid.RowSpan="3" Width="2" HorizontalAlignment="Right" VerticalAlignment="Stretch" Background="Red"/>
<GridSplitter Grid.Column ="1" Grid.RowSpan="3" Width="2" HorizontalAlignment="Right" VerticalAlignment="Stretch" Background="Red"/>
</Grid>
</Window>
ScrollViewer コントロールは、子要素がScrollViewerより大きな場合にスクロールバーを出して要素を閲覧できるようにするコントロールです。
要素がレイアウトをはみ出ないようにスクロールバーを表示するためのコントロールです。
<Window x:Class="WpfDevelop.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="MainWindow" Height="240" Width="500">
<DockPanel>
<ScrollViewer x:Name="scrollViewer">
<StackPanel>
<Button Content="Button1" />
<Button Content="Button2" />
<Button Content="Button3" />
<Button Content="Button4" />
<Button Content="Button5" />
<Button Content="Button6" />
<Button Content="Button7" />
<Button Content="Button8" />
<Button Content="Button9" />
<Button Content="Button10" />
<Button Content="Button11" />
<Button Content="Button12" />
<Button Content="Button13" />
<Button Content="Button14" />
<Button Content="Button15" />
</StackPanel>
</ScrollViewer>
</DockPanel>
</Window>
Canvasは、コントロール内の子要素を絶対的な座標値で位置を決定するパネルコントロールです。
これは図形コントロールをレイアウトするためのものであり、子要素の UI コントロールを設定する利用法は推奨されていません。
Canvasコントロールは、子要素をCanvasの中に絶対座標指定で配置できるコントロールです。
<Window x:Class="WpfDevelop.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="MainWindow" Height="240" Width="360">
<Canvas>
<Button Canvas.Top="10" Canvas.Left="10" Content="左上ボタン" />
<Button Canvas.Top="20" Canvas.Right="20" Content="右上ボタン" />
<Button Canvas.Bottom="30" Canvas.Left="30" Content="左下ボタン" />
<Button Canvas.Bottom="40" Canvas.Right="40" Content="右下ボタン" />
</Canvas>
</Window>
CanvasコントロールのZIndex プロパティはいわゆる Z オーダーを指定するものです。
値の小さいもの（負数可能）要素ほど上に表示されます。
なお、ZIndex プロパティの設定がない場合は、要素を配置した順番で上に表示されます。
<Window x:Class="WpfDevelop.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="MainWindow" Height="240" Width="360">
<Canvas>
<Rectangle Fill="Blue" Width="100" Height="100" Canvas.Left="50" Canvas.Top="40" Canvas.ZIndex="1"/>
<Ellipse Fill="Green" Width="100" Height="100" Canvas.Left="100" Canvas.Top="60"/>
<Polygon Fill="Red" Points="50,50 150,150 50,150" Canvas.Left="100" Canvas.Top="40"/>
</Canvas>
</Window>