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