稳扎稳打Silverlight(12) - 2.0外观之样式, 模板, 视觉状态和视觉状态管理器

2016-08-20 10:55:45来源:http://webabcd.blog.51cto.com/1787395/343042作者:webabcd人点击


[索引页][源码下载]
稳扎稳打Silverlight(12) - 2.0外观之样式, 模板, 视觉状态和视觉状态管理器
作者:webabcd介绍Silverlight 2.0 外观控制:样式(Style),模板(Template),视觉状态(VisualState)和视觉状态管理器(VisualStateManager)在线DEMOhttp://webabcd.blog.51cto.com/1787395/342779示例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> <ColorAnimationStoryboard.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> <ColorAnimationStoryboard.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> <ColorAnimationStoryboard.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> <ColorAnimationStoryboard.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>


OK[源码下载]

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台