WEB开发网
开发学院图形图像Flash 使用 Style 元素更好地封装观感 阅读

使用 Style 元素更好地封装观感

 2008-10-03 11:31:23 来源:WEB开发网   
核心提示:这是8个系列教程的第4部分,这个系列示范如何使用 Silverlight 2 的 Beta1 版本来创建一个简单的 Digg 客户端应用,使用 Style 元素更好地封装观感,这些教程请依次阅读,将有助于您理解 Silverlight 的一些核心编程概念,将 Page.xaml 文件中的标签进行了一定的清理,让我们更进

这是8个系列教程的第4部分,这个系列示范如何使用 Silverlight 2 的 Beta1 版本来创建一个简单的 Digg 客户端应用。这些教程请依次阅读,将有助于您理解 Silverlight 的一些核心编程概念。

使用 Style 元素更好地封装观感(Look and Feel)

WPF 和 Silverlight 支持一种 Style 机制,它允许我们把控件的属性值封装成可重用的资源。我们可以把这些样式声明保存在独立于页面的其他文件中,然后就可以在一个应用程序中跨控件和页面重用 (甚至跨多个应用程序重用)。在做一些基本定制的场景下,概念上类似于在 HTML 中重用 CSS.

注:除了定义基本属性设置(Color, Font, Size, Margins 等),WPF 和 Silverlight 里的样式还可以被用来定义和重用控件模板(Control Templates) - 控件模板可以带来超级丰富的皮肤功能,以及改变控件结构的功能(并支持目前 HTML 中的 CSS 做不到的定制场景)。我会在这个系列的第7部分讨论控件模板。

对我们的 Digg 例程而言,我们会在项目的 App.xaml 文件中定义样式。这使得该样式可以在整个应用程序中,被跨页面、跨控件地重用:

使用 Style 元素更好地封装观感

首先让我们来为 Digg 页面的 <Border>控件(以及其中的<TextBlock> 标题)封装样式:

使用 Style 元素更好地封装观感

使用 Style 元素更好地封装观感

我们可以在 App.xaml 文件中,用下列标签来创建两个 Style 元素,分别封装 <Border> 和 <TextBlock> 的设置信息,这些设置在前面是内联定义的:

使用 Style 元素更好地封装观感

注意上述代码中,我们是如何为每个 Style 元素赋予一个唯一的 "Key" 值的。接下来我们就可以更新我们的 <Border>> 和 <TextBlock> 控件,让它们用这些 keys 来引用对应的样式定义。我们会使用一种叫做“标签扩展”(markup extensions) 的 XAML 特性来完成它。标签扩展用于非字面量的值需要被设置时(另一个适用场景是绑定表达式)。

使用 Style 元素更好地封装观感

我们还可以对 Page.xaml 文件中的其它控件也做类似的分离样式的处理,这样做之后,文件内容会变成类似这样:

使用 Style 元素更好地封装观感

用这种方式封装样式设定,可以让开发者更好的关注应用程序的行为语义,并且还可以让我们跨控件/页面的重用样式。

注:Beta1 中需要注意的一个问题是,当你输错样式名称和属性定义时,其错误信息不是很清楚(它会引发异常,但不告诉哪里设置不对)。这会在 Beta2 中得到改进。同时,如果你在加载样式时看到错误消息,请一定仔细查看拼写错误。

下一步

现在我们已经通过 Style 引用,将 Page.xaml 文件中的标签进行了一定的清理。让我们更进一步来自定义我们的故事数据的外观。

您可以跳到下一篇教程以了解具体方法: 《使用 ListBox 和 Databinding 来显示列表数据》。

出处:http://blog.joycode.com/scottgu/

【原文地址】Silverlight Tutorial Part 4: Using Style Elements to Better Encapsulate Look and Feel

Tags:使用 Style 元素

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接