Silverlight 外观之样式, 模板, 视觉状态和视觉状态管理器

示例

1、样式(App.xaml)

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

x:Class="Silverlight20.App"

>

<Application.Resources>

<!--全局样式 - 任何地方都可引用-->

<!--

Style - 自定义样式资源。用于修改控件的样式。各个控件的默认样式可参见文档

x:Key - 唯一标识

TargetType - 目标对象类型

Setter - 属性设置器

Property - 需要设置的属性名称

Value - 需要设置的属性值

-->

<Style x:Key="styleTestApp" TargetType="TextBox">

<Setter Property="FontSize" Value="24"/>

<Setter Property="Foreground" Value="#0000FF"/>

</Style>

</Application.Resources>

</Application>

样式(Style.xaml)

<UserControl x:Class="Silverlight20.Appearance.Style"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<StackPanel HorizontalAlignment="Left">

<StackPanel.Resources>

<!--容器内样式 - 所属容器内可引用-->

<!--

Style - 自定义样式资源。用于修改控件的样式。各个控件的默认样式可参见文档

x:Key - 唯一标识

TargetType - 目标对象类型

Setter - 属性设置器

Property - 需要设置的属性名称

Value - 需要设置的属性值

-->

<Style x:Key="styleTestInContainer" TargetType="TextBox">

<Setter Property="FontSize" Value="24"/>

<Setter Property="Foreground" Value="#00FF00"/>

</Style>

</StackPanel.Resources>

<!--全局样式的应用-->

<TextBox Text="我是TextBox（全局样式的应用）" Margin="5" Style="{StaticResource styleTestApp}" />

<!--容器内样式的应用-->

<TextBox Text="我是TextBox（容器内样式的应用）" Margin="5" Style="{StaticResource styleTestInContainer}" />

<!--内联样式的应用。内联样式优先级高于全局样式和容器内样式-->

<TextBox Text="我是TextBox（内连样式的应用）" Margin="5" Foreground="#FF0000" Style="{StaticResource styleTestInContainer}" />

</StackPanel>

</UserControl>

2、模板(App.xaml)

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

x:Class="Silverlight20.App"

>

<Application.Resources>

<!--全局模板 - 任何地方都可引用-->

<!--

ControlTemplate - 自定义控件模板。用于修改控件的外观。各个控件的默认模板可参见文档

x:Key - 唯一标识

TargetType - 目标对象类型

ContentPresenter - 用于显示继承自 System.Windows.Controls.ContentControl 的控件的内容

TemplateBinding - 绑定到所指定的属性名称

-->

<ControlTemplate x:Key="templateTestApp" TargetType="Button">

<Border BorderBrush="Red" BorderThickness="1">

<Grid Background="{TemplateBinding Background}">

<ContentPresenter HorizontalAlignment="Right" />

</Grid>

</Border>

</ControlTemplate>

</Application.Resources>

</Application>

模板(Template.xaml)

<UserControl x:Class="Silverlight20.Appearance.Template"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<StackPanel HorizontalAlignment="Left">

<StackPanel.Resources>

<!--容器内模板 - 所属容器内可引用-->

<!--

ControlTemplate - 自定义控件模板。用于修改控件的外观。各个控件的默认模板可参见文档

x:Key - 唯一标识

TargetType - 目标对象类型

ContentPresenter - 用于显示继承自 System.Windows.Controls.ContentControl 的控件的内容

TemplateBinding - 绑定到所指定的属性名称

-->

<ControlTemplate x:Key="templateTestInContainer" TargetType="Button">

<Border BorderBrush="Red" BorderThickness="1">

<Grid Background="{TemplateBinding Background}">

<ContentPresenter HorizontalAlignment="Right" />

</Grid>

</Border>

</ControlTemplate>

<!--样式内设置模板 - 指定了样式即指定了样式内的模板-->

<Style x:Key="templateTestInStyle" TargetType="Button">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="Button">

<Border BorderBrush="Red" BorderThickness="1">

<Grid Background="{TemplateBinding Background}">

<ContentPresenter HorizontalAlignment="Right" />

</Grid>

</Border>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</StackPanel.Resources>

<!--全局模板的应用-->

<Button Width="200" Margin="5" Content="我是Button（全局模板的应用）" Background="Yellow" Template="{StaticResource templateTestApp}" />

<!--容器内模板的应用-->

<Button Width="200" Margin="5" Content="我是Button（容器内模板的应用）" Background="Yellow" Template="{StaticResource templateTestInContainer}" />

<!--样式内模板的应用-->

<Button Width="200" Margin="5" Content="我是Button（样式内模板的应用）" Background="Yellow" Style="{StaticResource templateTestInStyle}" />

<!--内联式模板的应用-->

<Button Width="200" Margin="5" Content="我是Button（样式内模板的应用）">

<Button.Template>

<ControlTemplate>

<Border BorderBrush="Red" BorderThickness="1">

<Grid Background="Yellow">

<ContentPresenter HorizontalAlignment="Right" />

</Grid>

</Border>

</ControlTemplate>

</Button.Template>

</Button>

</StackPanel>

</UserControl>

3、视觉状态和视觉状态管理器(App.xaml)

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

x:Class="Silverlight20.App"

>

<Application.Resources>

<!--全局视觉状态 - 任何地方都可引用-->

<!--

