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="メニュー1(_F)" Width="Auto"></MenuItem> <MenuItem Header="メニュー2(_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>ステータスバー1</TextBlock> </StatusBarItem> <StatusBarItem> <TextBlock>ステータスバー2</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>