自定义TabControl控件模版样式

转载 2012年06月11日 10:30:27

示例操作:

     上面介绍的几点是我觉得Blend入门应该知道的最基本的东西,当然不能写的太详细,需要你去操作体会实践,我也不可能写出所有细节,每一个操作都还有一些更细的东西和功能,可以自己去摸索,我们下面就来从头实现本文提到的示例:

     1. 打开Blend 4,新建MyTabcontrol项目,项目类型Silverlight Application + WebSite

     2. 添加一个TabControl到MainPage控件中,并设置MainPage背景为黑色

     3. 选中TabControl控件,在Properties面板设置如下,并这个时候TabControl呈现如图所示外观:

               4. 右键选择TabControl—》Edit Template—》Edit a Copy,这个时候会看到如下图,删掉其中的后面三项,只留下TemplateTop(后面三项是说Tab分别在下面,左边和右边的情形,我们这里Tabs在上边,其他三个用不着,你也可以选择其他的布局):

 

  5. 选择TemplateTop,可以看到其是一个Grid控件,共有2行,第一行是Tabs,第二行就是下面的现实面板。修改Properties面板中RowDefinitions ,将Grid的第一行高度为50px;

     6.  展开TemplateTop,选中TabPanelTop,这就是定义TabControl控件上面Tabs部分的背景的,在Properties面板中设置Background为:#FFBBD7FA(头部的设置)
     7. 选中下面的Border,将Background Reset: #FFB1CBEB;BorderBrush:#FFE4E4E4;BorderThickness:0,0,1,0;并加上圆角CornerRadius:0,0,10,10;(下面整个框的设置)

     8,. 选中ContentTop,加上Margin:10。这个时候看起来是这个样子:(增加下面框的边的宽度)

 

9. 下面我们来编辑TabItem的模板。

          回到MainPage的视图,展开TabControl,选择第一个TabItem,调出其面板(右键选择TabItem—>Edit Template—>Edit a Copy)。进入TabItem面板之后看到有许多部件,删掉其他的只留下三个:TemplateTopSelected,TemplTopUnSelected,FocusVisualElement,原因和前面的一样,我们的Tab只会在顶端,你可以自己去修改其他样式。

           接下来的,TemplateTopSelected就是定义选择状态的外观,TemplateTopUnSelected就是定义没有选择的外观。

     10. 在States面板,选中base,在Objects and TimeLine面板选中Root元素,在属性面板修改高度为50px;(使头部里的高度和外面的高度一些样高)

     11. 选中Selected状态,开始录制

     12. 展开TemplateTopSelected,将border的Margin,BorderThickness,CornerRadius都设置为0,Background设置为:#FFBBD7FA

     13. 选择border1元素,设置参数,BorderThickness:1,1,1,0;CornerRadius:10,10,10,0;Margin:2,2,5,0;Background和BorderBrush都设置为纯白色。

     14. 选择HeaderTopSelected元素:修改字体大小样式至以下的样子:这个时候看起来是这样:

 

  15. 接下来我们修改TemplateTopUnSelected的样子,它是处于UnSelected的状态,所以我们在States面板选中UnSelected状态,开始录制。注意这个时候找到TabControl控件中的两个TabItem控件,将第一个TabItem的Style="{StaticResource TabItemStyle1}"样式复制给第二个。


     16. 对着前面的步骤,修改TemplateTopUnSelected下面的各个元素,将Background和BorderBrush都设置为背景色和无色,使之呈现如下样式:

 

17. 大功告成,就是还有一点小小的瑕疵,就是在选中的时候有个讨厌的边框,这个时候将FocusVisualTop的BorderBrush设置为无色就可以了,看一下我们的成果:

相关文章推荐

C#_ACCP_Windows_创建多文档界面应用程序MDI

创建多文档界面应用程序MDI 什么是多文档界面应用程序 (MDI) : 首先介绍下什么是单文档界面应用程序 我们使用的 Windows 自带的记事本 在一个窗口中只能 打开一个文件 如果想要打开...

C#+三层+会员管理系统源码供大家学习参考,有不足之处还请指出

C#+三层+会员管理系统源码 本打算上51aspx的   但是他们说我做的太简单..不能放商用只能放积分区,那我还是拿出来共享给大家 源码描述: 一、源码描述       ...

美化自定义TabControl控件

  • 2013年01月03日 20:01
  • 130KB
  • 下载

c#TabControl控件左边选项卡左边显示,文字横向显示

c#TabControl控件左边选项卡左边显示,文字横向显示 2015-12-17 10:50 259人阅读 评论(0) 收藏 举报  分类: c#开发(6)  ...

VC中TabControl控件使用方法(转载)

最近需要用Qt做上位机,觉得Qt和之前用过的VC还是比较熟的,所以首先熟悉一下以后要用在Qt下的控件,另外也熟悉一下有很久没有摸过的VC。下面我们来看一下使用步骤。1. 新建一个MFC工程,取名xyT...
  • GuiH168
  • GuiH168
  • 2011年04月16日 15:40
  • 1977

VB 实现VC TAbControl控件

VB实现VC TabControl控件   新建一个工程文件Project1,     在左侧工具栏中点右键   在出现的选项中点“Components”,在打开窗口中找到“Cont...

c#重写TabControl控件实现关闭按钮

1.c#里面的TabControl控件没有关闭按钮,而且很难看。 2.有一些已经做好的第三方控件,但是收费。 3.由于我的故障树推理诊断项目在绘图的时候允许同时打开多个文档进行操作,就要实现类似于...
  • fuxingwe
  • fuxingwe
  • 2013年03月31日 12:54
  • 20535

C#窗体TabControl控件美化版源代码

  • 2012年04月17日 19:16
  • 137KB
  • 下载

Tabcontrol控件

  • 2011年07月28日 16:29
  • 30KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:自定义TabControl控件模版样式
举报原因:
原因补充:

(最多只允许输入30个字)