今回はレイアウトコントロールの1つ、
System.Windows.Controls.StackPanelコントロールについてです。
では早速MSDNでの説明を見てみましょう。
単一行に子要素を整列します。行は水平方向または垂直方向にできます。StackPanel を使用すると、指定した方向に要素をスタックできます。StackPanel で定義されているプロパティを使用すると、コンテンツを垂直方向 (既定の設定) または水平方向にフローさせることができます。
では簡単なStackPanelコントロールを使用した例です。
XAML使用例
<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<StackPanel>
<Button>Button1</Button>
<Button>Button2</Button>
<Button>Button3</Button>
</StackPanel>
</Window>
コード使用例（VB）
Class Application
Private Sub Application_Startup(ByVal sender As Object, ByVal e As System.Windows.StartupEventArgs) Handles Me.Startup
Dim mainWindow As New Window1()
Dim myStackPanel As New StackPanel()
Dim button1 As New Button()
button1.Content = "Button1"
Dim button2 As New Button()
button2.Content = "Button2"
Dim button3 As New Button()
button3.Content = "Button3"
myStackPanel.Children.Add(button1)
myStackPanel.Children.Add(button2)
myStackPanel.Children.Add(button3)
mainWindow.Content = myStackPanel
mainWindow.Show()
End Sub
End Class
コード使用例（C#）
public partial class App : Application
{
private void Application_Startup(object sender, StartupEventArgs e)
{
Window1 mainWindow = new Window1();
StackPanel myStackPanel = new StackPanel();
Button button1 = new Button();
button1.Content = "Button1";
Button button2 = new Button();
button2.Content = "Button2";
Button button3 = new Button();
button3.Content = "Button3";
myStackPanel.Children.Add(button1);
myStackPanel.Children.Add(button2);
myStackPanel.Children.Add(button3);
mainWindow.Content = myStackPanel;
mainWindow.Show();
}
}
上記例は単純にButtonを3つ垂直方向にスタックした場合です。
StackPanelコントロールは
Orientationプロパティを使用し垂直方向又は、水平方向の要素のスタックを行う事が出来ます。
では水平方向にスタックした例を見てみましょう。
<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<StackPanel Orientation="Horizontal">
<Button>Button1</Button>
<Button>Button2</Button>
<Button>Button3</Button>
</StackPanel>
</Window>
Orientationプロパティは既定では「Vertical（垂直）」となっています。
また、StackPanelにスタックされる要素でWidth(幅)プロパティが設定されていない場合は、StackPanelの領域全体に引き伸ばされます。
逆にスタックされる要素でWidthプロパティが設定されている場合、その要素はStackPanelの中央に配置されます。
次はWidthプロパティを指定して中央に配置される例です。
<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<StackPanel Orientation="Vertical">
<Button Width="200">Button1</Button>
<Button Width="200">Button2</Button>
<Button Width="200">Button3</Button>
</StackPanel>
</Window>
ここで1点、レイアウトを設計する上で気をつける必要があるStackPanelの動作があります。StackPanelは指定方向に要素をスタックする事しか独自ロジックを実装していない為に、子要素の領域が全体の領域を超えてしまう場合は領域を超えた子要素のレンダリングはされません。
画面レイアウトにおいて垂直方向又は、水平方向へ要素をスタックするような部分ではStackPanelを使用しましょう。
今回はレイアウト用コントロールのStackPanelについてでした。
to be continue・・・