注意：以下两种样式暂时只支持TabStripPlacement=“Top”，也就是标签在上方的效果

第一种：

效果如图：

样式代码：

        <Style x:Key="TabItemLineStyle"TargetType="{x:Type TabItem}"><Setter Property="Header"Value="{Binding Name}" /><Setter Property="FocusVisualStyle"Value="{x:Null}" /><Setter Property="Foreground"Value="#818181" /><Setter Property="FontSize"Value="16" /><Setter Property="Padding"Value="5,3,5,3" /><Setter Property="HorizontalContentAlignment"Value="Stretch" /><Setter Property="VerticalContentAlignment"Value="Stretch" /><Setter Property="SnapsToDevicePixels"Value="True" /><Setter Property="UseLayoutRounding"Value="True" /><Setter Property="Margin"Value="0" /><Setter Property="BorderThickness"Value="0,0,0,2" /><Setter Property="Background"Value="#FFFFFF" /><Setter Property="UseLayoutRounding"Value="True" /><Setter Property="BorderBrush"Value="Transparent" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type TabItem}"><Border x:Name="border"Background="{TemplateBinding Background}"BorderBrush="{TemplateBinding BorderBrush}"BorderThickness="{TemplateBinding BorderThickness}"Margin="{TemplateBinding Margin}"Padding="{TemplateBinding Padding}"SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"UseLayoutRounding="{TemplateBinding UseLayoutRounding}"><ContentPresenter x:Name="contentPresenter"Margin="{TemplateBinding Padding}"HorizontalAlignment="{Binding HorizontalContentAlignment,RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"VerticalAlignment="{Binding VerticalContentAlignment,RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"ContentSource="Header"Focusable="False"RecognizesAccessKey="True"SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /></Border><ControlTemplate.Triggers><MultiDataTrigger><MultiDataTrigger.Conditions><Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}"Value="true" /><Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}"Value="Top" /></MultiDataTrigger.Conditions><Setter TargetName="border"Property="Cursor"Value="Hand" /><Setter Property="BorderBrush"Value="#007ACC" /></MultiDataTrigger><MultiDataTrigger><MultiDataTrigger.Conditions><Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}"Value="true" /><Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}"Value="Top" /></MultiDataTrigger.Conditions><Setter Property="Panel.ZIndex"Value="1" /><Setter Property="BorderBrush"Value="#007ACC" /><Setter Property="Foreground"Value="#007ACC" /><Setter Property="Background"Value="#FFFFFF" /></MultiDataTrigger><MultiDataTrigger><MultiDataTrigger.Conditions><Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}"Value="false" /><Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}"Value="Top" /></MultiDataTrigger.Conditions><Setter TargetName="contentPresenter"Property="Opacity"Value="0.56" /></MultiDataTrigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style>

第二种：

