[英]WPF binding different UserControls in a DataTemplate of TabControl
As a new in WPF and MVVM light, I am struggling to apply the MVVM pattern in a TabControl. 作为WPF和MVVM的新功能,我正在努力将MVVM模式应用于TabControl。 I will give you an example of what I am trying to achieve.
我将举例说明我要实现的目标。
TabOne xaml and its view model TabOne XAML及其视图模型
<UserControl x:Class="TestTabControl.TabOne"
xmlns:local="clr-namespace:TestTabControl"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<TextBlock Text="tab one ..." FontWeight="Bold" FontSize="14" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</UserControl>
//TabOne ViewModel
class TabOne : ViewModelBase
{
public string TabName
{
get
{
return "TabOne";
}
}
}
TabTwo xaml and its viewmodel TabTwo xaml及其视图模型
<UserControl x:Class="TestTabControl.TabTwo"
xmlns:local="clr-namespace:TestTabControl"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<TextBlock Text="tab two ..." FontWeight="Bold" FontSize="14" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</UserControl>
//TabTwo ViewModel
class TabTwo : ViewModelBase
{
public string TabName
{
get
{
return "TabTwo";
}
}
}
and finally the MainWindow xaml and its viewmodel 最后是MainWindow xaml及其视图模型
<Window x:Class="TestTabControl.MainWindow"
xmlns:local="clr-namespace:TestTabControl"
mc:Ignorable="d"
Title="Test Tab Control" MinWidth="500" Width="1000" Height="800">
<TabControl ItemsSource="{Binding TabViewModels}" >
<TabControl.ItemTemplate >
<!-- header template -->
<DataTemplate>
<TextBlock Text="{Binding TabName}" />
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
?????????
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
</Window>
//MainWindow ViewModel
class MainWindowViewModel : ViewModelBase
{
private ObservableCollection<ViewModelBase> _tabViewModels;
public MainWindowViewModel()
{
_tabViewModels = new ObservableCollection<ViewModelBase>();
TabViewModels.Add(new TabOne());
TabViewModels.Add(new TabTwo());
}
public ObservableCollection<ViewModelBase> TabViewModels
{
get
{
return _tabViewModels;
}
set // is that part right?
{
_tabViewModels = value;
RaisePropertyChanged(() => TabViewModels);
}
}
}
What am I supposed to write in the DataTemplate? 我应该在DataTemplate中写些什么? Can I pass both usercontrols for TabOne and TabTwo in this DataTemplate in order to get the view for each tab I click?
是否可以在此DataTemplate中同时传递TabOne和TabTwo的两个用户控件,以获取单击的每个选项卡的视图? Or do I need to write another DataTemplate?
还是我需要编写另一个DataTemplate?
You may already knew the answer by now. 您可能已经知道答案了。 But for the benefits of other people, what you need to do is:
但是为了他人的利益,您需要做的是:
<Grid Margin="10"> <Grid.Resources> <DataTemplate DataType="{x:Type local:TabOne}"> <local:UserControlOne/> </DataTemplate> <DataTemplate DataType="{x:Type local:TabTwo}"> <local:UserControlTwo/> </DataTemplate> </Grid.Resources> <TabControl Margin="10" ItemsSource="{Binding TabViewModels}"> </TabControl> </Grid>
Please note that , your UserControl for TabOne
ViewModel is also named TabOne
. 请注意,用于
TabOne
ViewModel的UserControl也称为TabOne
。 I changed it to UserControlOne
. 我将其更改为
UserControlOne
。 Same applies to UserControlTwo. 同样适用于UserControlTwo。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.