Silverlight中文教程第七部分：使用控件模板定制控件的观感

这是8个系列教程的第七部分&＃xff0c;这系列示范如何使用Silverlight 2的Beta1版本建造一个简单的Digg客户端应用。这些教程旨在按顺序阅读&＃xff0c;帮着解释Silverlight的一些核心编程概念。

如何定制控件的观感&＃xff08;Look and Feel&＃xff09;

WPF和Silverlight编程模型中一个强大无比的功能&＃xff0c;就是能够完全定制所使用的控件的观感&＃xff08;Look and Feel &＃xff09;。这允许开发人员和设计师对控件的界面以微妙和戏剧性的方式进行精雕细琢&＃xff0c;促成无比的灵活性以创建出恰如所愿的用户体验。

在这篇教程里&＃xff0c;我们将看一下你可以定制控件的几种方式&＃xff0c;然后在结尾使用这些技术对我们的Digg应用的用户界面润色一下。

定制控件的内容

在这个系列的第一部分里&＃xff0c;我们在页面上加了一个简单的按钮控件&＃xff0c;示范了如何把它的内容设成一个自定义的“Push Me!”文字字符串。然后我们连接了一个Click事件处理函数&＃xff0c;在它被点击时执行一些代码&＃xff1a;

这导致按钮在浏览器里象下面这么显示&＃xff1a;

关于按钮控件&＃xff0c;也许会让你感到惊奇的一件事情是&＃xff0c;它的Content属性&＃xff0c;不必是象“Push Me!”这样简单的字符串。实际上&＃xff0c;我们可以把Content属性设成我们想要的任何形状或控件序列&＃xff1a;

譬如&＃xff0c;我们可以嵌入一个StackPanel&＃xff0c;内含 和 控件&＃xff1a;

这会导致我们的按钮在运行时看上去会象下面这样。注意&＃xff0c;它依然保留同样的功能行为&＃xff08;按它的话&＃xff0c;按钮会陷下去&＃xff0c;点击事件处理函数也会象以前一样触发&＃xff09;&＃xff1a;

我们也可以使用形状控件&＃xff08;象下面这样的Ellipse控件&＃xff09;来在按钮里面创建自定义的矢量图像&＃xff1a;

注意上面我是怎么使用一个偏移RadialGradientBrush来加一个非常好看的反射式光泽来填充Ellipse控件的&＃xff1a;

我们甚至可以搞些古怪&＃xff0c;在按钮内嵌入可交互的象日历这样的控件&＃xff1a;

在上面的例子中&＃xff0c;日历控件是完全可以交互的&＃xff0c;意味着终端用户可以前后翻月历&＃xff0c;在日历里选择一个日期&＃xff0c;然后按其中的按钮&＃xff0c;触发Click事件处理函数&＃xff1a;&＃xff08;注&＃xff1a;我不清楚这是否会是一个好的用户体验&＃xff0c;但它确实展示了你所能做之灵活性&＃xff01;&＃xff09;

我上面概述的这些类型的内容定制场景不仅对按钮控件有效&＃xff0c;同样地对其他继承自ContentControl基类的其他控件也工作。

使用控件模板定制控件

为Silverlight 和 WPF所用的控件模型&＃xff0c;所允许之定制&＃xff0c;远远超出控件内部的内容。它还允许你用你想要的任何东西完全替换控件的视觉树&＃xff08;visual tree&＃xff09;&＃xff0c;同时还保持控件的同样行为。

例如&＃xff0c;我们不想要我们的按钮拥有一个默认的长方形的按钮的外观&＃xff0c;而是要它们有一个象下面这样的自定义的圆形按钮外观&＃xff1a;

我们可以这么做&＃xff0c;在App.xaml文件中创建一个“RoundButton”样式&＃xff0c;在其中&＃xff0c;我们将改写按钮的Template属性&＃xff0c;提供一个内含一个Ellipse控件和一个TextBlock的ControlTemplate来替换按钮的默认长方形外观&＃xff1a;

然后我们可以让引用这个Style资源来使用这个“RoundButton”的观感&＃xff1a;

在控件模板中融入内容

你也许会注意到一件事情&＃xff0c;在上面的“RoundButton”控件模板中&＃xff0c;按钮的大小&＃xff0c;以及显示在其中的内容&＃xff0c;都是写死的&＃xff08;总是“Push Me!”&＃xff09;。

好消息是&＃xff0c;WPF 和 Silverlight也能让我们对这些设置进行定制。我们可以在控件模板中通过使用 {TemplateBinding ControlProperty} 的标识扩展句法 &＃xff08;markup extension syntax&＃xff09; 来绑定到控件的属性来实现。这允许我们的控件模板随着外部开发人员设置在控件的属性而改变&＃xff1a;

