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>