Silverlight 2的Style练习

本篇的内容较为简单，主要针对Silverlight 2的Style进行一个练习。Style简要的说就是一些属性值的集合，
作用和CSS比较像。在Silverlight 2中定义Style只能同用于同种类型的Element。如下代码：

 


  
< Style x:Key="ButtonStyleTwo" TargetType="Button"> 

  
            < Setter Property="FontFamily" Value="Arial" /> 

  
            < Setter Property="FontSize" Value="40" /> 

  
            < Setter Property="Foreground" Value="Blue" /> 

  
            < Setter Property="Background"> 

  
< /Style> 

 

这就是一个定义好的Style，它只能用于Button组件，看看它如何产生作用，将Style直接嵌入Button：

 


  
< Button Content="Button"> 

  
    < Button.Style> 

  
         < Style TargetType="Button"> 

  
              < Setter Property="FontFamily" Value="Arial" /> 

  
              < Setter Property="FontSize" Value="40" /> 

  
              < Setter Property="Foreground" Value="Blue" /> 

  
              < Setter Property="Background"> 

  
                 < Setter.Value> 

  
                   < LinearGradientBrush> 

  
                     < GradientStop Color="Green" Offset="0">< /GradientStop> 

  
                     < GradientStop Color="Red" Offset="1">< /GradientStop> 

  
                   < /LinearGradientBrush> 

  
                 < /Setter.Value> 

  
              < /Setter> 

  
         < /Style> 

  
    < /Button.Style> 

  
< /Button> 

  
  

 

当然也可以通过Resource的方式来设置Style，分别设置了两个Style：ButtonStyleOne、ButtonStyleTwo，
ButtonStyleOne设置为默认Style，ButtonStyleTwo用于在点击Button后切换Style。

Silverlight 2的Style练习：XAML Code：

 


  
< UserControl x:Class="SilverlightTest.Page" 

  
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   

  
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

  
    Width="400"> 

  
    < UserControl.Resources> 

  
        < Style x:Key="ButtonStyleOne" TargetType="Button"> 

  
            < Setter Property="FontFamily" Value="Georgia" /> 

  
            < Setter Property="FontSize" Value="40" /> 

  
            < Setter Property="Foreground" Value="SlateGray" /> 

  
            < Setter Property="Background"> 

  
                < Setter.Value> 

  
                    < LinearGradientBrush> 

  
                        < GradientStop Color="Blue" Offset="0">< /GradientStop> 

  
                        < GradientStop Color="Yellow" Offset="1">< /GradientStop> 

  
                    < /LinearGradientBrush> 

  
                < /Setter.Value> 

  
            < /Setter> 

  
        < /Style> 

  
        < Style x:Key="ButtonStyleTwo" TargetType="Button"> 

  
            < Setter Property="FontFamily" Value="Arial" /> 

  
            < Setter Property="FontSize" Value="40" /> 

  
            < Setter Property="Foreground" Value="Pink" /> 

  
            < Setter Property="Background"> 

  
                < Setter.Value> 

  
                    < LinearGradientBrush> 

  
                        < GradientStop Color="Green" Offset="0">< /GradientStop> 

  
                        < GradientStop Color="Red" Offset="1">< /GradientStop> 

  
                    < /LinearGradientBrush> 

  
                < /Setter.Value> 

  
            < /Setter> 

  
        < /Style> 

  
    < /UserControl.Resources> 

  
    < StackPanel x:Name="LayoutRoot" Background="White"> 

  
        < Button x:Name="TestButton" Content="A Customized Button"   

  
                Style="{StaticResource ButtonStyleOne}" Click="Button_Click">< /Button> 

  
    < /StackPanel> 

  
< /UserControl> 

  
  

 

用C#来切换Sytle，如下代码：

 


  
private void Button_Click(object sender, RoutedEventArgs e)  

  
{  

  
   //切换Style:ButtonStyleTwo  

  
   TestButton.Style = this.Resources["ButtonStyleTwo"] as Style;  

  
   //修改Button文字  

  
   TestButton.Content = "Style Changed";  

  
}  

 

以上就是Silverlight 2的Style练习。

【编辑推荐】

1. 微软Silverlight 3挑战Adobe AIR
2. RIA大战在即 微软Silverlight胜算几何
3. 图解Silverlight 3的7个新功能
4. Flash与Silverlight多领域实测对比
5. 微软宣称Silverlight装机量超过三亿