WPF如何根据类型设置数据模板

Question

I have the following code in my XAML which shows a TabControl and templates to show the header, content and close button to close the tab. But I want the content to be different based on the type of tab. ie the type of the view model. Right now it is hard coded to a specific view. I have previously used the Data Type property in the data template. But I am not sure how to use it in combination with the template selector.

<Window.Resources>
    <DataTemplate x:Key="ClosableTabItemTemplate">
        <DockPanel Width="120">   
            <Button 
                Command="{Binding ElementName=MainTabControl, Path=DataContext.RemoveTabCommand}"
                CommandParameter="{Binding Path=DealName}"
                Content="x"
                Cursor="Hand"
                DockPanel.Dock="Right"
                Focusable="False"
                FontFamily="Courier" 
                FontSize="9"
                FontWeight="Bold"                      
                Padding="0"
                VerticalContentAlignment="Bottom"
                Width="16" Height="16" 
            />

            <ContentControl
                Content="{Binding Path=Header}"                    
                VerticalAlignment="Center">

                <ContentControl.Style>
                    <Style>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Path=Header}" Value="New Deal">
                                <Setter Property="ContentControl.Foreground" Value="Blue"></Setter>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </ContentControl.Style>
            </ContentControl>                
        </DockPanel>
    </DataTemplate>

    <DataTemplate x:Key="newTabButtonContentTemplate">
        <Grid/>
    </DataTemplate>

    <DataTemplate x:Key="newTabButtonHeaderTemplate">
        <Button Content="+" Width="20"  Height="20" Command="{Binding ElementName=MainTabControl, Path=DataContext.NewTabCommand}"/>
    </DataTemplate>

    <DataTemplate x:Key="itemContentTemplate">
        <v:DealView/>
    </DataTemplate>

    <v:TemplateSelector x:Key="headerTemplateSelector"
                       NewButtonTemplate="{StaticResource newTabButtonHeaderTemplate}"
                       ItemTemplate="{StaticResource ClosableTabItemTemplate}"/>

    <v:TemplateSelector x:Key="contentTemplateSelector"
                        NewButtonTemplate="{StaticResource newTabButtonContentTemplate}"
                        ItemTemplate="{StaticResource itemContentTemplate}"/>
</Window.Resources>

<Window.DataContext>
    <vm:MainViewModel />
</Window.DataContext>

<Grid>
    <DockPanel>
        <TabControl DockPanel.Dock="Bottom"  x:Name="MainTabControl"  Margin="2" ItemsSource="{Binding Tabs}" 
                               IsSynchronizedWithCurrentItem="True"                                 
                               ItemTemplateSelector="{StaticResource headerTemplateSelector}"
                               ContentTemplateSelector="{StaticResource contentTemplateSelector}">

            <TabControl.Resources>
                <Style TargetType="{x:Type TabPanel}">
                    <Setter Property="Background" Value="AliceBlue"/>
                </Style>                   
            </TabControl.Resources>
        </TabControl>
    </DockPanel>
</Grid>

My TemplateSelector class is the following:

public class TemplateSelector : DataTemplateSelector
{
    public DataTemplate ItemTemplate { get; set; }
    public DataTemplate NewButtonTemplate { get; set; }

    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        if (item == CollectionView.NewItemPlaceholder)
        {
            return NewButtonTemplate;
        }
        else
        {
            return ItemTemplate;
        }
    }
}

My tabs is a collection of ViewModels :

public ObservableCollection<ViewModelBase> Tabs
{
    get
    {
        if (tabs == null)
        {
            tabs = new ObservableCollection<ViewModelBase>();
            var itemsView = (IEditableCollectionView)CollectionViewSource.GetDefaultView(tabs);
            itemsView.NewItemPlaceholderPosition = NewItemPlaceholderPosition.AtEnd;
         }

        return tabs;
     }
 }

So I want something like this with my ItemContentTemplate data template:

<DataTemplate x:Key="itemContentTemplate">
    when type is DealViewModel use  <v:DealView/>
    when type is DealSummaryViewModel use <v:DealSummaryView/>
    etc
</DataTemplate>

Answer 1

I have previously used the Data Type property in the data template. But I am not sure how to use it in combination with the template selector.

If you just fall back to the base, as in:

return base.SelectTemplate(item, container);

...you should get the default behavior, ie selecting the template with a matching DataType . Would that be sufficient? (Actually, you can just return null, since that's all it does.)

Another option is to access resource keys from the selector:

return ((FrameworkElement)container).FindResource(resourceKey) as DataTemplate;

where resourceKey is computed based on the item, and a template with that key is defined somewhere higher up the tree than the container.