[原译]模拟Office2010文件菜单的TabControl模板
这是Office2010中的文件菜单点开后的效果。本文我将以强大的WPF来实现类似的效果。希望你能有所收获。而不是只拷贝/粘贴代码而已。
开始之前。先把TabControl找个地方放着。
<Window x:Class="TestClient.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="MainWindow" Height="350" Width="525"><TabControl Name="tabSteps"><TabItem Header="Info" IsSelected="True"><TextBlock>Info content</TextBlock></TabItem><TabItem Header="Recent"><TextBlock>Recent content tab</TextBlock></TabItem><TabItem Header="New"><TextBlock>New content tab</TextBlock></TabItem><TabItem Header="Print"><TextBlock>Print content tab</TextBlock></TabItem><TabItem Header="Save & Send"><TextBlock>Save & send content tab</TextBlock></TabItem><TabItem Header="Help"><TextBlock>Help tab</TextBlock></TabItem></TabControl></Window>
然后会大概是这个效果
为了改变TabControl的显示效果。我们使用模板机制，我们把模板写进一个资源字典里。这样就可以重用了。添加一个资源字典的步骤如下
右键点击工程-添加-资源字典
然后在资源字典里添加一些代码。
<ControlTemplate x:Key="OfficeTabControl" TargetType="{x:Type TabControl}"><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="160" /><ColumnDefinition/></Grid.ColumnDefinitions><Border Background="#FFE9ECEF"Grid.Column="0"BorderBrush="LightGray"BorderThickness="1"SnapsToDevicePixels="True" /><StackPanel IsItemsHost="True"Grid.Column="0"Margin="0,0,-1,0"SnapsToDevicePixels="True" /><ContentPresenterContent="{TemplateBinding SelectedContent}"Grid.Column="1"Margin="15,0,0,0" /></Grid></ControlTemplate>这样就添加了一个有一个grid元素的名为OfficeTabControl的控件模板 . Grid 被分成两列，一列是标签页，一列是页内容。左边的列包含一个灰色背景和亮灰色的边缘线，然后一个StackPanel，IsItemsHost属性被设置为true，
这样标签项被会放在这个栈面板里。第二列是ContentPresenter 这会放置标签页内容。然后让我们前面的TabControl使用新模板。设置Template 属性。
<Window.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><ResourceDictionary Source="OfficeTab.xaml" /></ResourceDictionary.MergedDictionaries></ResourceDictionary></Window.Resources><TabControl Name="tabSteps" Template="{StaticResource OfficeTabControl}">在这之前，先把资源字典加到窗体的Reesouce里。然后再设置。然后运行软件。效果会有一些不一样。
然后要修改左侧单个标签的显示效果。通过改变模板来实现。给模板添加如下的代码
<ControlTemplate x:Key="OfficeTabControl" TargetType="{x:Type TabControl}"><ControlTemplate.Resources><Style TargetType="{x:Type TabItem}"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type TabItem}"><Grid SnapsToDevicePixels="True"><ContentPresenterName="buttonText"Margin="15,0,5,0"TextBlock.FontFamily="Calibri"TextBlock.FontSize="12pt"TextBlock.Foreground="Black"Content="{TemplateBinding Header}"VerticalAlignment="Center"/></Grid></ControlTemplate></Setter.Value></Setter></Style></ControlTemplate.Resources>然后再运行
VisualState很有意思。我们可以放在Grid里。然后设置正常状态和鼠标悬停的状态。
为了添加鼠标悬停效果，我们添加两个Borders元素。一个右边缘是灰线，另一个用在背景上。亮蓝色放在上下边缘
<Border Name="hoverShape"Height="40"Margin="0,0,1,0"SnapsToDevicePixels="True"BorderThickness="0,0,1,0"BorderBrush="LightGray"><Border BorderBrush="#FFA1B7EA"BorderThickness="0,1"Background="#FFE5EEF9"Height="40"SnapsToDevicePixels="True" /></Border>
之后，我们为VisualState创建故事板，一个是正常状态。会使得hoverShape的透明度为0.另一个是鼠标悬停的状态。透明度会变成1
<Grid SnapsToDevicePixels="True"><VisualStateManager.VisualStateGroups><VisualStateGroup Name="CommonStates"><VisualState Name="MouseOver"><Storyboard><DoubleAnimationStoryboard.TargetName="hoverShape"Storyboard.TargetProperty="Opacity"To="1"Duration="0:0:.1"/></Storyboard></VisualState><VisualState Name="Normal"><Storyboard><DoubleAnimationStoryboard.TargetName="hoverShape"Storyboard.TargetProperty="Opacity"To="0"Duration="0:0:.1"/></Storyboard></VisualState></VisualStateGroup>
之后效果如下
然后添加选中项的样式，在hoverShape 下面再添加一个Border，名字是buttonShape。通过这个我们给被选中项的上下边缘添加2个像素的黑蓝色边缘，
在 Expression Blend中打开, 使用钢笔工具绘制个你想要的路径形状即可。然后把生成的xaml代码拷些过来。
也可以直接用我的代码。。不顾我说过要怎么做了。
最终看起来应该是这样的。
<BorderName="buttonShape"Opacity="0"BorderBrush="#FF0343A6"BorderThickness="0,2"Height="40"SnapsToDevicePixels="True"><PathData="M214,108 L346,108 346.125,118.125 337.75,126.125346.375,134 346.375,143.875 214.25,144.25 z" SnapsToDevicePixels="True"Stretch="Fill"Height="40"><Path.Fill><RadialGradientBrush GradientOrigin="0.2,0.5" RadiusX="0.8" RadiusY="0.8"><GradientStop Color="#FF5FA3F6" Offset="0" /><GradientStop Color="#FF0C55B9" Offset="1" /></RadialGradientBrush></Path.Fill></Path></Border>
当你运行的时候你会发现没什么变化。我们还要定义被选中标签的VisualState
当添加如下代码的时候 添加一个VisualState组。也就是 SelectionStates ，然后给选中/为选中的状态添加行为/故事板。.这里通过修改透明度来实现一些效果
<VisualStateGroup Name="SelectionStates"><VisualState Name="Selected"><Storyboard><DoubleAnimationStoryboard.TargetName="buttonShape" Storyboard.TargetProperty="Opacity"To="1" Duration="0:0:.3"/><DoubleAnimationStoryboard.TargetName="hoverShape" Storyboard.TargetProperty="Opacity"To="0" Duration="0:0:.1"/><ColorAnimationStoryboard.TargetName="buttonText"Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"To="White" Duration="0:0:.1" /></Storyboard></VisualState><VisualState Name="Unselected"><Storyboard><DoubleAnimationStoryboard.TargetName="buttonShape"Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:.1"/><DoubleAnimationStoryboard.TargetName="hoverShape"Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:.1"/></Storyboard></VisualState></VisualStateGroup>
现在再运行会发现效果更好了
还有个小问题，就是那个陷进入的小三角形的背景颜色依然还在。通过在下面添加一个白色的形状。，并且对故事板的选中和为选中状态改变一下透明度就可以了。
<VisualStateGroup Name="SelectionStates"><VisualState Name="Selected"><Storyboard><DoubleAnimationStoryboard.TargetName="buttonBackgroundShape"Storyboard.TargetProperty="Opacity" To="1" Duration="0"/></Storyboard></VisualState><VisualState Name="Unselected"><Storyboard><DoubleAnimationStoryboard.TargetName="buttonBackgroundShape"Storyboard.TargetProperty="Opacity" To="0" Duration="0"/></Storyboard></VisualState></VisualStateGroup>
最终效果如下:
源代码地址： OfficeTab.xaml (8.37 KB).
许可
本文包括源代码和文件在CPOL下授权
原文地址：Building-a-control-template-style-for-the-tabContr
著作权声明：本文由http://leaver.me 翻译，欢迎转载分享。请尊重作者劳动，转载时保留该声明和作者博客链接，谢谢！
转载于:https://www.cnblogs.com/lazycoding/archive/2012/10/17/2727170.html
[原译]模拟Office2010文件菜单的TabControl模板相关推荐
- type=file的未选择任何文件修改_Excel基础—文件菜单之创建保存
点赞再看,养成习惯:勤能补拙是良训,一分辛劳一分才. 微信搜索[亦心Excel]关注这个不一样的自媒体人. 本文GitHub https://github.com/hugogoos/Excel 已收录 ...
- 新浪云sae怎么上传php代码,如何在新浪SAE中上传文件和在线修改模板
我们在前面讲述在新浪SAE中如何建站,今天我们来详解如何上传文件.新浪SAE中是不允许用FTP来上传的.我们只能用它提供的专用工具,我们以SVN为例来讲述. 首先,我们要下载一个SVN工具. 下载安装 ...
- GIMP学习_菜单01：文件菜单
操作系统:win10 GIMP版本:2.10.22 目录 一.新建文件 模板: 图像大小 高级选项 二.作为图层打开 三.保存/另存为/保存为副本 四.恢复 五.导出/导出为 文件菜单里各项和常见的软 ...
- iframe ajax上传,ajax--iframe模拟ajax文件上传效果
js无权读取本地的文件,so不能上传文件但是 有这几种方法 1 iframe伪装 jquery-uploaded-file 2 swf插件 (这个不讲,是一个单独的软件 3 html5 iframe模 ...
- pycharm更改模板_pycharm怎样给文件编辑统一的模板?
为了使服务器能够快速响应运行的文件,在进行文件编辑的时模板一致既能够节省时间,还能加快我们打开的速度.但是要是逐条修改文件的模板信息是一个很大的任务量,我们学习python就是为了简化这种批量重复的工 ...
- pycharm 修改新建文件时的头部模板
pycharm 修改新建文件时的头部模板 默认为__author__='...' [省略号是默认你的计算机名] 修改这个作者名的步骤: 依次点击:File->Settings->Edito ...
- 计算机word基础知识菜单,Word试卷模板_电脑基础知识_IT/计算机_资料
C. "格式"菜单中的"制表位"命令D. "格式"菜单中的"字体"命令 )计算机基础一.填空题(每空 1 分,共 20 ...
- Django框架(8.Django中的模板文件的使用和模板变量的简单使用）
为什么使用模板 通过视图可以给用户返回一些字符串等等, 那如何向请求者返回一个漂亮的页面呢? 肯定需要用到html.css,如果想要更炫的效果还要加入js,问题来了,这么一堆字段串全都写到视图中,作为 ...
- 不能装载文档控件。请在检查浏览器的选项中检查浏览器的安全设置_Excel基础—文件菜单之设置信息...
点赞再看,养成习惯 少壮不努力,老大徒伤悲 由于文件菜单就有很多东西要学,因此文件菜单我们将分为三章来学.而本章将主要学习设置,先上思维导图,先了解一下有哪些东西要学.打了红色五角星的是我们着重要关注 ...
最新文章
- python 中文识别 不用tesseract_Python——验证码识别 Pillow + tesseract-ocr
- Objective-C基础笔记（3）OC的内存管理
- Springboot版本+ Spring Framework版本 + jdk版本 + Maven版本
- 【python数字信号处理】——线性卷积
- 页面返回顶部（方法比较）
- openfeign远程调用不起作用解决_使用Spring Boot的spring.factories进行注入---SpringCloud Alibaba_若依微服务框架改造---工作笔记007
- 用汇编的眼光看C++（之 总结篇）
- 解决utf8编码的php生成csv打开乱码的问题
- 我的blog终于开通了!
- 基于OpenGL的贪吃蛇游戏设计与实现
- love2d 1. 入门
- 今日头条内推码URQVEYM社招，校招，实习应有尽有
- 为什么技术开发者应该读一读《浪潮之巅》
- 微信加密某一个人私聊？微信私密聊天
- 时间都哪去了--电视连续剧《老牛家的战争》插曲【视频】
- K8s------Metallb实现Load Balancer服务
- 两种常用的全参考图像质量评价指标——峰值信噪比（PSNR）和结构相似性（SSIM）
- winform一个小游戏，赛马
- 微信聊天语音怎么转发？轻松易懂，快速学会
- 没有选择的选择才能坚持和专注