首页 > 技术文章 > WPF TabControl美化

ganbei 原文


<
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的美化,转载分享过来了,需要不同的需求的,可以根据自己的需求来更改模板。

  代码放在上面,效果图如下:

效果:

推荐阅读