ViewMakerで生成するWPF/Silverlightコントロール（１３）StackPanel編

今回は2つ目のパネルStackPanelです。

StackPanelコントロール

StackPanelは上または左から順番にコントロールを並べて配置します。シンプルですが綺麗に整列してくれます。StackPanelで利用できる項目は以下の通りで前回のCanvasとほぼ同じです。配置方向のためのOrientationが追加されているぐらいです。

1. Orientation（アイテム（子コントロール）の配置方向）
2. HeaderPosition（パネルに配置されたコントロールの既定のヘッダー位置）
3. HeaderWidth（パネルに配置されたコントロールの既定のヘッダー幅）
4. HeaderHeight（パネルに配置されたコントロールの既定のヘッダー高さ）
5. HeaderHorizontalContentAlignment（パネルに配置されたコントロールの既定のヘッダーコンテンツの水平配置位置）
6. HeaderFontSize（パネルに配置されたコントロールの既定のヘッダーフォントサイズ）
7. HeaderForeground（パネルに配置されたコントロールの既定のヘッダー前景色）
8. HeaderBackground（パネルに配置されたコントロールの既定のヘッダー背景色）
9. HasHeader（パネルのヘッダーを表示するか）
10. ItemWidth（パネルに配置されたコントロールの既定の幅）
11. ItemHeight（パネルに配置されたコントロールの既定の高さ）
12. ItemMargin（パネルに配置されたコントロールの既定のマージン）
13. Margin（パネル自身のマージン）
14. LoadCommand（ロード時に実行するコマンド）
15. UnloadCommand（アンロード時に実行するコマンド）

WPFサンプルイメージとXAMLコード

今回はヘッダー付きで生成しています。

<HeaderedContentControl Header="StackPanel" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
    <StackPanel Name="StackPanel" Orientation="Vertical" DataContext="{Binding Path=StackPanel,Mode=OneWay}" MinHeight="150" Margin="5">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Label Width="50" Background="Azure">Item1</Label>
            <TextBox Name="Item11" Text="{Binding Path=Item1, Mode=TwoWay, ValidatesOnExceptions=True, 
		ValidatesOnDataErrors=True}" VerticalAlignment="Center" Grid.Column="1" />
        </Grid>
        <Grid HorizontalAlignment="Left">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Label Width="50" Background="Azure" HorizontalAlignment="Left">Item2</Label>
            <TextBox Name="Item21" Text="{Binding Path=Item2, Mode=TwoWay, ValidatesOnExceptions=True, 
		ValidatesOnDataErrors=True}" Width="200" Height="50" VerticalAlignment="Center" Grid.Row="1" />
        </Grid>
        <Grid HorizontalAlignment="Left">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Label Width="50" HorizontalContentAlignment="Right" Background="Azure">Item3</Label>
            <CheckBox Name="Item31" IsChecked="{Binding Path=Item3, Mode=TwoWay, ValidatesOnExceptions=True, 
		ValidatesOnDataErrors=True}" Width="20" VerticalAlignment="Center" Grid.Column="1" />
        </Grid>
        <Grid HorizontalAlignment="Left">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Label Width="50" Background="Azure">Item4</Label>
            <DatePicker Name="Item41" SelectedDate="{Binding Path=Item4, Mode=TwoWay, ValidatesOnExceptions=True, 
		ValidatesOnDataErrors=True}" Width="100" VerticalAlignment="Center" Grid.Column="1" />
        </Grid>
        <DataGrid Name="Item51" AutoGenerateColumns="false" ItemsSource="{Binding Path=Item5,Mode=OneWay}" Height="100" 
		VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding Path=Id, Mode=TwoWay, ValidatesOnExceptions=True, 
		ValidatesOnDataErrors=True}" x:Name="Id3" Header="Id" />
                <DataGridTextColumn Binding="{Binding Path=Name, Mode=TwoWay, ValidatesOnExceptions=True, 
		ValidatesOnDataErrors=True}" x:Name="Name3" Header="Name" />
                <DataGridTextColumn Binding="{Binding Path=Date, Mode=TwoWay, ValidatesOnExceptions=True, 
		ValidatesOnDataErrors=True}" x:Name="Date3" Header="Date" />
                <DataGridCheckBoxColumn Binding="{Binding Path=OnOff, Mode=TwoWay, ValidatesOnExceptions=True, 
		ValidatesOnDataErrors=True}" x:Name="OnOff3" Header="OnOff" />
            </DataGrid.Columns>
        </DataGrid>
    </StackPanel>
</HeaderedContentControl>

SilverlightサンプルイメージとXAMLコード

