如何使用MVVM在wpf中以编程方式在选项卡项中添加控件
本文关键字:选项 控件 方式 添加 何使用 MVVM wpf 编程 | 更新日期: 2023-09-27 18:19:40
我已经创建了一个选项卡控件并动态创建了tabItems,但我不知道如何使用MVVM将控件添加到tabItems中。有人能帮我吗
有几种方法可以在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());
我的WorkspaceViewModel
是TabItem
集合的基础,它非常简单,看起来像这样:
public abstract class WorkspaceViewModel : BaseViewModel
{
public String HeaderText { get; set; }
public override string ToString()
{
return HeaderText;
}
}
添加选项卡项:
要创建TabItem
,只需像通常使用WPF和MVVM模式一样创建UserControl
和ViewModel
。
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
。在这些情况下,您需要让插件向应用程序域注册View
和ViewModel
。
这很容易做到,实际上是我为一个基于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&;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,数据模板就会显示您想要的内容。