一步一步学Silverlight 2系列(8):使用样式封装控件观感-阿里云开发者社区

开发者社区> 技术小甜> 正文

一步一步学Silverlight 2系列(8):使用样式封装控件观感

简介:
+关注继续查看

概述

Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython,对JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步学Silverlight 2系列》文章带您快速进入Silverlight 2开发。
本文为系列文章第八篇,主要介绍在Silverlight中使用Style元素封装控件观感
Silverlight 支持一种 Style 机制,它允许我们把控件的属性值封装成可重用的资源。我们可以把这些样式声明保存在独立于页面的其他文件中,然后就可以在一个应用程序中跨控件和页面重用(甚至跨多个应用程序重用)。在做一些基本定制的场景下,概念上类似于在 HTML 中重用 CSS。

内联样式

内联样式这个概念其实跟我们在HTML中指定元素的样式一样,在XAML中通过属性来设置,如下面这段XAML,我们添加了两个按钮,并在其中设置字体的样式:
<Canvas Background="#46461F">
    <Button Width="200" Height="60" Background="Red"
            Canvas.Top="90" Canvas.Left="30" Content="提 交"
            FontFamily="微软雅黑"
            FontSize="24"
            FontWeight="Bold"
            Foreground="Green"/>
    
    <Button Width="200" Height="60" Background="Red"
            Canvas.Top="90" Canvas.Left="260" Content="取 消"
            FontFamily="微软雅黑"
            FontSize="24"
            FontWeight="Bold"
            Foreground="Red"/>
</Canvas>
运行后显示效果如下:
 
使用内联样式不是一种很好的做法,样式不可重用,页面XAML代码混乱等,这些缺点其实类似于在HTML中直接设置元素的样式。一种推荐的方式是应该使用全局的样式。

全局样式

为了更好使样式能够重用,并且减少XAML中的代码,推荐使用全局样式。在App.xaml中定义两个样式
<Application.Resources>
    <Style x:Key="button1" TargetType="Button">
        <Setter Property="FontFamily" Value="微软雅黑"></Setter>
        <Setter Property="FontSize" Value="24"></Setter>
        <Setter Property="Foreground" Value="Green"></Setter>
        <Setter Property="Background" Value="Red"></Setter>
    </Style>
    <Style x:Key="button2" TargetType="Button">
        <Setter Property="FontFamily" Value="微软雅黑"></Setter>
        <Setter Property="FontSize" Value="24"></Setter>
        <Setter Property="Foreground" Value="Red"></Setter>
        <Setter Property="Background" Value="Red"></Setter>
    </Style>
</Application.Resources>
通过Style元素指定,需要设置唯一的一个Key,类似于CSS中的类名或者ASP.NET 2.0中Skin功能,并且通过TargetType指定该样式将使用在哪类控件上,每一个属性都用Setter来指定。在XAML中,通过StaticResource标记句法来指定具体的样式:
<Canvas Background="#46461F">
    <Button Width="200" Height="60"
            Canvas.Top="90" Canvas.Left="30" Content="提 交"
            Style="{StaticResource button1}"/>
    
    <Button Width="200" Height="60"
            Canvas.Top="90" Canvas.Left="260" Content="取 消"
            Style="{StaticResource button2}"/>
</Canvas>
相比较上面的XAML文件,现在代码已经干净多了,这使得我们可以只专注于应用程序的业务,而无需考虑它的外观(在Beta1中似乎有些属性设置后会报错)。运行后效果如下:
 

样式重写

定义了全局样式之后,样式能够被重写,即内联样式的优先级高于全局样式。如上面的示例中,我们在XAML中通过属性Foreground指定第一个按钮的前景色为蓝色:
<Canvas Background="#46461F">
    <Button Width="200" Height="60"
            Canvas.Top="90" Canvas.Left="30" Content="提 交"
            Style="{StaticResource button1}"
            Foreground="Blue"
            />
    
    <Button Width="200" Height="60"
            Canvas.Top="90" Canvas.Left="260" Content="取 消"
            Style="{StaticResource button2}"/>
</Canvas>
尽管我们在全局样式中指定第一个按钮的前景色为绿色,通过内联样式重写后,它显示为蓝色:
 

结束语

本文简单的介绍了Silverlight 2中使用样式来封装控件观感,对任何控件都可以使用全局样式进行封装。


















本文转自lihuijun51CTO博客,原文链接:http://blog.51cto.com/terrylee/67240 ,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
如何在Silverlight4中使用摄像头
Silverlight4终于支持摄像头和麦克风了,网页上的视频聊天将不再是Flash的专利! 今天在一个老外的网站上看到webCam的使用示例(http://elegantcode.com/2009/11/20/silverlight-4-webcam-a-quick-glance/),非常简单,...
659 0
Silverlight3.0 起步(一)——环境
开发环境:VS2008 sp1 如果要开发silverlight,需要安装3部分: 1 SDK 用来编译和生成所需要的sl控件的工具 2 Tools 3 sl运行时插件,用于在浏览器中浏览sl,即在浏览器中使用silverlight控件   我在安装的过程中,先单独安装了第三部分,即运行时。
818 0
+关注
10146
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《Nacos架构&原理》
立即下载
《看见新力量:二》电子书
立即下载
云上自动化运维(CloudOps)白皮书
立即下载