Silverlight学习之样式

Silverlight中的样式和Html中的CSS概念差不多，可以单独写在一个文件中，用来达到复用的效果。

样式按照作用域主要分为三类  内部样式 局部样式 全局样式，其中局部样式和全局样式大体相同，下边会放在一块。

内部样式

<Canvas>
           <Button Height="50" Width="150" Content="Hello World" Canvas.Left="50" Canvas.Top="20">
            <Button.Style>
                <Style TargetType="Button">
                    <Setter Property="Foreground" Value="Red"></Setter>
                    <Setter Property="FontSize" Value="20"></Setter>
                </Style>
            </Button.Style>
        </Button>

 </Canvas> 

 

运行效果

 

内部样式有效范围只在此控件内，因此不能达到重用的效果，不推荐用此方法。

 

 局部样式和全局样式

局部样式通常定义在UserControl.Resources中 它只能作用在此页面中。

<UserControl.Resources>
        <Style x:Key="ButtonPartStyle" TargetType="Button">
            <Setter Property="Foreground" Value="Green"></Setter>
            <Setter Property="FontSize" Value="20"></Setter>
        </Style>
    </UserControl.Resources>

全局样式通常定义在<Application.Resources>中可以在整个项目中引用

  <Application.Resources>
         <Style x:Name="ButtonWholeStyle" TargetType="Button">
            <Setter Property="Foreground" Value="Orange"></Setter>
            <Setter Property="FontSize" Value="26"></Setter>
        </Style>   

</Application.Resources>

样式定义都是通过Style元素来指定，需要设置一个Key属性，用来区分不同的样式，并且通过指定TargetType来指定作用目标的类型。通过Setter来声明目标的属性。在页面控件中中通过StaticResource来以用此样式。

控件引用样式

 <Button Style="{StaticResource ButtonPartStyle}" Content="Hello" Canvas.Left="50" Canvas.Top="40" Height="50" Width="150"/>

<Button Style="{StaticResource ButtonWholeStyle}" Content="World" Canvas.Left="50" Canvas.Top="100"  Height="50" Width="150"/>

运行效果

样式重写

定义了全局样式和局部样式后，样式能被重写。即内部样式高于全局样式和局部样式。

<Canvas>
         <Button Style="{StaticResource ButtonPartStyle}" Content="Hello" Canvas.Left="50" Canvas.Top="20" Height="50" Width="150" Foreground="Blue"/>
        <Button Style="{StaticResource ButtonWholeStyle}" Height="50" Width="150" Content="World" Canvas.Left="50" Canvas.Top="100">
        </Button>
  </Canvas>

 效果

 

尽管在局部样式中定义了Button的Foreground为Green，但是在内部样式重写后它显示为Blue