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