MVVM で TabControl を ViewModel のコレクションに動的にバインドするにはどうすればよいですか?

MVVM モードで TabControl を ViewModel コレクションに動的にバインドします

背景

MVVM アーキテクチャでは、ビューとモデルを明確に分離することが重要です。したがって、モデルは実際のビュー項目の作成を担当すべきではありません。ここで疑問が生じます。MVVM の原則に従いながら、タブのコンテンツを対応する ViewModel に動的にロードしてバインドするにはどうすればよいでしょうか?

解決策

解決策の鍵は、TabControl の ItemsSource プロパティを TabItem オブジェクトの ObservableCollection にバインドすることです。各 TabItem は、タブのタイトルとコンテンツ情報をカプセル化します。このコレクションはメインの ViewModel に設定する必要があります。

<code class="language-csharp">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" });
    }
}

public sealed class TabItem
{
    public string Header { get; set; }
    public string Content { get; set; }
}</code>

XAML でのデータ バインディング

アプリケーションの XAML では、TabControl の ItemsSource を ViewModel の Tabs コレクションにバインドできます。さらに、DataTemplate を指定して、タブ タイトルとタブ コンテンツの外観を定義できます。

<code class="language-xml"><Window.DataContext>
    <viewmodel:ViewModel xmlns:viewmodel="clr-namespace:WpfApplication12"/>
</Window.DataContext>
<TabControl ItemsSource="{Binding Tabs}">
    <TabControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Header}"/>
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Content}"/>
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl></code>

複雑なタブコンテンツの処理

異なるタブに異なるタイプのコンテンツを表示する必要がある場合は、DataTemplate を使用して異なる TabItem ViewModel を区別できます。このアプローチにより、各タブに適切な UserControl とデータが表示されるようになります。

結論

上記の MVVM 原則を採用することで、TabControl を ViewModel コレクションに効果的にバインドでき、懸念事項の明確な分離を維持しながら、タブ コンテンツの動的な読み込みとバインドが可能になります。

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