ViewMakerで生成するWPF/Silverlightコントロール（１１）共通項目編

ViewMaker

かなりのコントロールを説明してきましたが、今回は各コントロールで共通的に指定可能な項目を挙げておきます。WPFやSilverlightの基本的な項目と同じまたは想像可能な範囲のものが並んでいると思いますので説明は割愛します。あと業務アプリでは入力項目に項目名（ヘッダー）をつけるので、ViewMakerでは簡単に基本的なコントロールにはヘッダーをつけることができます。このヘッダーコントロールについても利用可能な項目を挙げておきます。

コントロール（共通）

すべてのコントロールで指定可能な項目は以下の通りです。

    1. Width（コントロール幅）
    2. Height（コントロール高さ）
    3. VerticalAlignment（パネル配置時の垂直配置位置）
    4. HorizontalAlignment（パネル配置時の水平配置位置）
    5. CanvasLeft（キャンバスへの配置左位置）
    6. CanvasTop（キャンバスへの配置上位置）
    7. GridHeight（グリッド配置時の行高さ）
    8. GridWidth（グリッド配置時の列幅）
    9. RowSpan（グリッドの行Span（0を指定すると最終行まで結合される））
    10. ColumnSpan（グリッドの列Span（0を指定すると最終列まで結合される））
    11. IsEnabled（有効／無効の設定（バインドするパス））
    12. IsVisibile（表示／非表示の設定（バインドするパス））
    13. FontSize（フォントサイズ）
    14. Foreground（前景色）
    15. Background（背景色）

Headerコントロール（共通）

TextBoxやLabelなどヘッダーを付与できるコントロールが共通にもつ指定可能な項目は以下の通りです。

    1. HeaderPosition（ヘッダー位置）
    2. HeaderWidth（ヘッダー幅）
    3. HeaderHeight（ヘッダー高さ）
    4. HeaderHorizontalContentAlignment（ヘッダーの水平配置位置）
    5. HeaderVerticalAlignment（ヘッダーの垂直配置位置）
    6. HeaderFontSize（ヘッダーのフォントサイズ）
    7. HeaderForeground（ヘッダーの前景色）
    8. HeaderBackground（ヘッダーの背景色）

TextBoxを様々なヘッダー位置で表示した例を載せておきます。

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

<Label Width="150" HorizontalContentAlignment="Right" Background="Azure" Margin="10" 
	Grid.Row="0" Grid.Column="0">Flat mode</Label>
<TextBox Name="Header1" Text="{Binding Path=Header1, Mode=TwoWay, ValidatesOnExceptions=True, 
	ValidatesOnDataErrors=True}" Height="50" Margin="10" Grid.Row="0" Grid.Column="1" />

<Grid Margin="10" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Label Width="100" Height="50" HorizontalContentAlignment="Left" FontSize="14" 
	Background="Azure">Left mode</Label>
    <TextBox Name="Header2" Text="{Binding Path=Header2, Mode=TwoWay, ValidatesOnExceptions=True, 
	ValidatesOnDataErrors=True}" Height="50" VerticalAlignment="Center" Grid.Column="1" />
</Grid>

<Grid Margin="10" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2">
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Label HorizontalContentAlignment="Left" Foreground="Blue" Background="Azure" 
	HorizontalAlignment="Left">Top mode</Label>
    <TextBox Name="Header3" Text="{Binding Path=Header3, Mode=TwoWay, ValidatesOnExceptions=True, 
	ValidatesOnDataErrors=True}" Height="50" VerticalAlignment="Center" Grid.Row="1" />
</Grid>

<TextBox Name="Header4" Text="{Binding Path=Header4, Mode=TwoWay, ValidatesOnExceptions=True, 
	ValidatesOnDataErrors=True}" Height="50" Margin="10" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" />

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


Silverlightのラベルは項目のタイトル用に利用する目的で提供されています。Targetに入力項目のコントロールを指定して利用すると、コントロールがバインドしているプロパティの検証属性に合わせて表示が変化します。

<sdk:Label Target="{Binding ElementName=Header1}" Width="150" HorizontalContentAlignment="Right" 
		Background="Azure" Margin="10" Grid.Row="0" Grid.Column="0">Flat mode</sdk:Label>
