WPF4.5入門その37 「TabControl」

TabControlは、以下のようなタブで切り替えて複数のコンテンツを表示するUIを提供するためのコントロールです。

f:id:okazuki:20140815232131p:plain

TabControlは、ItemsプロパティにTabItemコントロールを指定してタブを作成します。TabItemコントロールは、Headerプロパティにタブのヘッダーに表示するコンテンツを設定して、Contentプロパティにタブの中に表示するコンテンツを設定します。上記の画面のXAMLを以下に示します。

<TabControl>
    <TabItem Header="TabItem1">
        <TextBlock Text="TabItem1 Content" />
    </TabItem>
    <TabItem Header="TabItem2">
        <TextBlock Text="TabItem2 Content" />
    </TabItem>
    <TabItem Header="TabItem3">
        <TextBlock Text="TabItem3 Content" />
    </TabItem>
</TabControl>

TabControlでコレクションを表示する

TabControlは、ComboBoxコントロールやListBoxコントロールと同じSelectorコントロールを継承しています。そのため、ItemsSourceプロパティにコレクションを設定すると、ItemTemplateプロパティに従ってTabのヘッダーを表示することが出来ます。Tabのコンテンツ部は、ContentTemplateプロパティにDataTemplateを指定して表示方法を定義します。

以下のようなPersonクラスを表示するTabControlを説明します。

public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
}

TabControlのItemTemplateでNameを表示して、ContentTemplateでNameとAgeを表示するXAMLを以下に示します。

<TabControl x:Name="tabControl">
    <TabControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Name}" />
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Label Grid.Row="0" Grid.Column="0" Content="名前" />
                <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Name}" 
VerticalAlignment="Center" />
                <Label Grid.Row="1" Grid.Column="0" Content="年齢" />
                <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Age}" 
VerticalAlignment="Center" />
            </Grid>
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

コードビハインドのコンストラクタで、以下のようにTabControlのItemsSourceプロパティに値を設定します。

public MainWindow()
{
    InitializeComponent();

    var source = Enumerable.Range(1, 10)
        .Select(i => new Person { Name = "おおた" + i, Age = 20 + i });
    this.tabControl.ItemsSource = source;
}

実行すると、以下のようにコレクションがTabで表示されます。

f:id:okazuki:20140815232441p:plain