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

今回はパネル最後のGridです。非常に高機能ですがその分知識が必要なのがネックになる場合があります。ViewMakerをそれを緩和する仕組みをいくつか用意しています。基本的にはWebのTableを使った配置のイメージでできるようにました。

Gridコントロール

ViewMakerでのGridの配置パターンはいくつかありますが、StacｋPanelから順番に上から並べていく以外に、Tableで格子を作り配置する方法も可能で、この方法を使うとバリエーションのある配置を自動的な整列を行いながらできます。2列配置するようなことも可能です。また便利機能としてViewMakerでは、典型的な設定パターンを一発設定するコマンド（Fit Vertical）を用意しています。*1

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

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

上記を編集すると以下のような感じにもできます2列型です。

<Grid Name="Grid" DataContext="{Binding Path=Grid,Mode=OneWay}" MinHeight="150" vg:LoadBehavior.Command="{Binding Path=LoadCommand, 
	Mode=OneWay}" vg:UnloadBehavior.Command="{Binding Path=UnloadCommand, Mode=OneWay}" VerticalAlignment="Stretch" 
	HorizontalAlignment="Stretch" xmlns:vg="clr-namespace:ViewMaker.Core.Wpf;assembly=ViewMaker.Core">
    <Label HorizontalContentAlignment="Left" Background="Azure" Grid.Row="0" Grid.Column="0">Item1</Label>
    <TextBox Name="Item12" Text="{Binding Path=Item1, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
	VerticalAlignment="Center" Grid.Row="0" Grid.Column="1" />
    <Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Label HorizontalContentAlignment="Left" Background="Azure" HorizontalAlignment="Left">Item2</Label>
        <TextBox Name="Item22" Text="{Binding Path=Item2, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" Height="50" 
	VerticalAlignment="Center" Grid.Row="1" />
    </Grid>
    <Grid HorizontalAlignment="Left" Grid.Row="2" Grid.Column="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Label HorizontalContentAlignment="Right" Background="Azure">Item3</Label>
        <CheckBox Name="Item32" IsChecked="{Binding Path=Item3, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
	Width="20" VerticalAlignment="Center" Grid.Column="1" />
    </Grid>
    <Grid HorizontalAlignment="Left" Grid.Row="2" Grid.Column="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Label HorizontalContentAlignment="Left" Background="Azure">Item4</Label>
        <DatePicker Name="Item42" SelectedDate="{Binding Path=Item4, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
	Width="100" VerticalAlignment="Center" Grid.Column="1" />
    </Grid>
    <DataGrid Name="Item52" AutoGenerateColumns="false" ItemsSource="{Binding Path=Item5,Mode=OneWay}" VerticalAlignment="Stretch" 
	HorizontalAlignment="Stretch" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2">
        <DataGrid.Columns>
            <DataGridTextColumn Binding="{Binding Path=Id, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" x:Name="Id4" Header="Id" />
            <DataGridTextColumn Binding="{Binding Path=Name, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" x:Name="Name4" Header="Name" />
            <DataGridTextColumn Binding="{Binding Path=Date, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" x:Name="Date4" Header="Date" />
            <DataGridCheckBoxColumn Binding="{Binding Path=OnOff, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" x:Name="OnOff4" Header="OnOff" />
        </DataGrid.Columns>
    </DataGrid>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition Height="auto" />
        <RowDefinition Height="auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
</Grid>

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

