如何使用MVVM在wpf中以编程方式在选项卡项中添加控件

本文关键字:选项 控件 方式 添加 何使用 MVVM wpf 编程 | 更新日期: 2023-09-27 18:19:40

我已经创建了一个选项卡控件并动态创建了tabItems,但我不知道如何使用MVVM将控件添加到tabItems中。有人能帮我吗

如何使用MVVM在wpf中以编程方式在选项卡项中添加控件

有几种方法可以在WPF中以编程方式添加选项卡项,我将向您展示一个关于如何在应用程序中处理此问题的简单示例。

首先,我在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集合。

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

然后,我只需将我的ViewModels添加到集合中,即可使它们显示在TabControl中。

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

我的WorkspaceViewModelTabItem集合的基础,它非常简单,看起来像这样:

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

添加选项卡项:

要创建TabItem,只需像通常使用WPF和MVVM模式一样创建UserControlViewModel

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中。

使用扩展动态加载选项卡项:

在某些情况下,您甚至可能需要在主机应用程序不首先了解TabItem的情况下,从插件动态加载TabItems。在这些情况下,您需要让插件向应用程序域注册ViewViewModel

这很容易做到,实际上是我为一个基于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向主机公开ResourceDictionary,如下所示:

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加载到主机中。

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

TabControl有两个属性CCD_ 32&amp;Content Template

ItemTemplate用于Tab作为的外观

ContentTemplate是选项卡内容的外观。。。所以…

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> 

如果使用mvvm,则不必添加控件。您只需要为您想要显示的视图模型对象创建数据模板。

您只需要一个绑定到视图模型的contentcontrol/presenter,数据模板就会显示您想要的内容。