作成日: 2017/03/05, 更新日: 2017/03/05
StackPanel
- StackPanel は、StackPanel 内に配置したコントロールに対して、縦一列か横一列に並べて管理するレイアウトコントロールです。 とりあえずどういう風に動くのか見てみましょう。 以下サンプルです。「StackPanelWindow1」という画面で作成していますが、「MainWindow」に書いても構いません。

スポンサーリンク
<Window x:Class="StackPanelWindow1" 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" xmlns:local="clr-namespace:w02_LayoutControls" mc:Ignorable="d" Title="StackPanelWindow1" Height="300" Width="300"> <StackPanel> <Button Content="button1" /> <Button Content="button2" /> <Button Content="button3" /> <Button Content="button4" /> <Button Content="button5" /> </StackPanel> </Window>
<Window x:Class="StackPanelWindow2" 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" xmlns:local="clr-namespace:w02_LayoutControls" mc:Ignorable="d" Title="StackPanelWindow2" Height="300" Width="300"> <StackPanel> <Button Content="button1" /> <Button Content="button2" HorizontalAlignment="Stretch" /> <Button Content="button3" HorizontalAlignment="Left" /> <Button Content="button4" HorizontalAlignment="Right" /> <Button Content="button5" HorizontalAlignment="Center" /> <Button Content="button6" Width="120" /> <Button Content="button7" Width="120" HorizontalAlignment="Stretch" /> <Button Content="button8" Width="120" HorizontalAlignment="Left" /> <Button Content="button9" Width="120" HorizontalAlignment="Right" /> <Button Content="button10" Width="120" HorizontalAlignment="Center" /> </StackPanel> </Window>
<Window x:Class="StackPanelWindow3" 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" xmlns:local="clr-namespace:w02_LayoutControls" mc:Ignorable="d" Title="StackPanelWindow3" Height="300" Width="300"> <!-- <StackPanel Orientation="Vertical"> は <StackPanel> と同様です --> <StackPanel Orientation="Horizontal"> <Button Content="button1" /> <Button Content="button2" /> <Button Content="button3" /> <Button Content="button4" /> <Button Content="button5" /> </StackPanel> </Window>
<Window x:Class="StackPanelWindow4" 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" xmlns:local="clr-namespace:w02_LayoutControls" mc:Ignorable="d" Title="StackPanelWindow4" Height="300" Width="800"> <StackPanel Orientation="Horizontal"> <Button Content="button1" /> <Button Content="button2" VerticalAlignment="Stretch" /> <Button Content="button3" VerticalAlignment="Top" /> <Button Content="button4" VerticalAlignment="Bottom" /> <Button Content="button5" VerticalAlignment="Center" /> <Button Content="button6" Height="120" /> <Button Content="button7" Height="120" VerticalAlignment="Stretch" /> <Button Content="button8" Height="120" VerticalAlignment="Top" /> <Button Content="button9" Height="120" VerticalAlignment="Bottom" /> <Button Content="button10" Height="120" VerticalAlignment="Center" /> </StackPanel> </Window>
スポンサーリンク
<Window x:Class="StackPanelWindow5" 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" xmlns:local="clr-namespace:w02_LayoutControls" mc:Ignorable="d" Title="StackPanelWindow5" Height="300" Width="300"> <StackPanel> <Button Content="button1a" /> <Button Content="button1b" Margin="10" /> <Button Content="button1c" /> <Button Content="button2a" /> <Button Content="button2b" Margin="50,10" /> <Button Content="button2c" /> <Button Content="button3a" /> <Button Content="button3b" Margin="50,5,100,10" /> <Button Content="button3c" /> <Button Content="button4" Padding="10,10,10,10" /> </StackPanel> </Window>

<Window x:Class="StackPanelWindow6" 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" xmlns:local="clr-namespace:w02_LayoutControls" mc:Ignorable="d" Title="StackPanelWindow6" Height="100" Width="300"> <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" /> </StackPanel> </Window>
<Window x:Class="StackPanelWindow6" 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" xmlns:local="clr-namespace:w02_LayoutControls" mc:Ignorable="d" Title="StackPanelWindow6" Height="100" Width="300"> <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" /> </StackPanel> </ScrollViewer> </Window>
-
前(Canvas)に戻る 目次に戻る 次(DockPanel)に進む
スポンサーリンク