[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の中身は、表示したい内容に応じて適当にカスタマイズしてください。