乱弹琴 Silverlight 2.0 (5) 样式(Style)

前言：Silverlight 2.0 Beta1 已经发布，加入了许多激动人心的新特性：WPF UI 框架、丰富的控件、丰富的网络支持、丰富的基础类库支持等。这是本人的学习笔记，写的比较乱，因此定名为乱弹琴 Silverlight 2.0 系列文章。

本篇介绍 Silverlight 2.0 中的样式(Style)，如何用样式来控制控件外观。

网页设计中，用CSS控制样式，来做到使文件结构简洁明晰、样式重用、动态换肤等功能。HTML/CSS中的样式分三种，内联样式、页内共享样式、独立的样式文件。
Silverlight 2.0中类似的也分三种样式：内联样式、页内共享样式，应用程序共享样式。
Silverlight 2.0中的分离的样式是以资源文件方式嵌入的。可以用StaticResource属性来引用样式。

内联样式：

示例：
XAML:
<Grid x:Name="LayoutRoot" Background="DarkGreen">
    <Button Foreground="Red"
            Background="Pink"
            Width="120"
            Height="40"
            FontSize="24"
            FontFamily="Courier New"
            Content="hello">
    </Button>
</Grid>
显示效果为：


特点：设置样式时，智能提示；直观；程序混乱；样式不具有重用性，代码冗长。

页内共享样式：

示例：

<UserControl.Resources>
    <Style x:Name="test" TargetType="Button">
        <Setter Property="Foreground" Value="Red"></Setter>
        <Setter Property="Background" Value="Pink"></Setter>
        <Setter Property="Width" Value="120"></Setter>
        <Setter Property="Height" Value="40"></Setter>
        <Setter Property="FontSize" Value="24"></Setter>
        <Setter Property="FontFamily" Value="Courier New"></Setter>
    </Style>
</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="DarkGreen">
    <Button Content="hello"
            Style="{StaticResource test}" ><!-- 引用页内(静态资源)样式 -->
    </Button>
</Grid>

TargetType是可应用该样式的控件。

显示效果：


特点：设置样式时无智能提示；程序清晰；页内共享，减少代码长度和工作量。

应用程序共享(全局)样式：

样式定义在App.xaml中。
<Application.Resources>
    <Style x:Name="test" TargetType="Button">
        <Setter Property="Foreground" Value="Red"></Setter>
        <Setter Property="Background" Value="Pink"></Setter>
        <Setter Property="Width" Value="120"></Setter>
        <Setter Property="Height" Value="40"></Setter>
        <Setter Property="FontSize" Value="24"></Setter>
        <Setter Property="FontFamily" Value="Courier New"></Setter>
    </Style>
</Application.Resources>

样式调用代码：

<Button Content="hello"
        Style="{StaticResource test}" ><!-- 引用全局(静态资源)样式 -->
</Button>

显示效果：


特点：设置样式时无智能提示;不够直观；程序清晰；全局共享，容易整体控制程序外观。

样式优先级：

跟HTML/CSS一样，Silverlight中控件样式也存在优先级,即：样式重复冲突时优先显示。
内联样式 > 页内共享样式 > 应用程序共享样式

示例：
App.xaml部分代码：
<Application.Resources>
    <Style x:Name="test" TargetType="Button">
        <Setter Property="Foreground" Value="Red"></Setter>
        <Setter Property="Background" Value="Pink"></Setter>
        <Setter Property="Width" Value="100"></Setter>
        <Setter Property="Height" Value="40"></Setter>
        <Setter Property="FontSize" Value="24"></Setter>
        <Setter Property="FontFamily" Value="Courier New"></Setter>
        <Setter Property="Margin" Value="10"></Setter>
    </Style>
    
    <Style x:Name="test1" TargetType="Button">
        <Setter Property="Foreground" Value="Red"></Setter>
        <Setter Property="Background" Value="Pink"></Setter>
        <Setter Property="Width" Value="100"></Setter>
        <Setter Property="Height" Value="40"></Setter>
        <Setter Property="FontSize" Value="24"></Setter>
        <Setter Property="FontFamily" Value="Courier New"></Setter>
        <Setter Property="Margin" Value="10"></Setter>
    </Style>
</Application.Resources>

Page.xaml 部分代码：
<UserControl.Resources>
    <Style x:Name="test" TargetType="Button">
        <Setter Property="Foreground" Value="Green"></Setter>
        <Setter Property="Background" Value="Pink"></Setter>
        <Setter Property="Width" Value="100"></Setter>
        <Setter Property="Height" Value="40"></Setter>
        <Setter Property="FontSize" Value="24"></Setter>
        <Setter Property="FontFamily" Value="Courier New"></Setter>
        <Setter Property="Margin" Value="10"></Setter>
    </Style>
</UserControl.Resources>

<StackPanel Background="DarkGreen" Orientation="Horizontal">
    <Button Content="hello 1"
            Style="{StaticResource test1}">            
    </Button>
    
    <Button Content="hello 2"
            Style="{StaticResource test}" >
    </Button>
    
    <Button Foreground="Blue"
            Content="hello 3"
            Style="{StaticResource test}">            
    </Button>        
</StackPanel>

显示效果：


结束语：

样式能灵活的控制程序的外观。少用内联样式可以使程序结构清晰；用外联样式可以达到代码重用的目的，也有利于控制一致的外观，便于维护。