首页 / 软件开发 / C# / C#开发WPF/Silverlight动画及游戏系列教程（Game Tutorial）：（四十四）

C#开发WPF/Silverlight动画及游戏系列教程（Game Tutorial）：（四十四）2010-02-23 博客园 深蓝色右手C#开发WPF/Silverlight动画及游戏系列教程（Game Tutorial）：（四十四）制作主角属性面板及加点器

游戏中会使用大量的菜单面板，而这些面板往往都带有选项卡。如果用Silverlight工具中的TabControl，则需要通过复杂的xaml重写模板来实现自定义样式，这一点时常让开发者头疼，毕竟界面的东西应该属于美工的范畴，这也是我所发现在目前Silverlight中唯一一处只能通过xaml而无法用代码实现的地方。当然，如果您对此特别感兴趣，同样可以到http://www.codeplex.com/Silverlight中下载最新的开源工具源码，其中的示例项目中有非常详细的模板重写案例。本节，我将通过创建用户控件的方式来创建自定义的TabControl和RepeatButton，实现主角属性面板及其中的属性加点器。

首先，我创建一个QXTabControl用户控件，该控件界面可以很简单，只需要包含一个头和一个身体即可：

<UserControl x:Class="QXGameEngine.Control.QXTabControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas>
<StackPanel x:Name="Head"/>
<ContentPresenter x:Name="Body"/>
</Canvas>
</UserControl>

Head 用做TabItem的容器，作为StackPanel类型控件，它可以对内部控件进行横排或竖排，从而基本满足大多数情况需要；而Body是ContentPresenter类型，在第四十二节中我曾提及过它，相当于一个万用变身控件，将它作为选项卡的身体部分再合适不过了。当我们点击不同的选项卡时，将不同的面板控件作为值赋予给Body，轻松实现高度自由的选项内容变换。

那么用什么控件来替代TabItem呢？在《剑侠世界》中，选项卡做得别具特色，不光在默认情况下鼠标进入与离开会呈现不同的图片；当被点中后，同样实现另外的两张图片间的切换。这样的效果相当精致，而我们又该如何将它实现呢？此时，不得不想到我们可爱的QXIcon控件，我为它添加了新的类型：IconTypes.HitModes，定义很简单，根据该控件是否被点击从而对4张图片进行相应切换：

case IconTypes.HitModes:
this.MouseEnter += （s, e） => { Container.Background = Hit ？ HitNewBodySource : NewSource; };
this.MouseLeave += （s, e） => { Container.Background = Hit ？ HitBodySource : _BodySource; };
this.MouseLeftButtonDown += （s, e） => { Hit = Hit ？ false : true; };
break;

实现后的效果如下图：