WPF在TabControl的DataTemplate中绑定不同的UserControls [英] WPF binding different UserControls in a DataTemplate of TabControl

问题描述

作为WPF和MVVM的新功能，我正在努力将MVVM模式应用于TabControl.我将举例说明我要实现的目标.

As a new in WPF and MVVM light, I am struggling to apply the MVVM pattern in a TabControl. I will give you an example of what I am trying to achieve.

TabOne xaml及其视图模型

TabOne xaml and its view model

<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及其视图模型

TabTwo xaml and its viewmodel

<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";
        }
    }
}

最后是MainWindow xaml及其视图模型

and finally the MainWindow xaml and its viewmodel

<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);
        }
    }
}

我应该在DataTemplate中写些什么?是否可以在此DataTemplate中同时传递TabOne和TabTwo的两个用户控件，以便获得我单击的每个选项卡的视图?还是我需要编写另一个DataTemplate?

What am I supposed to write in the DataTemplate? Can I pass both usercontrols for TabOne and TabTwo in this DataTemplate in order to get the view for each tab I click? Or do I need to write another 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>

请注意，用于TabOne ViewModel的UserControl也被命名为TabOne. 我将其更改为UserControlOne.同样适用于UserControlTwo.

Please note that, your UserControl for TabOne ViewModel is also named TabOne. I changed it to UserControlOne. Same applies to UserControlTwo.

这篇关于WPF在TabControl的DataTemplate中绑定不同的UserControls的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！