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

MVVM の ViewModel コレクションに TabControl をバインドします

MVVM アーキテクチャでは、明確な分業を維持しながら、TabControl などの複雑な UI 要素を管理するのは困難な場合があります。 MVVM の原則に従って、TabControl を ViewModel コレクションにバインドする例を見てみましょう。

1 つの方法は、タブ項目を作成し、対応する ViewModel にリンクすることですが、ViewModel は UI 要素の構築を担当すべきではないため、これは MVVM 原則に違反します。

次の方法をお勧めします:

• TabControl の ItemsSource を TabItem ViewModel の監視可能なコレクションにバインドします。
• タイトルとコンテンツのプロパティを含む TabItem クラスを定義します。
• XAML でタブ項目のタイトルとコンテンツのテンプレートを提供します。
• ViewModel は、監視可能なコレクションに TabItem オブジェクトを設定します。

このアプローチでは、View と ViewModel の懸念を分離して、MVVM のベスト プラクティスを維持します。 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 = "选项卡一", Content = "选项卡一的内容" });
        Tabs.Add(new TabItem { Header = "选项卡二", Content = "选项卡二的内容" });
    }
}</code>

モデル:

<code class="language-csharp">public sealed class TabItem
{
    public string Header { get; set; }
    public string Content { get; set; }
}</code>

ウィンドウ (XAML):

<code class="language-xml"><Window>
    <Window.DataContext>
        <ViewModel/>
    </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>
</Window></code>

このアプローチにより、MVVM 原則に準拠しながら、タブ項目の動的な作成と管理が可能になります。

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