<toolkit:HeaderedContentControl Header="StackPanel" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
    <StackPanel Name="StackPanel" Orientation="Vertical" DataContext="{Binding Path=StackPanel,Mode=OneWay}" MinHeight="150" Margin="5">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <sdk:Label Target="{Binding ElementName=Item11}" Width="50" Background="Azure">Item1</sdk:Label>
            <TextBox Name="Item11" Text="{Binding Path=Item1, Mode=TwoWay, ValidatesOnExceptions=True, 
		ValidatesOnDataErrors=True}" VerticalAlignment="Center" Grid.Column="1" />
        </Grid>
        <Grid HorizontalAlignment="Left">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <sdk:Label Target="{Binding ElementName=Item21}" Width="50" Background="Azure" 
		HorizontalAlignment="Left">Item2</sdk:Label>
            <TextBox Name="Item21" Text="{Binding Path=Item2, Mode=TwoWay, ValidatesOnExceptions=True, 
		ValidatesOnDataErrors=True}" Width="200" Height="50" VerticalAlignment="Center" Grid.Row="1" />
        </Grid>
        <Grid HorizontalAlignment="Left">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <sdk:Label Target="{Binding ElementName=Item31}" Width="50" HorizontalContentAlignment="Right" 
		Background="Azure">Item3</sdk:Label>
            <CheckBox Name="Item31" IsChecked="{Binding Path=Item3, Mode=TwoWay, ValidatesOnExceptions=True, 
		ValidatesOnDataErrors=True}" Width="20" VerticalAlignment="Center" Grid.Column="1" />
        </Grid>
        <Grid HorizontalAlignment="Left">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <sdk:Label Target="{Binding ElementName=Item41}" Width="50" Background="Azure">Item4</sdk:Label>
            <sdk:DatePicker Name="Item41" SelectedDate="{Binding Path=Item4, Mode=TwoWay, ValidatesOnExceptions=True, 
		ValidatesOnDataErrors=True}" Width="100" VerticalAlignment="Center" Grid.Column="1" />
        </Grid>
        <sdk:DataGrid Name="Item51" AutoGenerateColumns="false" ItemsSource="{Binding Path=Item5,Mode=OneWay}" 
		Height="100" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
            <sdk:DataGrid.Columns>
                <sdk:DataGridTextColumn Binding="{Binding Path=Id, Mode=TwoWay, ValidatesOnExceptions=True, 
		ValidatesOnDataErrors=True}" x:Name="Id3" Header="Id" />
                <sdk:DataGridTextColumn Binding="{Binding Path=Name, Mode=TwoWay, ValidatesOnExceptions=True, 
		ValidatesOnDataErrors=True}" x:Name="Name3" Header="Name" />
                <sdk:DataGridTextColumn Binding="{Binding Path=Date, Mode=TwoWay, ValidatesOnExceptions=True, 
		ValidatesOnDataErrors=True}" x:Name="Date3" Header="Date" />
                <sdk:DataGridCheckBoxColumn Binding="{Binding Path=OnOff, Mode=TwoWay, ValidatesOnExceptions=True, 
		ValidatesOnDataErrors=True}" x:Name="OnOff3" Header="OnOff" />
            </sdk:DataGrid.Columns>
        </sdk:DataGrid>
    </StackPanel>
</toolkit:HeaderedContentControl>

ViewModelコード

[View(ViewControlType.StackPanel)]
[ViewProperty(StackPanelViewControl.Properties.HeaderBackground, "Azure")]
[ViewProperty(StackPanelViewControl.Properties.HeaderWidth, 50)]
[ViewProperty(StackPanelViewControl.Properties.HorizontalAlignment, LayoutHorizontalAlignment.Stretch)]
[ViewProperty(StackPanelViewControl.Properties.VerticalAlignment, LayoutVerticalAlignment.Stretch)]
[ViewProperty(StackPanelViewControl.Properties.HasHeader, true)]
[ViewProperty("MinHeight", 150)]
public class StackPanelSample : ViewModel
{
    public string Item1 { get; set; }

    [ViewProperty(TextBoxViewControl.Properties.HeaderPosition, LayoutHeaderPosition.Top)]
    [ViewProperty(TextBoxViewControl.Properties.Width, 200)]
    [ViewProperty(TextBoxViewControl.Properties.Height, 50)]
    public string Item2 { get; set; }

    [ViewProperty(TextBoxViewControl.Properties.HeaderPosition, LayoutHeaderPosition.Left)]
    [ViewProperty(TextBoxViewControl.Properties.HeaderHorizontalContentAlignment, LayoutHorizontalAlignment.Right)]
    [ViewProperty(TextBoxViewControl.Properties.Width, 20)]
    public bool Item3 { get; set; }

    [ViewProperty(TextBoxViewControl.Properties.Width, 100)]
    public DateTime Item4 { get; set; }

    [ViewProperty(TextBoxViewControl.Properties.Height, 100)]
    public List<DataItem> Item5 { get; set; }

    public StackPanelSample()
    {
        Item1 = "some Text";
        Item2 = "some Text";
        Item5 = DataItem.CreateData(30);
    }
}