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

2016/08/21 2016/10/08

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

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

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

    class TabItemData
    {
        /// <summary>
        /// ヘッダ
        /// </summary>
        public string Header { get; set; }

        /// <summary>
        /// Tab内のコンテンツ
        /// </summary>
        public string Content { get; set; }
    }

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

    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を定義します。

    <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
-MVVM, TabControl