<Grid Name="Grid" DataContext="{Binding Path=Grid,Mode=OneWay}" MinHeight="150" Height="300" Margin="5" VerticalAlignment="Stretch" 
	HorizontalAlignment="Stretch">
    <sdk:Label Target="{Binding ElementName=Item12}" HorizontalContentAlignment="Left" Background="Azure" Grid.Row="0" 
	Grid.Column="0">Item1</sdk:Label>
    <TextBox Name="Item12" Text="{Binding Path=Item1, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
	VerticalAlignment="Center" Grid.Row="0" Grid.Column="1" />
    <Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <sdk:Label Target="{Binding ElementName=Item22}" HorizontalContentAlignment="Left" Background="Azure" HorizontalAlignment="Left">
	Item2</sdk:Label>
        <TextBox Name="Item22" Text="{Binding Path=Item2, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
	Height="50" VerticalAlignment="Center" Grid.Row="1" />
    </Grid>
    <Grid HorizontalAlignment="Left" Grid.Row="2" Grid.Column="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <sdk:Label Target="{Binding ElementName=Item32}" HorizontalContentAlignment="Right" Background="Azure">Item3</sdk:Label>
        <CheckBox Name="Item32" IsChecked="{Binding Path=Item3, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
	Width="20" VerticalAlignment="Center" Grid.Column="1" />
    </Grid>
    <Grid HorizontalAlignment="Left" Grid.Row="2" Grid.Column="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <sdk:Label Target="{Binding ElementName=Item42}" HorizontalContentAlignment="Left" Background="Azure">Item4</sdk:Label>
        <sdk:DatePicker Name="Item42" SelectedDate="{Binding Path=Item4, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
	Width="100" VerticalAlignment="Center" Grid.Column="1" />
    </Grid>
    <sdk:DataGrid Name="Item52" AutoGenerateColumns="false" ItemsSource="{Binding Path=Item5,Mode=OneWay}" VerticalAlignment="Stretch" 
	HorizontalAlignment="Stretch" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2">
        <sdk:DataGrid.Columns>
            <sdk:DataGridTextColumn Binding="{Binding Path=Id, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		x:Name="Id4" Header="Id" />
            <sdk:DataGridTextColumn Binding="{Binding Path=Name, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		x:Name="Name4" Header="Name" />
            <sdk:DataGridTextColumn Binding="{Binding Path=Date, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		x:Name="Date4" Header="Date" />
            <sdk:DataGridCheckBoxColumn Binding="{Binding Path=OnOff, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		x:Name="OnOff4" Header="OnOff" />
        </sdk:DataGrid.Columns>
    </sdk:DataGrid>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition Height="auto" />
        <RowDefinition Height="auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <i:Interaction.Behaviors>
        <vg:LoadBehavior vg:Command="{Binding Path=LoadCommand, Mode=OneWay}" xmlns:vg="clr-namespace:ViewMaker.Core.Silverlight;assembly
	=SilverlightViewMaker.Core" />
        <vg:UnloadBehavior vg:Command="{Binding Path=UnloadCommand, Mode=OneWay}" xmlns:vg="clr-namespace:ViewMaker.Core.Silverlight;assembly
	=SilverlightViewMaker.Core" />
    </i:Interaction.Behaviors>
</Grid>

ViewModelコード

[View(ViewControlType.Grid)]
[ViewProperty(GridViewControl.Properties.HeaderBackground, "Azure")]
[ViewProperty(GridViewControl.Properties.ItemColumnSize, 2)]
[ViewProperty(GridViewControl.Properties.HorizontalAlignment, LayoutHorizontalAlignment.Stretch)]
[ViewProperty(GridViewControl.Properties.VerticalAlignment, LayoutVerticalAlignment.Stretch)]
[ViewProperty(GridViewControl.Properties.LoadCommand, "LoadCommand")]
[ViewProperty(GridViewControl.Properties.UnloadCommand, "UnloadCommand")]
[ViewProperty("MinHeight", 150)]
#if SILVERLIGHT
[ViewProperty(GridViewControl.Properties.Height, 300)]
#endif
public class GridSample : ViewModel
{
    public string Item1 { get; set; }

    [ViewProperty(TextBoxViewControl.Properties.HeaderPosition, LayoutHeaderPosition.Top)]
    [ViewProperty(TextBoxViewControl.Properties.Height, 50)]
    [ViewProperty(TextBoxViewControl.Properties.ColumnSpan,0)]
    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)]
    [ViewProperty(TextBoxViewControl.Properties.HeaderPosition, LayoutHeaderPosition.Left)]
    public DateTime Item4 { get; set; }

    [View(ViewControlType.DataGrid)]
    public List<DataItem> Item5 { get; set; }

    [Browsable(false)]
    public ICommand LoadCommand { get { return CreateCommand(Init); } }
    [Browsable(false)]
    public ICommand UnloadCommand { get { return CreateCommand(() => Debug.WriteLine("Unload " + this.GetType().Name)); } }

    public void Init()
    {
        Item1 = "some Text";
        Item2 = "some Text";
        Item5 = DataItem.CreateData(30);
        OnPropertyChanged(null);
    }
}

*1:Fit Verticalは垂直方向の配置を与えられた領域にフィットするようにコントロールの高さを変更する設定になります。具体的にはGrid Rowの高さを「*」、コントロールのHeightをリセット（無指定）、VerticalAlignmentをStretchにします