这是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 &amp; Send"><TextBlock>Save &amp; 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模板相关推荐

  1. type=file的未选择任何文件修改_Excel基础—文件菜单之创建保存

    点赞再看,养成习惯:勤能补拙是良训,一分辛劳一分才. 微信搜索[亦心Excel]关注这个不一样的自媒体人. 本文GitHub https://github.com/hugogoos/Excel 已收录 ...

  2. 新浪云sae怎么上传php代码,如何在新浪SAE中上传文件和在线修改模板

    我们在前面讲述在新浪SAE中如何建站,今天我们来详解如何上传文件.新浪SAE中是不允许用FTP来上传的.我们只能用它提供的专用工具,我们以SVN为例来讲述. 首先,我们要下载一个SVN工具. 下载安装 ...

  3. GIMP学习_菜单01：文件菜单

    操作系统:win10 GIMP版本:2.10.22 目录 一.新建文件 模板: 图像大小 高级选项 二.作为图层打开 三.保存/另存为/保存为副本 四.恢复 五.导出/导出为 文件菜单里各项和常见的软 ...

  4. iframe ajax上传,ajax--iframe模拟ajax文件上传效果

    js无权读取本地的文件,so不能上传文件但是 有这几种方法 1 iframe伪装 jquery-uploaded-file 2 swf插件 (这个不讲,是一个单独的软件 3 html5 iframe模 ...

  5. pycharm更改模板_pycharm怎样给文件编辑统一的模板?

    为了使服务器能够快速响应运行的文件,在进行文件编辑的时模板一致既能够节省时间,还能加快我们打开的速度.但是要是逐条修改文件的模板信息是一个很大的任务量,我们学习python就是为了简化这种批量重复的工 ...

  6. pycharm 修改新建文件时的头部模板

    pycharm 修改新建文件时的头部模板 默认为__author__='...' [省略号是默认你的计算机名] 修改这个作者名的步骤: 依次点击:File->Settings->Edito ...

  7. 计算机word基础知识菜单,Word试卷模板_电脑基础知识_IT/计算机_资料

    C. "格式"菜单中的"制表位"命令D. "格式"菜单中的"字体"命令 )计算机基础一.填空题(每空 1 分,共 20 ...

  8. Django框架(8.Django中的模板文件的使用和模板变量的简单使用）

    为什么使用模板 通过视图可以给用户返回一些字符串等等, 那如何向请求者返回一个漂亮的页面呢? 肯定需要用到html.css,如果想要更炫的效果还要加入js,问题来了,这么一堆字段串全都写到视图中,作为 ...

  9. 不能装载文档控件。请在检查浏览器的选项中检查浏览器的安全设置_Excel基础—文件菜单之设置信息...

    点赞再看,养成习惯 少壮不努力,老大徒伤悲 由于文件菜单就有很多东西要学,因此文件菜单我们将分为三章来学.而本章将主要学习设置,先上思维导图,先了解一下有哪些东西要学.打了红色五角星的是我们着重要关注 ...

最新文章

  1. 漫画：你真的懂Github吗？
  2. 九、springboot整合rabbitMQ
  3. 分析USB平台设备模型框架(1)
  4. 你真的了解软件测试行业吗？
  5. mysql数据库备份心得
  6. 获取outlook 会议_如何仅在Microsoft Outlook中仅获取您关注的电子邮件的通知
  7. 如何使用Java 5 Executor框架创建线程池
  8. python中is和 的区别_Python中is和==的区别
  9. 打破双亲委派么,怎么打破_打破它。 然后告诉我们您是如何打破它的。
  10. day1:作业 编写登录接口并画出相应的流程图
  11. Java中string中hashcode_Java String中的hashCode实现
  12. Latex插入项目符号和编号{itemize}和{enumerate}
  13. pc 页面在移动端怎么获取放大倍数、_逆冬：移动端排名应该怎么做？两种匹配移动端实战排名干货分享！...
  14. 1 常用邮箱SMTP/POP3地址及端口
  15. oracle簇详解,Oracle 簇的使用详解
  16. html 图片上面显示文字,Html 让文字显示在图片的上面
  17. GoogleHacking
  18. 开发人员面试62到经典题
  19. UEFI开发探索94 – 迷宫小游戏
  20. Andoid扫码枪监听

热门文章

  1. LiLi-OM: 走向高性能固态激光雷达惯性里程计和建图系统
  2. Qt Speech来到Qt 6.4
  3. java中如何删除文件或清除文件夹下的所有文件
  4. eclipse java快捷键_Eclipse 常用快捷键-java
  5. 设计模式 行为型模式 -- 备忘录模式 具体实例：游戏挑战BOSS
  6. 软件设计师：01-计算机组成原理与体系结构
  7. 手写spring简单实现转账--体会核心ioc和aop
  8. 什么是 HTTP 协议
  9. 移动互联网引发大融合与大变革
  10. opencv-python:读取视频，不改变视频分辨率修改视频帧率