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

冷不防 2022-05-15 19:26 197阅读 0赞

在使用Silverlight的样式的时候感觉非常好，以前在HTML上很难实现的效果在这里都变的如此简单。

## 属性样式 ##

控件的属性样式好比CSS的Class功能定义，是用来统一定义和维护控件属性的方式，控件属性样式根据生命的位置不同分为三种范围的作用域

**全局样式**

全局样式声明在App.Xaml 文件中具有整个项目的使用范围能力

**局部样式**

局部样式使用<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>