2

次のコードがあり、ヘッダー、コンテンツ、閉じるボタンを表示してタブを閉じるテンプレートが表示されますXAMLTabControlでも、タブの種類によって内容を変えたい。つまり、ビュー モデルのタイプです。現在、特定のビューにハードコーディングされています。以前、データ テンプレートで Data Type プロパティを使用しました。しかし、テンプレートセレクターと組み合わせて使用​​する方法がわかりません。

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

TemplateSelectorのクラスは次のとおりです。

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

私のタブは次のコレクションです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;
     }
 }

したがって、ItemContentTemplateデータ テンプレートで次のようなものが必要です。

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

1 に答える 1