注意上面&＃xff0c;不是加 控件来显示内容&＃xff0c;而是使用控件。那会允许我们不光让按钮显示文字字符串&＃xff0c;而且可以显示任何自定义的内容&＃xff08;就象我们在本教程早先时候做的那样&＃xff09;。

然后&＃xff0c;我们可以在下面的三个按钮上使用上面的Style&＃xff08;每个按钮都有不同的内容和属性设置&＃xff09;&＃xff1a;

上面的按钮然后就会象下面这样显示&＃xff08;对了&＃xff0c;缩小的日历控件还支持翻页和日期选择&＃xff01;&＃xff09;&＃xff1a;

如果我们想进一步&＃xff0c;我们还可以往ControlTemplate中加故事板动画&＃xff08;来处理象“hover&＃xff08;悬浮&＃xff09;”,"focus&＃xff08;得到焦点&＃xff09;","pushed&＃xff08;按下&＃xff09;"这样的按钮状态&＃xff09;。这个能力允许我们创建非常优美的用户交互场景&＃xff0c;同时还能促成HTML中不能实现的场景。

在应用中操作控件的开发人员可以对所有这些样式和控件交互定制保持一无所知&＃xff0c;他们还可以依然如故地处理控件的事件和操作控件的对象模型&＃xff0c;而让设计师另外使用样式和模板对控件的观感进行精雕细琢和定制。

对我们的Digg应用进行润色&＃xff08;Polishing up&＃xff09;

至此&＃xff0c;我们讨论了控件模板工作原理的一些基础知识&＃xff0c;让我们来在几个地方用它们来给我们的Digg应用的UI加些点缀。

目前&＃xff0c;应用中一个明显需要一些加工的地方是我们用户控件的“Close”&＃xff08;关闭&＃xff09;按钮&＃xff1a;

好消息是&＃xff0c;这对我们&＃xff08;或者跟我们协作的设计师&＃xff09;来说很容易修正。我们可以在App.xaml文件中的 "CloseButton" 样式中加一个ControlTemplate&＃xff0c;加一些自定义的矢量形状来提供一个比较好看的关闭按钮&＃xff08;注&＃xff1a;比我更称职的设计师大概还会加悬浮和动画行为到矢量图像形状上去&＃xff0c;让它更好看些&＃xff09;&＃xff1a;

重新运行我们的应用的话&＃xff0c;按钮看上去象下图&＃xff1a;

我们应用中我认为应该润色的第二个地方是ListBox的外圈界面。如果你仔细看的话&＃xff0c;你可以看到Beta1版本中的ListBox有一个嵌套的边框&＃xff0c;作为它的默认外观&＃xff08;注&＃xff1a;我们还没最后决定要发布的默认皮肤&＃xff0c;所以在最终版之前&＃xff0c;这非常有可能会改变&＃xff09;&＃xff1a;

我们可以除去这个&＃xff0c;通过定制它的控件模板来给与ListBox一个平的边框&＃xff08;flat border&＃xff09;。下面是一个以自定义模板样式化了的&＃xff0c;有平的边框的ListBox &＃xff1a;

注意我们是如何除去ListBox的边框控件的&＃xff0c;我们只用了Silverlight中的控件&＃xff08;该控件允许其中任何内容做卷动&＃xff09;&＃xff0c;将一个控件嵌入其中&＃xff0c;该控件负责ListBox中实际条目的显示&＃xff08;它使用了我们在第四部分中创建的 来显示这些条目&＃xff09;。

下面是它现在给与我们的List更为平直的外观&＃xff1a;

比较酷的是&＃xff0c;为了做这些观感的改动&＃xff0c;我们不用更改应用中的任何代码&＃xff0c;或者修改实际的控件的XAML标识。这种代码、设计的分离能在Silverlight和WPF应用中促进开发人员和设计师之间的流畅的工作流程。Expression Blend 和所有的 Expression Studio产品把这些控件设计功能提到了又一个高度&＃xff0c;将提供方便这种定制的丰富的设计师工具集。

下一步

至此&＃xff0c;我们完成了Digg应用在Silverlight中的实现。

最后一步&＃xff0c;是实现一个桌面应用的版本。好消息是&＃xff0c;做起来并不难&＃xff0c;因为Silverlight是完整WPF和.NET框架的一个子集&＃xff0c;所以概念&＃xff0c;代码和内容都很容易转移过去的。

想看是如何实现的&＃xff0c;让我们跳到下一个教程&＃xff1a;《使用WPF创建一个Digg桌面应用》。