[英]Customize TabItem DataTemplate
如何在WPF中为TabItems并使每个TabItem中的DataTemplate自定义其内容?
我需要这个:
<TabControl>
<TabControl.ContentTemplate>
<DataTemplate>
<Label Content="Name" Name="label1" />
<TextBox Name="name" />
...
</DataTemplate>
</TabControl.ContentTemplate>
<TabItem Header="Add" Name="tabItem1">
<Grid Height="213">
<Button Content="Add" Name="button1" />
</Grid>
</TabItem>
<TabItem Header="Edit" Name="tabItem2">
<Grid>
<Button Content="Edit" Name="button2" />
</Grid>
</TabItem>
</TabControl>
但按钮不显示(仅显示DataTemplate的内容)。
将重复出现的模板作为资源放在TabControl中,然后使用ContentPresenter
从特定的Tab的ContentTemplate
引用它:
<TabControl>
<TabControl.Resources>
<DataTemplate x:Key="TabTemplate">
<Label Content="Name" Name="label1" />
</DataTemplate>
</TabControl.Resources>
<TabItem Header="Add" Name="tabItem1">
<TabItem.ContentTemplate>
<DataTemplate>
<Grid Height="213">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Content="Add" Name="button1" />
<ContentPresenter Grid.Row="1" ContentTemplate="{StaticResource TabTemplate}"/>
</Grid>
</DataTemplate>
</TabItem.ContentTemplate>
</TabItem>
<TabItem Header="Edit" Name="tabItem2">
<TabItem.ContentTemplate>
<DataTemplate>
<Grid Height="213">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Content="Edit" Name="button2" />
<ContentPresenter Grid.Row="1" ContentTemplate="{StaticResource TabTemplate}"/>
</Grid>
</DataTemplate>
</TabItem.ContentTemplate>
</TabItem>
在每个标签中,除了ContentPresenter
之外的所有内容都可以有所不同...
您也可以尝试使用TabControl ContentTemplateSelector 。
在这里,您可以为选项卡项定义两个或更多不同的模板(用户控件)。 您还可以使用DataTemplateSelector在运行时决定这一点
这是一个包含相同演示的博客: mvvm-using-contenttemplateselector-in-tab-control-view /
最终的TabControl如下所示:
<UserControl x:Class="TabControlItemTemplateDemo.View.MyTabControl"
xmlns:ViewModel="clr-namespace:TabControlItemTemplateDemo"
xmlns:View1="clr-namespace:TabControlItemTemplateDemo.View" mc:Ignorable="d" >
<UserControl.Resources>
<DataTemplate x:Key="MyTabHeaderTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Header}" Width="80" Height="25" FontWeight="Bold"/>
</Grid>
</DataTemplate>
<DataTemplate x:Key="CountryContentTemplate">
<View1:CountryView DataContext="{Binding CurrentMyTabContentViewModel}"/>
</DataTemplate>
<DataTemplate x:Key="ContinentsContentTemplate">
<View1:ContinentsView DataContext="{Binding CurrentMyTabContentViewModel}"/>
</DataTemplate>
<ViewModel:MyViewSelector x:Key="selector"
CountryTemplate="{StaticResource CountryContentTemplate}"
ContintentsTemplate="{StaticResource ContinentsContentTemplate}" />
</UserControl.Resources>
<DockPanel>
<TabControl ItemsSource="{Binding Tabs}" TabStripPlacement="Left"
BorderThickness="0" Background="White"
ItemTemplate="{StaticResource MyTabHeaderTemplate}"
ContentTemplateSelector="{StaticResource selector}">
</TabControl>
</DockPanel>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.