次のコードがあり、ヘッダー、コンテンツ、閉じるボタンを表示してタブを閉じるテンプレートが表示されますXAML
。TabControl
でも、タブの種類によって内容を変えたい。つまり、ビュー モデルのタイプです。現在、特定のビューにハードコーディングされています。以前、データ テンプレートで 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>