Silverlight 属性样式、控件模板、视觉状态

在使用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>