<Window.Resources>
<!-- TabItem的样式 -->
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<!-- 主Border -->
<Border
Name="bd"
Margin="5,10,5,0"
Background="{TemplateBinding Background}"
BorderBrush="Gray"
BorderThickness="3"
CornerRadius="7">
<ContentPresenter
Margin="20,10"
VerticalAlignment="Center"
ContentSource="Header" />
</Border>
</Grid> <ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="bd" Property="BorderThickness" Value="2" />
<Setter TargetName="bd" Property="Margin" Value="0" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True" />
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="Black" />
<Setter Property="FontSize" Value="18" />
</Style> <!-- TabControl的样式 -->
<Style TargetType="{x:Type TabControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Padding="10">
<TabPanel IsItemsHost="True" />
</Border>
<Border
Grid.Row="1"
Padding="10"
BorderBrush="Gray"
BorderThickness="2">
<ContentPresenter Name="PART_SelectedContentHost" ContentSource="SelectedContent" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources> <TabControl>
<TabItem Background="#FFFFFF72" Header="aaa">test</TabItem>
<TabItem Background="#FFAEFF7A" Header="bbb">
<DockPanel>
<Button DockPanel.Dock="Bottom">hehe</Button>
<TextBox />
</DockPanel>
</TabItem>
<TabItem Background="#FFA6D5FF" Header="ccc">test</TabItem>
</TabControl>
因为项目的需求,需要做一个类似于商城的选购的页面 ,根据不同的分类来选择不同的商品。
因为刚开始学习WPF,暂时不知道如何去修改Tab Control的模板,于是按照其他博主的教程,使用Blend来查看控件的构成,于是自己摸索了一下,在网上也看到了一些不错的美化。
后面我会根据自己的需求来更改,后续的效果图会放在下一篇博客。
看到一个非常不错的TabControl的美化,转载分享过来了,需要不同的需求的,可以根据自己的需求来更改模板。
代码放在上面,效果图如下:
效果: