自定义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设置为无色就可以了,看一下我们的成果:

选项卡控件TabControl

判断选中的选项卡(TabPage) (1)用TabControl 的SelectedTab属性 if(tabControl1.SelectedTab == tabPage2) (2)用TabCo...
  • jixiaomeng821
  • jixiaomeng821
  • 2014年04月24日 16:07
  • 2075

C#界面设计之TabControl控件的使用

还是先上效果图吧! 没有触发响应事件,下面给出控件的标注信息代码:namespace TabControls { partial class Form1 { /...
  • chongshangyunxiao321
  • chongshangyunxiao321
  • 2016年04月21日 15:47
  • 5554

几个DONET扩展控件FlatTabControl+Tri-State TreeView control

  • 2009年10月20日 22:56
  • 1.38MB
  • 下载

TabControl扩展美化控件

  • 2011年10月31日 10:07
  • 185KB
  • 下载

MFC之Tab Control控件简单使用

在MFC当中使用Tab Control控件切换不同的界面,使用起来会复杂一些,至少是比Qt中的Tab Widget复杂得多。我接下来会以一个MFC对话框应用程序为例子,说明Tab Control控件的...
  • u010780613
  • u010780613
  • 2016年12月26日 10:15
  • 2571

C#自定义控件之-TabControl美化

使用C#开发了很多桌面应用程序,一直苦恼于系统自带的控件太丑,网上资源又太乱,因此为了以后自己使用和方便他人从这篇博文开始,陆续把自己收集整理的各类控件分享给大家一块学习,有不对的地方还请大家指出。不...
  • lcj401175209
  • lcj401175209
  • 2016年10月27日 11:18
  • 6311

.NET 重绘TabControl

    在www.codeproject.com 看到一个关于重绘tabControl的例了,觉得挺有意思的。照着修改一下,有一些东西自己并没有去改,使得代码很短,同时也有一些功能并没实现的。具休可到...
  • jackydream
  • jackydream
  • 2008年06月15日 12:58
  • 3624

MFC Tabcontrol 标签控件美化

  • 2017年03月29日 15:33
  • 17KB
  • 下载

TabControl控件和TabPage的使用

TabControl控件和TabPage                    TabControl控件搞了两天才弄会,发个简单教程  TabControl控件可以支持在一个控件里...
  • u011555996
  • u011555996
  • 2016年11月17日 14:17
  • 3975

C# TabConTrol控件背景颜色

C# TabConTrol控件背景颜色问题 2011-11-13      0 个评论       收藏    我要投稿 大家肯定都遇到过这样的问题,在做WinForm项...
  • kasama1953
  • kasama1953
  • 2016年06月01日 09:22
  • 334
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:自定义TabControl控件模版样式
举报原因:
原因补充:

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