原文:
重新想象 Windows 8 Store Apps (15) - 控件 UI: 字体继承, Style, ControlTemplate, SystemResource, VisualState, VisualStateManager
重新想象 Windows 8 Store Apps (15) - 控件 UI: 字体继承, Style, ControlTemplate, SystemResource, VisualState, VisualStateManager
作者：webabcd
介绍
重新想象 Windows 8 Store Apps 之 控件 UI
- 字体继承 - 继承父辈的 Font 相关的信息
- Style - 样式
- ControlTemplate - 控件模板
- 系统资源 - 系统内置的样式资源
- VisualState - 视图状态
- VisualStateManager - 视图状态管理器
示例
1、演示字体继承
Controls/UI/FontInherit.xaml
<Page x:Class="XamlDemo.Controls.UI.FontInherit" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlDemo.Controls.UI" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" FontSize="100"> <Grid Background="Transparent"> <StackPanel Margin="120 0 0 0"> <!-- 演示如何继承父辈的 Font 相关的信息 Font 相关的设置来自 Windows.UI.Xaml.Controls.Control --> <!-- 继承了 Page 的关于 Font 的设置 --> <TextBlock Text="FontSize = 100" /> <UserControl FontSize="50"> <!-- 继承了 UserControl 的关于 Font 的设置 --> <TextBlock Text="FontSize = 50" /> </UserControl> </StackPanel> </Grid> </Page>
2、演示 Style
Controls/UI/Style.xaml
<Page x:Class="XamlDemo.Controls.UI.Style" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlDemo.Controls.UI" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Name="root" Background="Transparent"> <!-- 注： 1、在 Grid.Resources 指定的资源，其作用域仅在 Grid 之内，全局资源需要在 App.xaml 中配置 2、Grid.Resources 等非全局资源也是支持 ResourceDictionary 的 --> <Grid.Resources> <!-- Style - 样式 x:Key - 标识（不指定此值，则样式会应用于所有 TargetType 所指定的类型） TargetType - 目标对象类型 BasedOn - 指定当前样式的父样式（此样式会继承指定的父样式） Setter - 属性设置器 Property - 需要设置的属性名称 Value - 需要设置的属性值 --> <Style x:Key="MyTextStyle" TargetType="TextBox"> <Setter Property="FontSize" Value="24"/> <Setter Property="Foreground" Value="#0000FF"/> </Style> <Style x:Key="MyTextStyle2" TargetType="TextBox"> <Setter Property="FontSize" Value="24"/> <Setter Property="Foreground" Value="#FF0000"/> </Style> <Style TargetType="TextBox" BasedOn="{StaticResource MyTextStyle}"> <Setter Property="TextAlignment" Value="Center"/> </Style> </Grid.Resources> <StackPanel Margin="120 0 0 0"> <!--通过指定样式资源，修改 FrameworkElement 的样式（Style 属性来自 FrameworkElement）--> <TextBox Name="txtStyleDemo" Text="我是 TextBox" Margin="5" Style="{StaticResource MyTextStyle}" /> <!--隐式样式（即全局样式，即样式资源中未指定 key 的样式）的应用--> <TextBox Text="我是 TextBox" Margin="5" /> <!--动态改变 FrameworkElement 的样式--> <Button Name="btnChangeStyle" Content="改变样式" Click="btnChangeStyle_Click_1" /> </StackPanel> </Grid> </Page>
Controls/UI/Style.xaml.cs
using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; namespace XamlDemo.Controls.UI { public sealed partial class Style : Page { public Style() { this.InitializeComponent(); } private void btnChangeStyle_Click_1(object sender, RoutedEventArgs e) { // 获取 Application 中的资源 // (Windows.UI.Xaml.Style)Application.Current.Resources["myStyle"]; // 获取 root 内的资源 txtStyleDemo.Style = (Windows.UI.Xaml.Style)root.Resources["MyTextStyle2"]; } } }
3、演示 ControlTemplate
Controls/UI/ControlTemplate.xaml
<Page x:Class="XamlDemo.Controls.UI.ControlTemplate" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlDemo.Controls.UI" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Name="root" Background="Transparent"> <!-- 注： 1、在 Grid.Resources 指定的资源，其作用域仅在 Grid 之内，全局资源需要在 App.xaml 中配置 2、Grid.Resources 等非全局资源也是支持 ResourceDictionary 的 --> <Grid.Resources> <!-- ControlTemplate - 控件模板 x:Key - 标识 TargetType - 目标对象类型 ContentPresenter - 用于显示 ContentControl 中的 Content TemplateBinding - 模板绑定 --> <ControlTemplate x:Key="MyControlTemplate" TargetType="Button"> <Border BorderBrush="Red" BorderThickness="1"> <Grid Background="{TemplateBinding Background}"> <ContentPresenter HorizontalAlignment="Right" Foreground="Red" /> </Grid> </Border> </ControlTemplate> <ControlTemplate x:Key="MyControlTemplate2" TargetType="Button"> <Border BorderBrush="Red" BorderThickness="1"> <Grid Background="{TemplateBinding Background}"> <ContentPresenter HorizontalAlignment="Right" Foreground="Blue" /> </Grid> </Border> </ControlTemplate> <!--在 Style 内配置 ControlTemplate--> <Style x:Key="MyStyle" TargetType="Button"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Border BorderBrush="Red" BorderThickness="1"> <Grid Background="{TemplateBinding Background}"> <ContentPresenter HorizontalAlignment="Right" Foreground="Red" /> </Grid> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> </Grid.Resources> <StackPanel Margin="120 0 0 0"> <!--通过指定控件模板资源，修改 Control 的模板（Template 属性来自 Control）--> <Button Name="btnControlTemplateDemo" Width="300" Margin="5" Content="我是 Button" Background="Yellow" Template="{StaticResource MyControlTemplate}" /> <!--通过内联控件模板，修改 Control 的模板--> <Button Width="300" Margin="5" Content="我是 Button"> <Button.Template> <ControlTemplate> <Border BorderBrush="Red" BorderThickness="1"> <Grid Background="Yellow"> <ContentPresenter HorizontalAlignment="Right" Foreground="Red" /> </Grid> </Border> </ControlTemplate> </Button.Template> </Button> <!--在 Style 内配置 ControlTemplate--> <Button Width="300" Margin="5" Content="我是 Button" Background="Yellow" Style="{StaticResource MyStyle}" /> <!--动态改变 Control 的模板--> <Button Name="btnChangeControlTemplate" Content="改变控件模板" Click="btnChangeControlTemplate_Click_1" /> </StackPanel> </Grid> </Page>
Controls/UI/ControlTemplate.xaml.cs
using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; namespace XamlDemo.Controls.UI { public sealed partial class ControlTemplate : Page { public ControlTemplate() { this.InitializeComponent(); } private void btnChangeControlTemplate_Click_1(object sender, RoutedEventArgs e) { // 获取 Application 中的资源 // (Windows.UI.Xaml.Style)Application.Current.Resources["MyControlTemplate"]; // 获取 root 内的资源 btnControlTemplateDemo.Template = (Windows.UI.Xaml.Controls.ControlTemplate)root.Resources["MyControlTemplate2"]; } } }
4、演示如何使用系统内置的样式资源
Controls/UI/SystemResource.xaml
<Page x:Class="XamlDemo.Controls.UI.SystemResource" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlDemo.Controls.UI" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="120 0 0 0"> <!-- 有 n 多的系统资源可用，以下举几个例子 注：可以在 Visual Studio 中枚举出系统资源 --> <Border Padding="12,4,12,4" BorderThickness="{StaticResource ButtonBorderThemeThickness}" BorderBrush="{StaticResource ButtonBorderThemeBrush}" Background="{StaticResource ButtonBackgroundThemeBrush}"> <TextBlock Text="我是一个长得像 Button 的 TextBlock" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="SemiBold" FontFamily="{StaticResource ContentControlThemeFontFamily}" FontSize="{StaticResource ControlContentThemeFontSize}" Foreground="{StaticResource ButtonForegroundThemeBrush}" /> </Border> <Button Content="我是一个 Button" Margin="0 10 0 0" /> </StackPanel> </Grid> </Page>
5、演示 VisualState 和 VisualStateManager 的应用
Controls/UI/VisualStateDemo.xaml
<Page x:Class="XamlDemo.Controls.UI.VisualStateDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlDemo.Controls.UI" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <Grid.Resources> <ControlTemplate x:Key="myControlTemplate" TargetType="Button"> <Grid> <VisualStateManager.VisualStateGroups> <!-- VisualStateGroup - 用于分组 VisualState --> <VisualStateGroup x:Name="CommonStates"> <!-- Normal - 正常状态 注意： 1、本例所列出的 VisualState 名称都是 Button 控件拥有的，不同的控件的 VisualState 名称和种类可能会不一样 2、写自定义控件时，需要通过 VisualStateManager.GoToState() 来转换 VisualState --> <VisualState x:Name="Normal" /> <!-- Disabled - 无效状态 --> <VisualState x:Name="Disabled" /> <!-- PointerOver - 鼠标经过时的状态 --> <VisualState x:Name="PointerOver"> <Storyboard> <ColorAnimation Storyboard.TargetName="borderBrush" Storyboard.TargetProperty="Color" To="Green" /> </Storyboard> </VisualState> <!-- PointerOver - 鼠标按下时的状态 --> <VisualState x:Name="Pressed"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="grid"> <DiscreteObjectKeyFrame KeyTime="0:0:0.3" Value="{StaticResource ButtonPressedBackgroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="contentPresenter"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <!-- VisualTransition - VisualState 变化时的过渡效果 From - 变化前的 VisualState 的 Name To - 变化后的 VisualState 的 Name GeneratedDuration - 一个状态变化到另一个状态的所需时间 GeneratedEasingFunction - 一个状态变化到另一个状态的缓动效果 --> <VisualStateGroup.Transitions> <VisualTransition To="PointerOver" GeneratedDuration="0:0:1"> <VisualTransition.GeneratedEasingFunction> <ElasticEase EasingMode="EaseInOut" /> </VisualTransition.GeneratedEasingFunction> </VisualTransition> </VisualStateGroup.Transitions> </VisualStateGroup> <VisualStateGroup x:Name="FocusStates"> <!-- Focused - 获取到焦点 --> <VisualState x:Name="Focused" /> <!-- Unfocused - 失去焦点 --> <VisualState x:Name="Unfocused"/> <!-- PointerFocused - 通过指针获取到焦点 --> <VisualState x:Name="PointerFocused"/> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Border x:Name="border" BorderThickness="10"> <Border.BorderBrush> <SolidColorBrush x:Name="borderBrush" Color="Red" /> </Border.BorderBrush> <Grid Name="grid" Background="{TemplateBinding Background}" Width="500" Height="200"> <ContentPresenter Name="contentPresenter" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="24.667" Foreground="{TemplateBinding Foreground}" /> </Grid> </Border> </Grid> </ControlTemplate> </Grid.Resources> <StackPanel Margin="120 0 0 0"> <Button Name="btnDemo" Content="我是 Button（用于演示 VisualState）" Margin="5" Background="Blue" Foreground="White" Template="{StaticResource myControlTemplate}" /> <Button Name="btnVisualStateManager" Content="将上面的按钮的 VisualState 转到 PointerOver" Click="btnVisualStateManager_Click_1" Margin="5" /> </StackPanel> </Grid> </Page>
Controls/UI/VisualStateDemo.xaml.cs
/* * 演示 VisualState 和 VisualStateManager 的应用 */ using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; namespace XamlDemo.Controls.UI { public sealed partial class VisualStateDemo : Page { public VisualStateDemo() { this.InitializeComponent(); } private void btnVisualStateManager_Click_1(object sender, RoutedEventArgs e) { /* * bool GoToState(Control control, string stateName, bool useTransitions) - 转换 VisualState * control - 需要转换 VisualState 的控件 * stateName - 目标 VisualState 的名称 * useTransitions - 是否使用 VisualTransition 进行过渡 */ // 将 VisualState 转到指定的状态 VisualStateManager.GoToState(btnDemo, "PointerOver", true); } } }
OK
[源码下载]