VisualStateManager - 视觉状态管理器，用来管理视觉状态的。各个控件的默认视觉状态可参见文档

需要导入命名空间 xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"

-->

<ControlTemplate x:Key="vsmTestApp" TargetType="Button" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">

<Grid>

<vsm:VisualStateManager.VisualStateGroups>

<!--

VisualStateGroup - 视觉状态组

如：

CommonStates 组有 Normal, MouseOver, Pressed, Disabled

FocusStates 组有 Unfocused, Focused

每一个视觉状态组取一个视觉状态值就构成了控件的视觉状态

x:Name - 视觉状态的所属组别名称

-->

<vsm:VisualStateGroup x:Name="CommonStates">

<!--

VisualState - 配置视觉状态

x:Name - 所属视觉状态组内的指定的视觉状态名称

-->

<vsm:VisualState x:Name="MouseOver">

<Storyboard>

<ColorAnimation

Storyboard.TargetName="borderBrush"

Storyboard.TargetProperty="Color"

To="Green"

Duration="0:0:3" />

</Storyboard>

</vsm:VisualState>

<vsm:VisualState x:Name="Normal" />

<!--

VisualStateGroup.Transitions - 所属视觉状态组内的状态转换的配置

From - 转换前的视觉状态名称

To - 转换后的视觉状态名称

GeneratedDuration - 一个状态转换到另一个状态的所需时间

-->

<vsm:VisualStateGroup.Transitions>

<vsm:VisualTransition From="MouseOver" To="Normal" GeneratedDuration="0:0:3">

<Storyboard>

<ColorAnimation

Storyboard.TargetName="borderBrush"

Storyboard.TargetProperty="Color"

To="Red"

Duration="0:0:3" />

</Storyboard>

</vsm:VisualTransition>

</vsm:VisualStateGroup.Transitions>

</vsm:VisualStateGroup>

</vsm:VisualStateManager.VisualStateGroups>

<Border x:Name="border" BorderThickness="10">

<Border.BorderBrush>

<SolidColorBrush x:Name="borderBrush" Color="Red" />

</Border.BorderBrush>

<Grid Background="{TemplateBinding Background}">

<ContentPresenter HorizontalAlignment="Right" />

</Grid>

</Border>

</Grid>

</ControlTemplate>

</Application.Resources>

</Application>

视觉状态和视觉状态管理器(VisualStateManager.xaml)

<UserControl x:Class="Silverlight20.Appearance.VisualStateManager"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<StackPanel HorizontalAlignment="Left">

<StackPanel.Resources>

<!--容器内视觉状态 - 所属容器内可引用-->

<!--

VisualStateManager - 视觉状态管理器，用来管理视觉状态的。各个控件的默认视觉状态可参见文档

需要导入命名空间 xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"

-->

<ControlTemplate x:Key="vsmTestInContainer" TargetType="Button" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">

<Grid>

<vsm:VisualStateManager.VisualStateGroups>

<!--

VisualStateGroup - 视觉状态组

如：

CommonStates 组有 Normal, MouseOver, Pressed, Disabled

FocusStates 组有 Unfocused, Focused

每一个视觉状态组取一个视觉状态值就构成了控件的视觉状态

x:Name - 视觉状态的所属组别名称

-->

<vsm:VisualStateGroup x:Name="CommonStates">

<!--

VisualState - 配置视觉状态

x:Name - 所属视觉状态组内的指定的视觉状态名称

-->

<vsm:VisualState x:Name="MouseOver">

<Storyboard>

<ColorAnimation

Storyboard.TargetName="borderBrush"

Storyboard.TargetProperty="Color"

To="Green"

Duration="0:0:3" />

</Storyboard>

</vsm:VisualState>

<vsm:VisualState x:Name="Normal" />

<!--

VisualStateGroup.Transitions - 所属视觉状态组内的状态转换的配置

From - 转换前的视觉状态名称

To - 转换后的视觉状态名称

GeneratedDuration - 一个状态转换到另一个状态的所需时间

-->

<vsm:VisualStateGroup.Transitions>

<vsm:VisualTransition From="MouseOver" To="Normal" GeneratedDuration="0:0:3">

<Storyboard>

<ColorAnimation

Storyboard.TargetName="borderBrush"

Storyboard.TargetProperty="Color"

To="Red"

Duration="0:0:3" />

</Storyboard>

</vsm:VisualTransition>

</vsm:VisualStateGroup.Transitions>

</vsm:VisualStateGroup>

</vsm:VisualStateManager.VisualStateGroups>

<Border x:Name="border" BorderThickness="10">

<Border.BorderBrush>

<SolidColorBrush x:Name="borderBrush" Color="Red" />

</Border.BorderBrush>

<Grid Background="{TemplateBinding Background}">

<ContentPresenter HorizontalAlignment="Right" />

</Grid>

</Border>

</Grid>

</ControlTemplate>

</StackPanel.Resources>

<!--全局视觉状态的应用-->

<Button Content="我是Button（全局视觉状态的应用）" Margin="5" Background="Yellow" Template="{StaticResource vsmTestApp}" />

<!--容器内视觉状态的应用-->

<Button Content="我是Button（容器内视觉状态的应用）" Margin="5" Background="Yellow" Template="{StaticResource vsmTestInContainer}" />

</StackPanel>

</UserControl>