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>
    
    <Style x:Key="button1" TargetType="Button">
        
        <Setter Property="Background" Value="Black"/>
        
        <Setter Property="FontSize" Value="24"/>
        
        <Setter Property="Foreground" Value="Blue"/>
        
        <Setter Property="Margin" Value="20"/>
    </Style>

</UserControl.Resources>

<Button Content="兰色" Width="150" Height="80"
Style="{StaticResource button1}" />

内部样式

内部样式代表在元素的级别上来生命的资源，具有这个容器或者控件的使用范围

样式支持继承的方式访问，在父容器元素定义的样式其内部的包含的控件也可以使用这个样式，下面的Button就使用了其父容器控件中的资源。

控件模板

控件模板用于个性化的去定义控件的外观，可以使用Blend或者是手动去使用XAML编写组合一个你所想要的控件外观，比如圆形的按钮等等，同时这个控件本身依然具有控件本身的功能作用。

他的定义是Style的一个扩展，只要在Style中添加Property="Template" 的Setter 标记并在Value中定义即可

<UserControl.Resources>
    
    <Style x:Key="MyButton1" TargetType="Button">
        
        <Setter Property="Template"> ----------代表索要定义的是一个模板
        <Setter.Value>       ---------- 这个标记中可以包含模板定义
            
            <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>
                
                <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">
    
    <Button Style="{StaticResource MyButton1}" Content="我的控件" />   ----使用样式的名称即可
    
    <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>        ----------迁移代表不同状态之间切换的过程
                
                <VisualTransition To="MouseOver"
                 GeneratedDuration="0:0:0.5" />
                
                <VisualTransition From="Pressed"
                                  To="MouseOver"
                 GeneratedDuration="0:0:0.01" />
                
                <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>

posted on 2010-09-21 10:42 SkyZhang 阅读(656) 评论(0) 收藏举报

刷新页面返回顶部

SkyZhang