在使用Silverlight的样式的时候感觉非常好，以前在HTML上很难实现的效果在这里都变的如此简单。
属性样式
控件的属性样式好比CSS的Class功能定义，是用来统一定义和维护控件属性的方式，控件属性样式根据生命的位置不同分为三种范围的作用域
全局样式
全局样式声明在App.Xaml 文件中具有整个项目的使用范围能力
<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="Sample.App" > <Application.Resources> <!--样式定义位置，定义在这里可以让整个项目都可以访问到这个样式的定义--> </Application.Resources> </Application>
局部样式
局部样式使用<UserControl.Resources> 这个元素定义，具有文件级别的访问范围
<!--定义用户控件资源-->
<UserControl.Resources>
<!--定义按钮样式1 TargetType 代表适合的控件类型 这里是Button控件-->
<Style x:Key="button1" TargetType="Button">
<!--背景色 Background = Black-->
<Setter Property="Background" Value="Black"/>
<!--字号-->
<Setter Property="FontSize" Value="24"/>
<!--字颜色-->
<Setter Property="Foreground" Value="Blue"/>
<!--字间距-->
<Setter Property="Margin" Value="20"/>
</Style>
</UserControl.Resources>
<!--应用样式1的按钮-->
<Button Content="兰色" Width="150" Height="80"
Style="{StaticResource button1}" />
内部样式
内部样式代表在元素的级别上来生命的资源，具有这个容器或者控件的使用范围
<Button Content="红色" Width="150" Height="80">
<Button.Style>
<!--定义按钮样式3-->
<Style TargetType="Button">
<!--背景色-->
<Setter Property="Background" Value="Red"/>
<!--字号-->
<Setter Property="FontSize" Value="24"/>
<!--字颜色-->
<Setter Property="Foreground" Value="Red"/>
<!--字间距-->
<Setter Property="Margin" Value="20"/>
</Style>
</Button.Style>
</Button>
样式支持继承的方式访问，在父容器元素定义的样式其内部的包含的控件也可以使用这个样式，下面的Button就使用了其父容器控件中的资源。
<Grid x:Name="LayoutRoot" Background="White">
<!--定义Grid控件的资源-->
<Grid.Resources>
<Style x:Key="button" TargetType="Button">
<Setter Property="Width" Value="260"/>
<Setter Property="Height" Value="160"/>
<Setter Property="FontSize" Value="26" />
<Setter Property="Content" Value="应用父级样式"/>
</Style>
</Grid.Resources>
<!--应用父级样式的按钮-->
<Button Style="{StaticResource button}"></Button>
</Grid>
控件模板
控件模板用于个性化的去定义控件的外观，可以使用Blend或者是手动去使用XAML编写组合一个你所想要的控件外观，比如圆形的按钮等等，同时这个控件本身依然具有控件本身的功能作用。
他的定义是Style的一个扩展，只要在Style中添加Property="Template" 的Setter 标记 并在Value中定义即可
<UserControl.Resources>
<!--定义样式1-->
<Style x:Key="MyButton1" TargetType="Button">
<!--使用模板属性-->
<Setter Property="Template"> ----------代表索要定义的是一个模板
<Setter.Value> ---------- 这个标记中可以包含模板定义
<!--定义模板1-->
<ControlTemplate TargetType="Button"> -------模板的适用与Button，这个元素的内部开始定义这个Button模板的外观
<Grid Cursor="Hand" Margin="20">
<Ellipse Width="150" Height="100"
HorizontalAlignment="Center"
VerticalAlignment="Center"> -----椭圆形
<Ellipse.Fill> -----填充使用黄色到白色的渐变
<RadialGradientBrush>
<GradientStop Color="Gold"
Offset="1"/>
<GradientStop Color="White"
Offset="0"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<!--使用TemplateBinding-->
<TextBlock FontSize="24"
Foreground="Blue"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="{TemplateBinding Content}" /> ----文本的定义使用TextBlock标记，并将Text 与 具体的Button 的Content 属性 的值关联起来
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<StackPanel Width="400" Height="300"
HorizontalAlignment="Center"
Orientation="Horizontal"
VerticalAlignment="Center"
Background="White">
<!--应用样式1-->
<Button Style="{StaticResource MyButton1}" Content="我的控件" /> ----使用样式的名称即可
<!--应用样式1-->
<Button Style="{StaticResource MyButton1}" Content="按钮内容" />
</StackPanel>
视觉状态
视觉状态也是Style的一个扩展，在Silverlight 的样式中控件在某个状态下的不同效果也是可以定义的，比如鼠标在按钮悬停时候按钮的样子啊，按下按钮的样子啊等等。
当然和Style一样，每种按钮都有不同的属性也会有不同的状态。那么我们如何得知控件有那些状态呢，方法很简单，只要 右键选中一个控件，转到定义，在元数据里面就会看到他的状态都有那些了。
// Summary: // Represents a button control. [TemplateVisualState(Name = "Focused", GroupName = "FocusStates")] [TemplateVisualState(Name = "Normal", GroupName = "CommonStates")] [TemplateVisualState(Name = "MouseOver", GroupName = "CommonStates")] [TemplateVisualState(Name = "Pressed", GroupName = "CommonStates")] [TemplateVisualState(Name = "Disabled", GroupName = "CommonStates")] [TemplateVisualState(Name = "Unfocused", GroupName = "FocusStates")] public class Button : ButtonBase
上面的特性就是视觉状态了，我们就要重新定义这些Name的状态。
<UserControl.Resources>
<!--定义样式标记-->
<Style x:Key="buttonVSM" TargetType="Button">
<!--定义样式属性-->
<Setter Property="Foreground" Value="Yellow"/>
<Setter Property="Template">
<Setter.Value>
<!--定义控件模板-->
<ControlTemplate TargetType="Button">
<Border CornerRadius="10" BorderBrush="Black"
BorderThickness="3" Width="240" Height="80"
x:Name="RootElement">
<Border.Background>
<!--定义背景画刷-->
<SolidColorBrush
x:Name="BorderBrush"
Color="Green"/>
</Border.Background>
<!--视觉状态管理组-->
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<!--定义状态迁移-->
<VisualStateGroup.Transitions> ----------迁移代表不同状态之间切换的过程
<!--从Normal到MouseOver迁移间隔时间-->
<VisualTransition To="MouseOver"
GeneratedDuration="0:0:0.5" />
<!--从Pressed到MouseOver的迁移间隔时间-->
<VisualTransition From="Pressed"
To="MouseOver"
GeneratedDuration="0:0:0.01" />
<!--从MouseOver到Normal的迁移-->
<VisualTransition From="MouseOver"
To="Normal"
GeneratedDuration="0:0:1.5">
<Storyboard>
<!--使用关键帧动画改变按钮背景色-->
<ColorAnimationUsingKeyFrames
Storyboard.TargetProperty="Color"
Storyboard.TargetName="BorderBrush">
<ColorAnimationUsingKeyFrames.KeyFrames>
<LinearColorKeyFrame
Value="Blue" KeyTime="0:0:0.5" /> ---- 0.5 秒Blue 色
<LinearColorKeyFrame
Value="Yellow" KeyTime="0:0:1" /> ---1秒 Yellow色
<LinearColorKeyFrame
Value="Green" KeyTime="0:0:1.5" /> ----1.5秒Green色
</ColorAnimationUsingKeyFrames.KeyFrames>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<!--按钮普通状态-->
<VisualState x:Name="Normal" />
<!--鼠标经过按钮的状态-->
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation
Storyboard.TargetName="BorderBrush"
Storyboard.TargetProperty="Color"
To="Red" /> ----动态将BorderBrush 的Color 属性值过度到Red
</Storyboard>
</VisualState>
<!--按钮按下状态-->
<VisualState x:Name="Pressed">
<Storyboard >
<ColorAnimation
Storyboard.TargetName="BorderBrush"
Storyboard.TargetProperty="Color"
To="Transparent" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<!--显示按钮文本-->
<ContentPresenter
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="{TemplateBinding Content}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<!--按钮对象-->
<Button Style="{StaticResource buttonVSM}"
FontSize="24" Background="Red"
Content="视觉状态按钮"/>
</Grid>