<TextBox Name="Header1" Text="{Binding Path=Header1, Mode=TwoWay, ValidatesOnExceptions=True, 
		ValidatesOnDataErrors=True}" Height="50" Margin="10" Grid.Row="0" Grid.Column="1" />

<Grid Margin="10" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="auto" />
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>
  <sdk:Label Target="{Binding ElementName=Header2}" Width="100" Height="50" 
		HorizontalContentAlignment="Left" FontSize="14" Background="Azure">Left mode</sdk:Label>
  <TextBox Name="Header2" Text="{Binding Path=Header2, Mode=TwoWay, ValidatesOnExceptions=True, 
		ValidatesOnDataErrors=True}" Height="50" VerticalAlignment="Center" Grid.Column="1" />
</Grid>

<Grid Margin="10" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2">
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <sdk:Label Target="{Binding ElementName=Header3}" HorizontalContentAlignment="Left" Foreground="Blue" 
	Background="Azure" HorizontalAlignment="Left">Top mode</sdk:Label>
    <TextBox Name="Header3" Text="{Binding Path=Header3, Mode=TwoWay, ValidatesOnExceptions=True, 
	ValidatesOnDataErrors=True}" Height="50" VerticalAlignment="Center" Grid.Row="1" />
</Grid>

<TextBox Name="Header4" Text="{Binding Path=Header4, Mode=TwoWay, ValidatesOnExceptions=True, 
		ValidatesOnDataErrors=True}" Height="50" Margin="10" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" />

ViewModelコード

[View(ViewControlType.Grid)]
[ViewProperty(GridViewControl.Properties.HeaderBackground, "Azure")]
[ViewProperty(GridViewControl.Properties.ItemMargin, "10")]
[ViewProperty("ShowGridLines", true)]
public class HeaderSample : ViewModel
{
    [Display(Name = "Flat mode")]
    [ViewProperty(HeaderViewControl.Properties.HeaderPosition, LayoutHeaderPosition.Flat)]
    [ViewProperty(HeaderViewControl.Properties.HeaderHorizontalContentAlignment, LayoutHorizontalAlignment.Right)]
    [ViewProperty(GridViewControl.Properties.HeaderWidth, 150)]
    [ViewProperty(HeaderViewControl.Properties.Height, 50)]
    public string Header1 { get; set; }

    [Display(Name = "Left mode")]
    [ViewProperty(HeaderViewControl.Properties.HeaderPosition, LayoutHeaderPosition.Left)]
    [ViewProperty(HeaderViewControl.Properties.ColumnSpan, 0)]
    [ViewProperty(HeaderViewControl.Properties.Height, 50)]
    [ViewProperty(HeaderViewControl.Properties.HeaderWidth, 100)]
    [ViewProperty(HeaderViewControl.Properties.HeaderHeight, 50)]
    [ViewProperty(GridViewControl.Properties.HeaderFontSize, 14.0)]
    public string Header2 { get; set; }

    [Display(Name = "Top mode")]
    [ViewProperty(HeaderViewControl.Properties.HeaderPosition, LayoutHeaderPosition.Top)]
    [ViewProperty(HeaderViewControl.Properties.ColumnSpan, 0)]
    [ViewProperty(HeaderViewControl.Properties.HeaderVerticalAlignment, LayoutVerticalAlignment.Bottom)]
    [ViewProperty(HeaderViewControl.Properties.HeaderForeground, "Blue")]
    [ViewProperty(HeaderViewControl.Properties.Height, 50)]
    public string Header3 { get; set; }

    [ViewProperty(HeaderViewControl.Properties.HeaderPosition, LayoutHeaderPosition.Hidden)]
    [ViewProperty(HeaderViewControl.Properties.ColumnSpan, 0)]
    [ViewProperty(HeaderViewControl.Properties.Height, 50)]
    public string Header4 { get; set; }

    public HeaderSample()
    {
        Header1 = "some text";
        Header2 = "some text";
        Header3 = "some text";
        Header4 = "Hidden mode";
    }
}