WPF

[WPF] (MVVM)TabControlのタブを動的に生成

2016/10/08

MVVMパターンでTabControlのタブを動的に増減させる方法。

ViewModelで定義したコレクションをTabControlのItemsSourceプロパティにBindingすることで、タブの動的な増減を実現できます。

まず、TabItemに関するデータを管理するクラスを作成します。

1
2
3
4
5
6
7
8
9
10
11
12
class TabItemData
{
    /// <summary>
    /// ヘッダ
    /// </summary>
    public string Header { get; set; }
 
    /// <summary>
    /// Tab内のコンテンツ
    /// </summary>
    public string Content { get; set; }
}

 
ViewModelでこのデータを管理するコレクションを定義。
適当な場所でコレクションにデータを詰めます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
public class Hoge
{
    /// <summary>
    /// タブアイテムデータコレクション
    /// </summary>
    public ObservableCollection<TabItemData> TabItems { get; set; } = new ObservableCollection<TabItemData>();
 
 
    public Hoge()
    {
        TabItems.Add(new TabItemData() { Header = "Tab1", Content = "Content1" });
        TabItems.Add(new TabItemData() { Header = "Tab2", Content = "Content2" });
    }
}

 
最後に、xaml側でTabItemのTemplateを定義します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<TabControl ItemsSource="{Binding TabItems}">
    <TabControl.ItemTemplate>
        <!-- ヘッダのテンプレート -->
        <DataTemplate>
            <TextBlock Text="{Binding Header}" />
        </DataTemplate>
    </TabControl.ItemTemplate>
 
    <TabControl.ContentTemplate>
        <!-- TabItemのコンテンツ -->
        <DataTemplate>
            <TextBlock Text="{Binding Content}" />
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

 
実行して「Tab1」タブを選択すると「Content1」、「Tab2」タブを選択すると「Content2」が表示されることが確認できます。

TabItemDataクラスやTemplateの中身は、表示したい内容に応じて適当にカスタマイズしてください。
 
 

-WPF
-,

S