MVVM データ バインディングを使用して TabControl を ViewModel のコレクションにバインドするにはどうすればよいですか?

MVVM データ バインディング: ViewModel コレクションを使用して TabControl

をバインドします

MVVM (Model-View-ViewModel) アーキテクチャでは、ViewModel が UI 要素を直接作成すべきではありません。代わりに、データ モデルを公開し、ビューのバインディングを提供する必要があります。 TabControl を ViewModel コレクションにバインドするには、別のアプローチが必要です。

タブ ページのモックアップを作成する

タイトルとコンテンツのプロパティを含む、各タブ ページを表すモデル クラスを実装します。例:

public sealed class TabItem
{
    public string Header { get; set; }
    public string Content { get; set; }
}

ObservableCollection を含む ViewModel

TabItem オブジェクトの ObservableCollection の ViewModel プロパティを作成します。コンストラクターで、このコレクションに最初のタブを設定します:

public sealed class ViewModel
{
    public ObservableCollection<TabItem> Tabs { get; set; }
    public ViewModel()
    {
        Tabs = new ObservableCollection<TabItem>();
        Tabs.Add(new TabItem { Header = "One", Content = "One's content" });
        Tabs.Add(new TabItem { Header = "Two", Content = "Two's content" });
    }
}

XAML でのバインディング

XAML ウィンドウで、TabControl の ItemsSource を ViewModel の Tabs プロパティに設定します。

<Window ... x:Class="WpfApplication12.MainWindow">
    <Window.DataContext>
        <viewmodel:ViewModel xmlns:viewmodel="clr-namespace:WpfApplication12"/>
    </Window.DataContext>
    <TabControl ... ItemsSource="{Binding Tabs}"/>
</Window>

タブコンテンツのデータテンプレート

各タブに異なるコンテンツを表示するには、TabControl の ContentTemplate プロパティのデータ テンプレートを使用します。

<TabControl ...>
    <TabControl.ItemTemplate>
        <DataTemplate>
            ...
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate>
            <myusercontrol:MyUserControl xmlns:myusercontrol="clr-namespace:WpfApplication12"/>
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

このアプローチを使用すると、MVVM の原則を維持しながら、TabControl を動的に作成し、それを ViewModel コレクションにバインドできます。

以上がMVVM データ バインディングを使用して TabControl を ViewModel のコレクションにバインドするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。