如何使用 MVVM 資料綁定將 TabControl 綁定到 ViewModel 集合？

MVVM資料綁定：使用ViewModel集合綁定TabControl

在MVVM (模型-視圖-視圖模型) 架構中，ViewModel不應該直接建立UI元素。相反，它應該公開資料模型並為視圖提供綁定。要將TabControl綁定到ViewModel集合，需要不同的方法。

建立選項卡頁面模型

實作一個表示每個選項卡頁面的模型類，包括標題和內容的屬性。例如：

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

包含ObservableCollection的ViewModel

為TabItem物件的ObservableCollection建立一個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" });
    }
}</code>

XAML中的綁定

在XAML視窗中，將TabControl的ItemsSource設定為ViewModel中的Tabs屬性：

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

選項卡內容的資料範本

要在每個標籤中顯示不同的內容，請使用TabControl的ContentTemplate屬性的資料範本：

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

透過此方法，您可以動態建立TabControl並將其綁定到ViewModel集合，同時保持MVVM原則。

以上是如何使用 MVVM 資料綁定將 TabControl 綁定到 ViewModel 集合？的詳細內容。更多資訊請關注PHP中文網其他相關文章！