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

今回から数回に分けてPanel系のコントロールを説明します。今回はCanvasです。

Canvasコントロール

CanvasはX,Y座標を利用してコントロールの位置を指定して配置するパネルです。以下Canvasで利用可能な指定項目です。

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

ViewMakerではCanvasに配置されたコントロールを選択すると右下に四角（Thumb）が表示され自由に移動することできます。

また、他のパネルでも利用できる機能ですが、HasHeaderをtureにするとHeaderedContentControlを利用してパネルにタイトルをつけます。グループボックスの代わりにも利用できます。

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

<Canvas Name="Canvas" DataContext="{Binding Path=Canvas,Mode=OneWay}" MinHeight="150" Margin="5" VerticalAlignment="Stretch" 
	HorizontalAlignment="Stretch">
    <Grid Canvas.Left="0" Canvas.Top="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Label Width="50" Background="Azure">Item1</Label>
        <TextBox Name="Item1" Text="{Binding Path=Item1, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
	Width="200" VerticalAlignment="Center" Grid.Column="1" />
    </Grid>
    <Grid HorizontalAlignment="Left" Canvas.Left="30" Canvas.Top="30">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Label Width="50" Background="Azure" HorizontalAlignment="Left">Item2</Label>
        <TextBox Name="Item2" Text="{Binding Path=Item2, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
	Width="200" Height="50" VerticalAlignment="Center" Grid.Row="1" />
    </Grid>
    <Grid HorizontalAlignment="Left" Canvas.Left="240" Canvas.Top="75">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Label Width="50" HorizontalContentAlignment="Right" Background="Azure">Item3</Label>
        <CheckBox Name="Item3" IsChecked="{Binding Path=Item3, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
	Width="20" VerticalAlignment="Center" Grid.Column="1" />
    </Grid>
    <Grid HorizontalAlignment="Left" Canvas.Left="250" Canvas.Top="20">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Label Width="50" Background="Azure">Item4</Label>
        <DatePicker Name="Item4" SelectedDate="{Binding Path=Item4, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
	Width="100" VerticalAlignment="Center" Grid.Column="1" />
    </Grid>
    <DataGrid Name="Item5" AutoGenerateColumns="false" ItemsSource="{Binding Path=Item5,Mode=OneWay}" Width="400" Height="100" 
	VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Canvas.Left="40" Canvas.Top="120">
        <DataGrid.Columns>
            <DataGridTextColumn Binding="{Binding Path=Id, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		x:Name="Id2" Header="Id" />
            <DataGridTextColumn Binding="{Binding Path=Name, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		x:Name="Name2" Header="Name" />
            <DataGridTextColumn Binding="{Binding Path=Date, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		x:Name="Date2" Header="Date" />
            <DataGridCheckBoxColumn Binding="{Binding Path=OnOff, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		x:Name="OnOff2" Header="OnOff" />
        </DataGrid.Columns>
    </DataGrid>
</Canvas>

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

<Canvas Name="Canvas" DataContext="{Binding Path=Canvas,Mode=OneWay}" MinHeight="250" Margin="5" VerticalAlignment="Stretch" 
	HorizontalAlignment="Stretch">
    <Grid Canvas.Left="0" Canvas.Top="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <sdk:Label Target="{Binding ElementName=Item1}" Width="50" Background="Azure">Item1</sdk:Label>
        <TextBox Name="Item1" Text="{Binding Path=Item1, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" Width="200" 
	VerticalAlignment="Center" Grid.Column="1" />
    </Grid>
    <Grid HorizontalAlignment="Left" Canvas.Left="30" Canvas.Top="30">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <sdk:Label Target="{Binding ElementName=Item2}" Width="50" Background="Azure" HorizontalAlignment="Left">Item2</sdk:Label>
        <TextBox Name="Item2" Text="{Binding Path=Item2, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" Width="200" 
	Height="50" VerticalAlignment="Center" Grid.Row="1" />
    </Grid>
    <Grid HorizontalAlignment="Left" Canvas.Left="240" Canvas.Top="75">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <sdk:Label Target="{Binding ElementName=Item3}" Width="50" HorizontalContentAlignment="Right" Background="Azure">Item3</sdk:Label>
        <CheckBox Name="Item3" IsChecked="{Binding Path=Item3, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
	Width="20" VerticalAlignment="Center" Grid.Column="1" />
    </Grid>
    <Grid HorizontalAlignment="Left" Canvas.Left="250" Canvas.Top="20">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <sdk:Label Target="{Binding ElementName=Item4}" Width="50" Background="Azure">Item4</sdk:Label>
        <sdk:DatePicker Name="Item4" SelectedDate="{Binding Path=Item4, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
	Width="100" VerticalAlignment="Center" Grid.Column="1" />
    </Grid>
    <sdk:DataGrid Name="Item5" AutoGenerateColumns="false" ItemsSource="{Binding Path=Item5,Mode=OneWay}" Width="400" Height="100" 
	VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Canvas.Left="40" Canvas.Top="120">
        <sdk:DataGrid.Columns>
            <sdk:DataGridTextColumn Binding="{Binding Path=Id, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		x:Name="Id2" Header="Id" />
            <sdk:DataGridTextColumn Binding="{Binding Path=Name, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		x:Name="Name2" Header="Name" />
            <sdk:DataGridTextColumn Binding="{Binding Path=Date, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		x:Name="Date2" Header="Date" />
            <sdk:DataGridCheckBoxColumn Binding="{Binding Path=OnOff, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		x:Name="OnOff2" Header="OnOff" />
        </sdk:DataGrid.Columns>
    </sdk:DataGrid>
</Canvas>

ViewModelコード

[View(ViewControlType.Canvas)]
[ViewProperty(CanvasViewControl.Properties.HeaderBackground, "Azure")]
[ViewProperty(CanvasViewControl.Properties.HeaderWidth, 50)]
[ViewProperty(CanvasViewControl.Properties.HorizontalAlignment, LayoutHorizontalAlignment.Stretch)]
[ViewProperty(CanvasViewControl.Properties.VerticalAlignment, LayoutVerticalAlignment.Stretch)]
[ViewProperty("MinHeight", 250)]
public class CanvasSample : ViewModel
{
    public string Item1 { get; set; }

    [ViewProperty(TextBoxViewControl.Properties.HeaderPosition, LayoutHeaderPosition.Top)]
    [ViewProperty(TextBoxViewControl.Properties.CanvasLeft, 30)]
    [ViewProperty(TextBoxViewControl.Properties.CanvasTop, 30)]
    [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)]
    [ViewProperty(TextBoxViewControl.Properties.CanvasLeft,240)]
    [ViewProperty(TextBoxViewControl.Properties.CanvasTop, 75)]
    public bool Item3 { get; set; }

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

    [ViewProperty(TextBoxViewControl.Properties.CanvasLeft, 40)]
    [ViewProperty(TextBoxViewControl.Properties.CanvasTop, 120)]
    [ViewProperty(TextBoxViewControl.Properties.Width, 400)]
    [ViewProperty(TextBoxViewControl.Properties.Height, 100)]
    public List<DataItem> Item5 { get; set; }

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