自定义TabControl控件模版样式

示例操作:

     上面介绍的几点是我觉得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设置为无色就可以了,看一下我们的成果:

阅读更多
个人分类: Expression Blend
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

自定义TabControl控件模版样式

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