效果如图：

  <Style x:Key="TabItemCardStyle"TargetType="{x:Type TabItem}"><Setter Property="Header"Value="{Binding Name}" /><Setter Property="FocusVisualStyle"Value="{x:Null}" /><Setter Property="Foreground"Value="#818181" /><Setter Property="FontSize"Value="16" /><Setter Property="Padding"Value="5,3,5,3" /><Setter Property="HorizontalContentAlignment"Value="Stretch" /><Setter Property="VerticalContentAlignment"Value="Stretch" /><Setter Property="SnapsToDevicePixels"Value="True" /><Setter Property="UseLayoutRounding"Value="True" /><Setter Property="BorderThickness"Value="0,0,0,2" /><Setter Property="Background"Value="#FFFFFF" /><Setter Property="BorderBrush"Value="Transparent" /><Setter Property="Content"><Setter.Value><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="*" /><ColumnDefinition Width="*" /></Grid.ColumnDefinitions><ListBox ItemsSource="{Binding DataContext.LeftList,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=Window}}" /><ListBox Grid.Column="1"ItemsSource="{Binding DataContext.RightList,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=Window}}"><ListBox.ItemContainerStyle><Style TargetType="{x:Type ListBoxItem}"><Setter Property="SnapsToDevicePixels"Value="True" /><Setter Property="Width"Value="180" /><Setter Property="MaxHeight"Value="400" /><Setter Property="Margin"Value="20,20,0,0" /><Setter Property="Padding"Value="15" /><Setter Property="HorizontalContentAlignment"Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}" /><Setter Property="VerticalContentAlignment"Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}" /><Setter Property="Background"Value="Transparent" /><Setter Property="BorderBrush"Value="Transparent" /><Setter Property="BorderThickness"Value="1" /><Setter Property="FocusVisualStyle"><Setter.Value><Style><Setter Property="Control.Template"><Setter.Value><ControlTemplate><Rectangle Margin="2"SnapsToDevicePixels="True"Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"StrokeThickness="1"StrokeDashArray="1 2" /></ControlTemplate></Setter.Value></Setter></Style></Setter.Value></Setter><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type ListBoxItem}"><Border x:Name="Bd"RenderTransformOrigin="0.5,0.5"><Border.Effect><DropShadowEffect BlurRadius="10"ShadowDepth="4"Direction="315"Opacity="0.2" /></Border.Effect><Border.RenderTransform><TransformGroup><ScaleTransform /><RotateTransform /><TranslateTransform /></TransformGroup></Border.RenderTransform><Grid Background="White"><Grid.RowDefinitions><RowDefinition Height="*" /><RowDefinition Height="5" /><RowDefinition Height="auto" /></Grid.RowDefinitions><Border x:Name="Border_ImageBorder"Grid.Row="0"><Grid><Image Source="{Binding PhotoByte}"Stretch="Uniform" /></Grid></Border><Border Grid.Row="2"><Grid Margin="5"><Grid.RowDefinitions><RowDefinition Height="auto" /><RowDefinition Height="10" /><RowDefinition Height="auto" /></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="auto" /><ColumnDefinition Width="10" /><ColumnDefinition Width="*" /></Grid.ColumnDefinitions><TextBlock Grid.Row="0"Height="50"Grid.Column="0"Grid.ColumnSpan="3"Text="{Binding Name}"TextWrapping="Wrap"TextTrimming="CharacterEllipsis"ToolTip="{Binding Text, RelativeSource={RelativeSource Self}}"FontSize="18"Foreground="#666666"FontWeight="Bold" /><Grid  Grid.Row="2"Grid.Column="0"VerticalAlignment="Center"><Grid.ColumnDefinitions><ColumnDefinition Width="auto" /><ColumnDefinition Width="auto" /></Grid.ColumnDefinitions><TextBlock Text="￥100"Foreground="#FF0000"FontWeight="Bold"FontSize="16" /><TextBlock Grid.Column="1"Text="/次"Foreground="#FF0000"FontWeight="Bold"FontSize="16" /></Grid><!--<Button Grid.Row="2"Grid.Column="2"Command="{Binding DataContext.AddShoppingCartCommand,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=Window}}"CommandParameter="{Binding SelectedItem,RelativeSource={RelativeSource  AncestorType=ListBox,Mode=FindAncestor}}"></Button>--><Border Grid.Row="2"Grid.Column="2"BorderBrush="AliceBlue"><TextBlock Text="购买"HorizontalAlignment="Center" /><i:Interaction.Triggers><i:EventTrigger EventName="MouseDown"><cmd:EventToCommand Command="{Binding DataContext.AddShoppingCartCommand,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=Window}}"CommandParameter="{Binding SelectedItem,RelativeSource={RelativeSource  AncestorType=ListBox,Mode=FindAncestor}}" /></i:EventTrigger></i:Interaction.Triggers></Border></Grid></Border></Grid></Border><ControlTemplate.Triggers><MultiTrigger><MultiTrigger.Conditions><Condition Property="IsMouseOver"Value="True" /></MultiTrigger.Conditions></MultiTrigger><MultiTrigger><MultiTrigger.Conditions><Condition Property="Selector.IsSelectionActive"Value="False" /><Condition Property="IsFocused"Value="False" /></MultiTrigger.Conditions></MultiTrigger><MultiTrigger><MultiTrigger.Conditions><Condition Property="Selector.IsSelectionActive"Value="True" /><Condition Property="IsSelected"Value="True" /></MultiTrigger.Conditions></MultiTrigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style></ListBox.ItemContainerStyle></ListBox></Grid></Setter.Value></Setter><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type TabItem}"><Border x:Name="border"Background="{TemplateBinding Background}"BorderBrush="{TemplateBinding BorderBrush}"BorderThickness="{TemplateBinding BorderThickness}"Margin="{TemplateBinding Margin}"Padding="{TemplateBinding Padding}"CornerRadius="3,3,0,0"SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"UseLayoutRounding="{TemplateBinding UseLayoutRounding}"><ContentPresenter x:Name="contentPresenter"Margin="{TemplateBinding Padding}"HorizontalAlignment="{Binding HorizontalContentAlignment,RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"VerticalAlignment="{Binding VerticalContentAlignment,RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"ContentSource="Header"Focusable="False"RecognizesAccessKey="True"SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /></Border><ControlTemplate.Triggers><MultiDataTrigger><MultiDataTrigger.Conditions><Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}"Value="true" /><Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}"Value="Top" /></MultiDataTrigger.Conditions><Setter TargetName="border"Property="Cursor"Value="Hand" /><Setter Property="Background"Value="#FFFFFF" /><Setter Property="BorderBrush"Value="#007ACC" /></MultiDataTrigger><MultiDataTrigger><MultiDataTrigger.Conditions><Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}"Value="true" /><Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}"Value="Top" /></MultiDataTrigger.Conditions><Setter Property="Panel.ZIndex"Value="1" /><Setter Property="BorderBrush"Value="#D7DDE4" /><Setter Property="Background"Value="#FFFFFF" /><Setter Property="BorderThickness"Value="1,1,1,0" /><Setter Property="Foreground"Value="#64778D" /><Setter Property="Margin"Value="0,0,5,-1.3" /></MultiDataTrigger><MultiDataTrigger><MultiDataTrigger.Conditions><Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}"Value="False" /><Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}"Value="Top" /></MultiDataTrigger.Conditions><Setter Property="Panel.ZIndex"Value="1" /><Setter Property="BorderBrush"Value="#D7DDE4" /><Setter Property="BorderThickness"Value="1,1,1,0" /><Setter Property="Background"Value="#F5F7F9" /><Setter Property="Foreground"Value="#64778D" /><Setter Property="Margin"Value="0,0,5,0" /></MultiDataTrigger><MultiDataTrigger><MultiDataTrigger.Conditions><Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}"Value="false" /><Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}"Value="Top" /></MultiDataTrigger.Conditions><Setter TargetName="contentPresenter"Property="Opacity"Value="0.56" /></MultiDataTrigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style>

