一个简单的TabItem样式。
分享一个以前项目中用到的简单的TabItem样式。
效果图如下:
<SolidColorBrush x:Key="TabItemDisabledBackground" Color="#F4F4F4"/>
<SolidColorBrush x:Key="TabItemDisabledBorderBrush" Color="#FFC9C7BA"/> <Style TargetType="{x:Type TabItem}">
<!--<Setter Property="FocusVisualStyle" Value="{x:null}"/>-->
<Setter Property="Foreground" Value="#333333"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="BorderBrush" Value="{StaticResource TabControlNormalBorderBrush}"/>
<Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid SnapsToDevicePixels="true" Height="40" MinWidth="110">
<Path Margin="0 0 0 -12" x:Name="PATH" Visibility="Collapsed" Data="M0.5,0.5 L109.5,0.5 109.5,39.5 64,40 57,51 49,40 0.5,39.5 z" Fill="#FF0FAF46" Height="51.5" Stretch="Fill" Stroke="Transparent" Width="110"/>
<Border x:Name="Bd" Background="#dfe9f6">
<ContentPresenter Margin="5 0 5 0" x:Name="Content" ContentSource="Header" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="TabStripPlacement" Value="Top"/>
</MultiTrigger.Conditions>
<Setter Property="Visibility" Value="visible" TargetName="PATH"/>
<Setter Property="Foreground" Value="White"></Setter>
<Setter Property="Background" Value="#FF0FAF46" TargetName="Bd"/>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemDisabledBackground}"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabItemDisabledBorderBrush}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
这里只实现了标签方向在Top的实现,其它动画或者显示效果都是可以随意增加的!
一个简单的TabItem样式。的更多相关文章
- WPF一个简单的垂直菜单样式的实现
以前制作类似于垂直菜单功能的控件我都是Listbox和一个Popup实现的,今天尝试着用Menu做了一个简单垂直菜单,就当是做了个小练习写了这篇随笔~: 有什么不对的地方希望大家指正,分享和记录也是一 ...
- Prism for WPF 搭建一个简单的模块化开发框架(三) 给TreeView加样式做成菜单
原文:Prism for WPF 搭建一个简单的模块化开发框架(三) 给TreeView加样式做成菜单 昨天晚上把TreeView的样式做了一下,今天给TreeView绑了数据,实现了切换页面功能 上 ...
- Expression Blend4经验分享:制作一个简单的图片按钮样式
这次分享如何做一个简单的图片按钮经验 在我的个人Silverlight网页上,有个Iphone手机的效果,其中用到大量的图片按钮 http://raimon.6.gwidc.com/Iphone/de ...
- 如何开发一个简单的HTML5 Canvas 小游戏
原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...
- 使用MongoDB和JSP实现一个简单的购物车系统
目录 1 问题描述 2 解决方案 2.1 实现功能 2.2 最终运行效果图 2.3 系统功能框架示意图 2.4 有关MongoDB简介及系统环境配置 2.5 核心功能代码讲解 ...
- 自己动手模拟开发一个简单的Web服务器
开篇:每当我们将开发好的ASP.NET网站部署到IIS服务器中,在浏览器正常浏览页面时,可曾想过Web服务器是怎么工作的,其原理是什么?“纸上得来终觉浅,绝知此事要躬行”,于是我们自己模拟一个简单的W ...
- 无聊的人用JS实现了一个简单的打地鼠游戏
直入正题,用JS实现一个简单的打地鼠游戏 因为功能比较简单就直接裸奔JS了,先看看效果图,或者 在线玩玩 吧 如果点击颜色比较深的那个(俗称坏老鼠),将扣分50:如果点击颜色比较浅的那个(俗称好老鼠) ...
- 用JS做一个简单的电商产品放大镜功能
使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...
- Quartz2D之绘制一个简单的机器猫
学习iOS有一段时间了,在博客园也默默的潜水了两个月,见识了很多大神,收获不少. 今天整理笔记,发现忘记的不少,我感觉需要及时的整理一下了,同时也把做的小东西贴上来和大家分享一下. 最近学习了Quar ...
随机推荐
- 在ubuntu 14.04 64位添加32位库
网上查了好多,结果发现这个是有用的,做个标记 sudo apt-get install libgtk2.0-0:i386
- VMware卸载出现“the msi failed”解决办法
最近被VMware卸载搞烦死掉,最后通过这个帖子解决. http://www.cnblogs.com/noble/p/4144267.html 总结:有啥软件使用问题最好找官方的FAQ找答案,不然百度 ...
- c# 函数
1.输入三个数,求最大的数. 2.输入一个数,求1~n的和. 3.求n的阶乘. 4.输入一个小于等于100的数,判断是否是100,还是小于10,还是两位数.
- 面试题---PHP
1.PHP(外文名: Hypertext Preprocessor,中文名:“超文本预处理器”)是一种通用开源脚本语言. 2.echo,print和print_r的区别: echo和print都可以做 ...
- led驱动
驱动步骤: 1.驱动框架:一般读驱动代码需要module_init一层层找代码 2.硬件配置 代码中led_ioctl函数设置引脚的电平高低,该函数是驱动程序对设备的通道进行统一设置/控制的函数 一. ...
- 关于vue.js中事件处理器的练习
html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...
- 文件权限及特殊权限管理SUID、SGID和Sticky
文件权限应用模型: 进程的发起者: 进程属主 进程的属组: 进程属组 进程的属主,是否与文件的属主相同,如果相同,进程则以文件属主的权限来访问文件:否则进程的属主所属的组,其中之一是 ...
- Windows环境下npm install常见错误
Windows环境下npm install安装包依赖时,常出现一些错误,下面为个人解决办法: 错误一 缺少python环境: G:\nodejs\moviesite\node_modules\bcry ...
- SolrCloud分布式集群部署步骤
Solr及SolrCloud简介 Solr是一个独立的企业级搜索应用服务器,它对外提供类似于Web-service的API接口.用户可以通过http请求,向搜索引擎服务器提交一定格式的XML文件,生成 ...
- linux显示器常见设置
1. 设置系统默认的分辨率 xrandr 命令: > xrandr Screen 0: minimum 1 x 1, current 1920 x 1080, maximum 8192 x 8 ...