转：Silverlight样式写法

来自：http://hi.baidu.com/shop%B0%C9/blog/item/9d771ef4a7b8182dbc3109ca.html

Silverlight中的样式写法与普通的CSS有异曲同工之处，分为内联样式和全局样式。
内联样式是在XAML中定义控件样式，唯一不方便。eg：

引用内容

<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>

效果如下：

其中Button控件附加了一些样式属性，样式不可重用，页面XAML代码混乱等，这些缺点其实类似于在HTML中直接设置元素的样式。一种推荐的方式是应该使用全局的样式。

全局样式是在App.xaml中编辑样式，在其他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>

其中的KEY可以理解为CSS中的ID(#),TargetType为样式赋予的类型是什么。相比较上面的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>

尽管我们在全局样式中指定第一个按钮的前景色为绿色，通过内联样式重写后，它显示为蓝色：