重新想象 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
[源码下载]