自定义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,1,0;并加上圆角CornerRadius: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,0;CornerRadius: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设置为无色就可以了,看一下我们的成果:

相关文章

如何在Silverlight4(XAML)中绑定IsEnabled属性?我试过简单的...
我正在编写我的第一个vb.net应用程序(但我也会在这里标记c#,...
ProcessFile()是在UIThread上运行还是在单独的线程上运行.如...
我从同行那里听说,对sharepoint的了解对职业生涯有益.我们不...
我正在尝试保存一个类我的类对象的集合.我收到一个错误说明:...
我需要根据Silverlight中的某些配置值设置给定控件的Style.我...