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

今回はTabControlです。業務アプリでも情報量の多い画面を作成する場合に利用します。ViewMakerではなるべくサポートするコントロールを絞り込もう当初は考えていたのですが、悩んだ末、含めたコントロールです。

TabControlコントロール

TabControlのタブのヘッダー位置を指定することができます。直下の子アイテムが１つのタブのコンテンツになるので、パネルを配置してその中にレイアウトします。

1. 1. TabStripPlacement（タブ ヘッダーの配置方法）

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

<TabControl Name="TabControl" DataContext="{Binding Path=TabControl,Mode=OneWay}" TabStripPlacement="Left" 
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
  <TabControl.Items>
    <TabItem Header="Item1">
      <Grid Name="Item13" DataContext="{Binding Path=Item1,Mode=OneWay}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
        <Label HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="0" Grid.Column="0">Data1</Label>
        <TextBox Name="Data11" Text="{Binding Path=Data1, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		VerticalAlignment="Center" Grid.Row="0" Grid.Column="1" />
        <Label HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="1" Grid.Column="0">Data2</Label>
        <DatePicker Name="Data21" SelectedDate="{Binding Path=Data2, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		VerticalAlignment="Center" Grid.Row="1" Grid.Column="1" />
        <Label HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="2" Grid.Column="0">Data3</Label>
        <CheckBox Name="Data31" IsChecked="{Binding Path=Data3, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		VerticalAlignment="Center" Grid.Row="2" Grid.Column="1" />
        <Label HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="3" Grid.Column="0">Data4</Label>
        <TextBox Name="Data41" Text="{Binding Path=Data4, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		VerticalAlignment="Center" Grid.Row="3" Grid.Column="1" />
        <Grid.RowDefinitions>
          <RowDefinition Height="auto" />
          <RowDefinition Height="auto" />
          <RowDefinition Height="auto" />
          <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="auto" />
          <ColumnDefinition />
        </Grid.ColumnDefinitions>
      </Grid>
    </TabItem>
    <TabItem Header="Item2">
      <Grid Name="Item23" DataContext="{Binding Path=Item2,Mode=OneWay}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
        <Label HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="0" Grid.Column="0">Data1</Label>
        <TextBox Name="Data12" Text="{Binding Path=Data1, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		Background="Azure" VerticalAlignment="Center" Grid.Row="0" Grid.Column="1" />
        <Label HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="1" Grid.Column="0">Data2</Label>
        <DatePicker Name="Data22" SelectedDate="{Binding Path=Data2, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		Background="Azure" VerticalAlignment="Center" Grid.Row="1" Grid.Column="1">
          <DatePicker.Resources>
            <Style TargetType="{x:Type DatePickerTextBox}">
              <Setter Property="Background" Value="Azure" />
            </Style>
          </DatePicker.Resources>
        </DatePicker>
        <Label HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="2" Grid.Column="0">Data3</Label>
        <CheckBox Name="Data32" IsChecked="{Binding Path=Data3, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		Background="Azure" VerticalAlignment="Center" Grid.Row="2" Grid.Column="1" />
        <Label HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="3" Grid.Column="0">Data4</Label>
        <TextBox Name="Data42" Text="{Binding Path=Data4, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		Background="Azure" VerticalAlignment="Center" Grid.Row="3" Grid.Column="1" />
        <Grid.RowDefinitions>
          <RowDefinition Height="auto" />
          <RowDefinition Height="auto" />
          <RowDefinition Height="auto" />
          <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="auto" />
          <ColumnDefinition />
        </Grid.ColumnDefinitions>
      </Grid>
    </TabItem>
    <TabItem Header="Item3">
      <Grid Name="Item33" DataContext="{Binding Path=Item3,Mode=OneWay}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
        <Label HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="0" Grid.Column="0">Data1</Label>
        <TextBox Name="Data13" Text="{Binding Path=Data1, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		Background="Gray" VerticalAlignment="Center" Grid.Row="0" Grid.Column="1" />
        <Label HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="1" Grid.Column="0">Data2</Label>
        <DatePicker Name="Data23" SelectedDate="{Binding Path=Data2, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		Background="Gray" VerticalAlignment="Center" Grid.Row="1" Grid.Column="1">
          <DatePicker.Resources>
            <Style TargetType="{x:Type DatePickerTextBox}">
              <Setter Property="Background" Value="Gray" />
            </Style>
          </DatePicker.Resources>
        </DatePicker>
        <Label HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="2" Grid.Column="0">Data3</Label>
        <CheckBox Name="Data33" IsChecked="{Binding Path=Data3, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		Background="Gray" VerticalAlignment="Center" Grid.Row="2" Grid.Column="1" />
        <Label HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="3" Grid.Column="0">Data4</Label>
        <TextBox Name="Data43" Text="{Binding Path=Data4, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		Background="Gray" VerticalAlignment="Center" Grid.Row="3" Grid.Column="1" />
        <Grid.RowDefinitions>
          <RowDefinition Height="auto" />
          <RowDefinition Height="auto" />
          <RowDefinition Height="auto" />
          <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="auto" />
          <ColumnDefinition />
        </Grid.ColumnDefinitions>
      </Grid>
    </TabItem>
    <TabItem Header="Item4">
      <Grid Name="Item43" DataContext="{Binding Path=Item4,Mode=OneWay}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
        <Label HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="0" Grid.Column="0">Data1</Label>
        <TextBox Name="Data1" Text="{Binding Path=Data1, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		VerticalAlignment="Center" Grid.Row="0" Grid.Column="1" />
        <Label HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="1" Grid.Column="0">Data2</Label>
        <DatePicker Name="Data2" SelectedDate="{Binding Path=Data2, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		VerticalAlignment="Center" Grid.Row="1" Grid.Column="1" />
        <Label HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="2" Grid.Column="0">Data3</Label>
        <CheckBox Name="Data3" IsChecked="{Binding Path=Data3, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		VerticalAlignment="Center" Grid.Row="2" Grid.Column="1" />
        <Label HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="3" Grid.Column="0">Data4</Label>
        <TextBox Name="Data4" Text="{Binding Path=Data4, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		VerticalAlignment="Center" Grid.Row="3" Grid.Column="1" />
        <Grid.RowDefinitions>
          <RowDefinition Height="auto" />
          <RowDefinition Height="auto" />
          <RowDefinition Height="auto" />
          <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="auto" />
          <ColumnDefinition />
        </Grid.ColumnDefinitions>
      </Grid>
    </TabItem>
  </TabControl.Items>
