如何使用MVVM以編程方式在wpf中添加選項卡項中的控件

Question

我已經創建了一個選項卡控件並動態創建了tabItems，但我不知道如何使用MVVM將控件添加到tabItems中。 任何人都可以幫助我

Answer 1

有幾種方法可以在WPF以編程方式添加Tab項，我將向您展示一個關於如何在我的應用程序中處理此項的簡單示例。

首先，我在MainWindowViewModel.cs為TabItems （或我引用它們的Workspaces ）托管ViewModels的集合：

private ObservableCollection<WorkspaceViewModel> _workspaces;

public ObservableCollection<WorkspaceViewModel> Workspaces
{
    get
    {
        if (_workspaces == null)
        {
            _workspaces = new ObservableCollection<WorkspaceViewModel>();
        }
        return _workspaces;
    }
}

接下來，我在MainWindow.xaml添加對各種控件的引用。 這很重要，因為我們希望確保只要集合包含ViewModel ，它就會顯示該模型的相應View 。

 <Window.Resources>
        <DataTemplate DataType="{x:Type vm:MyUserControlViewModel}">
            <vw:MyUserControlView/>
        </DataTemplate>
  </Window.Resources>

如果你有多種類型的UserControls，你只需在這里添加它們，如下所示：

<Window.Resources>
        <DataTemplate DataType="{x:Type vm:FirstUserControlViewModel}">
            <vw:FirstUserControlView/>
        </DataTemplate>
       <DataTemplate DataType="{x:Type vm:SecondUserControlViewModel}">
            <vw:SecondUserControlView/>
        </DataTemplate>
       <DataTemplate DataType="{x:Type vm:ThirdUserControlViewModel}">
            <vw:ThirdUserControlView/>
        </DataTemplate>
  </Window.Resources>

接下來，我們添加TabControl並將其綁定到我們的Workspace Collection。

 <TabControl ItemsSource="{Binding Workspaces}"/>

然后我只需將我的ViewModels添加到Collection中，讓它們顯示在TabControl 。

Workspaces.Add(new FirstUserControlViewModel());
Workspaces.Add(new SecondUserControlViewModel());
Workspaces.Add(new ThirdUserControlViewModel());

我基於TabItem集合的WorkspaceViewModel非常簡單，看起來像這樣：

public abstract class WorkspaceViewModel : BaseViewModel
{
    public String HeaderText { get; set; }
    public override string ToString()
    {
           return HeaderText;
    }
}

添加TabItem：

要創建一個TabItem您只需創建一個UserControl和ViewModel就像您通常使用WPF和MVVM模式一樣。

namespace MyApplication.ViewModel
{
    public class FirstUserControlViewModel : WorkspaceViewModel
    {
        public FirstUserControlViewModel ()
        {
            base.HeaderText = "My First Tab";
        }
    }
}

接下來，您需要將View綁定到新的ViewModel 。

    <DataTemplate DataType="{x:Type vm:FirstUserControlViewModel }">
        <vw:FirstUserControlView/>
    </DataTemplate>

然后創建ViewModel的實例並將其添加到MainWindowViewModel的集合。

FirstUserControlViewModel firstvm = new FirstUserControlViewModel();
Workspaces.Add(firstvm);

現在TabItem應該顯示在TabControl 。

使用擴展動態加載TabItems：

在某些情況下，甚至可能需要加載TabItems從插件動態無主機應用程序第一次知道有關TabItem 。 在這些情況下，您需要讓插件將View和ViewModel注冊到應用程序域。

這很容易做到，實際上我為我的一個基於MEF的項目MEF 。 我在這里有一個帖子，還有一些額外的細節。

您需要做的就是在插件/擴展中添加Resource Dictionary ，並確保在導入插件后宿主應用程序加載它。

為了向您展示一個快速示例，我將在擴展中使用View.xaml ：

   <ResourceDictionary
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:vw="clr-namespace:MyExtension.Test">

        <DataTemplate DataType="{x:Type vw:TestViewModel}">
            <vw:TestView/>
        </DataTemplate>

    </ResourceDictionary>

然后我使用MEF將ResourceDictinary暴露給主機，如下所示：

private ResourceDictionary _viewDictionary = new ResourceDictionary();

public ResourceDictionary Dict
{
    get
    {
        return _viewDictionary;
    }
}

_viewDictionary.Source =
                new Uri("/MyExtension.Test;component/View.xaml",
                UriKind.RelativeOrAbsolute);

最后，您使用Application.Current.Resources.MergedDictionaries.Add將View.xaml加載到主機中。

Answer 2

您不必添加控件，只需指定UserControl即可。

TabControl有兩個屬性ItemTemplate && Content Template

ItemTemplate用於Tab外觀

ContentTemplate是Tab內容的外觀......所以......

Xaml為上述

            <TabControl Grid.Row="1"
                        ItemsSource="{Binding Path=TabList}"
                        SelectedItem="{Binding Path=SelectedTab,
                                               Mode=TwoWay}"
                 <!--This is How tab will look-->                                   >
                <TabControl.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image Width="20"
                                   Height="20"
                                   Margin="0,0,2,0"
                                   Source="Images\TreeView\yourFavImg.png" />
                            <TextBlock Margin="0,4,0,0"
                                       VerticalAlignment="Center"
                                       FontWeight="Bold"
                                       Text="{Binding Path=TabText}" />
                        </StackPanel>
                    </DataTemplate>
                </TabControl.ItemTemplate>
                <!--This will be the content for the tab control-->
                <TabControl.ContentTemplate>
                    <DataTemplate>
                <!--This User Control will contain the controls you like-->
                        <ViewLayer:YourFavUserControl />
                    </DataTemplate>
                </TabControl.ContentTemplate> 

Answer 3

如果你使用mvvm，你不必添加控件。 您只需要為要顯示的viewmodel對象創建datatemplate。

您只需要一個與您的viewmodel綁定的contentcontrol / presenter，datatemplate將顯示您想要的內容。