转载于:https://my.oschina.net/u/2525682/blog/3096726

WPF TabControl的好看样式相关推荐

  1. WPF 自定义TabControl控件样式（转）

    WPF 自定义TabControl控件样式 一.前言 程序中经常会用到TabControl控件,默认的控件样式很普通.而且样式或功能不一定符合我们的要求.比如:我们需要TabControl的标题能够居 ...

  2. WPF TabControl Unload俩次的解决方案

    原文:WPF TabControl Unload俩次的解决方案 WPF中,有些控件会多次触发Unload,有点莫名其妙~ Unload的多次触发 TabControl的内容,我是这么设置的: 在Tab ...

  3. WPF TabControl 数据绑定

    WPF TabControl in Binding's world 首先,TabControl是间接继承自ItemControl的控件,因此可以像ItemControl那样自如的使用. 自此,我们知道 ...

  4. html tabcontrol模板,WPF TabControl模板+ ItemContainerStyle

    我正在尝试创建一个基本上看起来像中心顶部的按钮和下面显示tabitem内容的内容面板上的按钮控制样式.WPF TabControl模板+ ItemContainerStyle 我对模板有点新,但到目前 ...

  5. WPF TabControl Styles

    WPF TabControl Styles 水平使用的TabControl 效果: 样式资源 <!-- 顶部TabControl控件样式 --><SolidColorBrush x: ...

  6. WPF QuickStart系列之样式和模板(Style and Template)

    原文:WPF QuickStart系列之样式和模板(Style and Template) 在WPF桌面程序中,当我们想构建一个统一的UI表现时(在不同操作系统下,显示效果一致),此时我们就需要使用到 ...

  7. WPF TabControl 美化

    转载来源:http://www.cnblogs.com/xling/p/3595602.html WPF TabControl 美化 文章很详细的说明了怎么做的美化  只是在学习过程中没有代码下载让人 ...

  8. WPF TabControl控件示例

    WPF TabControl控件示例 运行效果: 主窗体XAML代码: <Window x:Class="WPF0417.MainWindow"xmlns="htt ...

  9. C# WPF TabControl控件用法详解

    概述 TabControl我之前有讲过一节,内容详见:C# WPF TabControl用法指南(精品),上节主要讲解了tabcontrol控件的左右翻页,以及页面筛选,以及数据绑定等内容,这节内容继 ...

最新文章

  1. 消息队列面试经典十连问
  2. AI如何反低俗？今日头条推内容检测工具“灵犬”3.0，首次公开其技术原理
  3. python不需要定义函数后使用_python自定义函数可以向前引用不用声明
  4. .NET MVC访问某方法后会跳转页面
  5. php ajax取不到值,PHP没有从Ajax获取值
  6. 341. 扁平化嵌套列表迭代器
  7. 应变界的翘楚：硅基谐振式传感器灵敏度非常高
  8. php h5读写数据库,H5学习_番外篇_PHP数据库操作
  9. java实现浏览器ui中的收藏夹_谷歌改进Google Chrome浏览器中的PDF浏览器 带来全新UI...
  10. Windows下使用pthread
  11. 特征工程(三):特征缩放,从词袋到 TF-IDF
  12. FFmpeg源代码结构图 - 编码
  13. [Asp.net]缓存简介
  14. asc和desc全称_MySQL数据排序asc、desc
  15. （一）QCustomPlot常见属性设置、多曲线绘制、动态曲线绘制、生成游标、矩形放大等功能实现
  16. matlab（simulink）里怎么求一个波形的动态平均值
  17. 解析某个94aw演示备忘
  18. tomcat连接以及HTTP协议
  19. Activity中的数据传送—案例: 购买装备
  20. Rootkit 真刀真枪的权限保卫战

热门文章

  1. java面向对象1-面向对象概念
  2. 酒鬼酒Q3净利润连续下滑，3大流通股东减持近125万股
  3. 不遗憾的故事里，伴随着一颗笨笨的专心
  4. 小熊读书：如何自我提升——《软技能》
  5. nightwatch + selenium 基于浏览器的web自动化测试 教程（二）
  6. iOS app如何重签名
  7. 网络教育风生水起，9158如何脱颖而出？
  8. Windows路由表解析
  9. Java各阶段学习书籍推荐
  10. python怎么实现自动化运维_如何做好python自动化运维