</TabControl>

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

<TabControl Name="TabControl" DataContext="{Binding Path=TabControl,Mode=OneWay}" TabStripPlacement="Left" 
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
  <TabControl.Items>
    <TabItem Header="Item1">
      <Grid Name="Item13" DataContext="{Binding Path=Item1,Mode=OneWay}" Margin="5" VerticalAlignment="Stretch"HorizontalAlignment="Stretch"
		xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
        <Label Target="{Binding ElementName=Data11}" HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="0" Grid.Column="0" 
		xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">Data1</Label>
        <TextBox Name="Data11" Text="{Binding Path=Data1, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		VerticalAlignment="Center" Grid.Row="0" Grid.Column="1" />
        <Label Target="{Binding ElementName=Data21}" HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="1" Grid.Column="0"
		xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">Data2</Label>
        <DatePicker Name="Data21" SelectedDate="{Binding Path=Data2, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		VerticalAlignment="Center" Grid.Row="1" Grid.Column="1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" />
        <Label Target="{Binding ElementName=Data31}" HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="2" Grid.Column="0"
	 	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">Data3</Label>
        <CheckBox Name="Data31" IsChecked="{Binding Path=Data3, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		VerticalAlignment="Center" Grid.Row="2" Grid.Column="1" />
        <Label Target="{Binding ElementName=Data41}" HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="3" Grid.Column="0"
		xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">Data4</Label>
        <TextBox Name="Data41" Text="{Binding Path=Data4, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		VerticalAlignment="Center" Grid.Row="3" Grid.Column="1" />
        <Grid.RowDefinitions>
          <RowDefinition Height="auto" />
          <RowDefinition Height="auto" />
          <RowDefinition Height="auto" />
          <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="auto" />
          <ColumnDefinition />
        </Grid.ColumnDefinitions>
      </Grid>
    </TabItem>
    <TabItem Header="Item2">
      <Grid Name="Item23" DataContext="{Binding Path=Item2,Mode=OneWay}" Margin="5" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" 
		xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
        <Label Target="{Binding ElementName=Data12}" HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="0" Grid.Column="0" 
		xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">Data1</Label>
        <TextBox Name="Data12" Text="{Binding Path=Data1, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" Background="Azure" 
		VerticalAlignment="Center" Grid.Row="0" Grid.Column="1" />
        <Label Target="{Binding ElementName=Data22}" HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="1" Grid.Column="0" 
		xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">Data2</Label>
        <DatePicker Name="Data22" SelectedDate="{Binding Path=Data2, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		Background="Azure" VerticalAlignment="Center" Grid.Row="1" Grid.Column="1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" />
        <Label Target="{Binding ElementName=Data32}" HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="2" Grid.Column="0" 
		xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">Data3</Label>
        <CheckBox Name="Data32" IsChecked="{Binding Path=Data3, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		Background="Azure" VerticalAlignment="Center" Grid.Row="2" Grid.Column="1" />
        <Label Target="{Binding ElementName=Data42}" HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="3" Grid.Column="0" 
		xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">Data4</Label>
        <TextBox Name="Data42" Text="{Binding Path=Data4, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" Background="Azure" 
		VerticalAlignment="Center" Grid.Row="3" Grid.Column="1" />
        <Grid.RowDefinitions>
          <RowDefinition Height="auto" />
          <RowDefinition Height="auto" />
          <RowDefinition Height="auto" />
          <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="auto" />
          <ColumnDefinition />
        </Grid.ColumnDefinitions>
      </Grid>
    </TabItem>
    <TabItem Header="Item3">
      <Grid Name="Item33" DataContext="{Binding Path=Item3,Mode=OneWay}" Margin="5" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" 
		xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
        <Label Target="{Binding ElementName=Data13}" HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="0" Grid.Column="0" 
		xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">Data1</Label>
        <TextBox Name="Data13" Text="{Binding Path=Data1, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" Background="Gray" 
		VerticalAlignment="Center" Grid.Row="0" Grid.Column="1" />
        <Label Target="{Binding ElementName=Data23}" HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="1" Grid.Column="0" 
		xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">Data2</Label>
        <DatePicker Name="Data23" SelectedDate="{Binding Path=Data2, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		Background="Gray" VerticalAlignment="Center" Grid.Row="1" Grid.Column="1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" />
        <Label Target="{Binding ElementName=Data33}" HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="2" Grid.Column="0" 
		xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">Data3</Label>
        <CheckBox Name="Data33" IsChecked="{Binding Path=Data3, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		Background="Gray" VerticalAlignment="Center" Grid.Row="2" Grid.Column="1" />
        <Label Target="{Binding ElementName=Data43}" HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="3" Grid.Column="0" 
		xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">Data4</Label>
        <TextBox Name="Data43" Text="{Binding Path=Data4, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" Background="Gray" 
		VerticalAlignment="Center" Grid.Row="3" Grid.Column="1" />
        <Grid.RowDefinitions>
          <RowDefinition Height="auto" />
          <RowDefinition Height="auto" />
          <RowDefinition Height="auto" />
          <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="auto" />
          <ColumnDefinition />
        </Grid.ColumnDefinitions>
      </Grid>
    </TabItem>
    <TabItem Header="Item4">
      <Grid Name="Item43" DataContext="{Binding Path=Item4,Mode=OneWay}" Margin="5" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" 
		xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
        <Label Target="{Binding ElementName=Data1}" HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="0" Grid.Column="0" 
		xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">Data1</Label>
        <TextBox Name="Data1" Text="{Binding Path=Data1, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		VerticalAlignment="Center" Grid.Row="0" Grid.Column="1" />
        <Label Target="{Binding ElementName=Data2}" HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="1" Grid.Column="0" 
		xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">Data2</Label>
        <DatePicker Name="Data2" SelectedDate="{Binding Path=Data2, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		VerticalAlignment="Center" Grid.Row="1" Grid.Column="1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" />
        <Label Target="{Binding ElementName=Data3}" HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="2" Grid.Column="0" 
		xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">Data3</Label>
        <CheckBox Name="Data3" IsChecked="{Binding Path=Data3, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		VerticalAlignment="Center" Grid.Row="2" Grid.Column="1" />
        <Label Target="{Binding ElementName=Data4}" HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="3" Grid.Column="0" 
		xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">Data4</Label>
        <TextBox Name="Data4" Text="{Binding Path=Data4, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
		VerticalAlignment="Center" Grid.Row="3" Grid.Column="1" />
        <Grid.RowDefinitions>
          <RowDefinition Height="auto" />
          <RowDefinition Height="auto" />
          <RowDefinition Height="auto" />
          <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="auto" />
          <ColumnDefinition />
        </Grid.ColumnDefinitions>
      </Grid>
    </TabItem>
  </TabControl.Items>
</TabControl>

ViewModelコード

[View(ViewControlType.TabControl)]
[ViewProperty(TabControlViewControl.Properties.TabStripPlacement, LayoutDock.Left)]
public class TabControlSample : ViewModel
{
    public class TabControlItem : ViewModel
    {
        public string Data1 { get; set; }
        public DateTime Data2 { get; set; }
        public bool Data3 { get; set; }
        public int Data4 { get; set; }
    }

    [Browsable(true)]
    public TabControlItem Item1 { get; set; }
    [Browsable(true)]
    [ViewProperty(ViewControl.Properties.Background, "Azure")]
    public TabControlItem Item2 { get; set; }
    [Browsable(true)]
    [ViewProperty(ViewControl.Properties.Background, "Gray")]
    public TabControlItem Item3 { get; set; }
    [Browsable(true)]
    public TabControlItem Item4 { get; set; }

}