背水一戰 Windows 10 (7) - 控件 UI: VisualState, VisualStateManager, 控件的默認 UI

[源碼下載]

背水一戰 Windows 10 (7) - 控件 UI: VisualState, VisualStateManager, 控件的默認 UI

做者：webabcd


介紹
背水一戰 Windows 10 之 控件 UI

• VisualState 和 VisualStateManager
• 控件的默認 Style, ControlTemplate, VisualState

示例
一、演示「VisualState 和 VisualStateManager」相關知識點
Controls/UI/VisualState/VisualStateDemo.xaml

<Page
    x:Class="Windows10.Controls.UI.VisualState.VisualStateDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.UI.VisualState"
    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 中定義 VisualState 和 VisualStateManager
            -->
            <ControlTemplate x:Key="ControlTemplate1" TargetType="Button">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <!--
                            VisualStateGroup - 用於分組 VisualState
                        -->
                        <VisualStateGroup x:Name="CommonStates">
                            
                            <!--
                                Normal - 正常狀態
                            
                                注意：
                                一、本例所列出的 VisualState 的名稱都是 Button 控件擁有的，不一樣的控件的 VisualState 名稱和種類可能會不同
                                二、寫自定義控件時，須要經過 VisualStateManager.GoToState() 來轉換 VisualState
                            -->
                            <VisualState x:Name="Normal" />
                            
                            <!--
                                Disabled - 無效狀態
                            -->
                            
                            <VisualState x:Name="Disabled" />
                            
                            <!--
                                PointerOver - 鼠標通過時的狀態（詳細的過渡效果在後面的 VisualStateGroup.Transitions 中定義）
                            -->
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ColorAnimation 
                                        Storyboard.TargetName="borderBrush" 
                                        Storyboard.TargetProperty="Color" 
                                        To="Green" />
                                </Storyboard>
                            </VisualState>
                            
                            <!--
                                Pressed - 鼠標按下時的狀態
                            -->
                            <VisualState x:Name="Pressed">
                                <VisualState.Storyboard>
                                    <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.Storyboard>
                                <VisualState.Setters>
                                    <!--
                                        這部分是 uwp 新增的特性，之前只能經過 Storyboard 來實現
                                    -->
                                    <Setter Target="grid.Width" Value="100" />
                                </VisualState.Setters>
                                <VisualState.StateTriggers>
                                    <!--
                                        這部分是 uwp 新增的特性
                                        關於 StateTriggers 請參見 /Controls/UI/VisualState/StateTrigger.xaml
                                    -->
                                </VisualState.StateTriggers>
                            </VisualState>
                            
                            <!--
                                VisualTransition - VisualState 變化時的過渡效果（要結合相應的 VisualState 中的 Storyboard 使用）
                                    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="MyStates">
                            <VisualState x:Name="MyState1" />
                            <VisualState x:Name="MyState2"/>
                            <VisualState x:Name="MyState3"/>
                        </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="10 0 10 10">

            <TextBlock Name="lblMsg" TextWrapping="Wrap" Margin="5" />

            <Button Name="btnDemo" Content="我是 Button（用於演示 VisualState 和 VisualStateManager）" Margin="5" Background="Blue" Foreground="White" Template="{StaticResource ControlTemplate1}" />

            <Button Name="btnVisualStateManager" Content="將上面的按鈕的 VisualState 轉到 PointerOver" Click="btnVisualStateManager_Click" Margin="5" />

        </StackPanel>

    </Grid>
</Page>

Controls/UI/VisualState/VisualStateDemo.xaml.cs

/*
 * 演示「VisualState 和 VisualStateManager」相關知識點
 */

using System;
using System.Collections.Generic;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows10.Common;

namespace Windows10.Controls.UI.VisualState
{
    public sealed partial class VisualStateDemo : Page
    {
        public VisualStateDemo()
        {
            this.InitializeComponent();
        }

        private void btnVisualStateManager_Click(object sender, RoutedEventArgs e)
        {
            /*
             * bool GoToState(Control control, string stateName, bool useTransitions) - 轉換 VisualState
             *     control - 須要轉換 VisualState 的控件
             *     stateName - 目標 VisualState 的名稱
             *     useTransitions - 是否使用 VisualTransition 進行過渡
             */

            // 將 VisualState 轉到指定的狀態（每一個 VisualStateGroup 分別指定一個其內的 VisualState）
            VisualStateManager.GoToState(btnDemo, "PointerOver", true);
            VisualStateManager.GoToState(btnDemo, "MyState3", false);



            /*
             * VisualStateManager.GetVisualStateGroups(FrameworkElement obj) - 獲取指定 FrameworkElement 中的 VisualStateGroup 集合
             *     注：本例中的 VisualState 定義在 btnDemo 的控件模板中的第一個 Grid 中
             *
             * VisualStateGroup - VisualState 組（每一個 VisualStateManager 下能夠有多個 VisualStateGroup）
             *     Name - 獲取此 VisualStateGroup 的名字
             *     CurrentState - 獲取此 VisualStateGroup 的當前使用的 VisualState（每一個 VisualStateGroup 正在使用的 VisualState 只能有一個）
             *     States - 獲取此 VisualStateGroup 中的 VisualState 集合
             *     Transitions - 獲取此 VisualStateGroup 中的 VisualTransition 集合
             *     CurrentStateChanging, CurrentStateChanged - 此 VisualStateGroup 中的正在使用的 VisualState 發生變化時觸發的事件
             *
             * VisualState - VisualState
             *     Name - 獲取此 VisualState 的名字
             *     Setters - 獲取此 VisualState 中的 Setter 集合
             *     StateTriggers - 獲取此 VisualState 中的 StateTrigger 集合
             *     Storyboard - 獲取此 VisualState 中的 Storyboard 對象
             */

            lblMsg.Text = "";
            Grid grid = Helper.GetVisualChild<Grid>(btnDemo);
            IList<VisualStateGroup> visualStateGroups = VisualStateManager.GetVisualStateGroups(grid);
            foreach (VisualStateGroup visualStateGroup in visualStateGroups)
            {
                lblMsg.Text += visualStateGroup.Name + " " + visualStateGroup.CurrentState.Name;
                lblMsg.Text += Environment.NewLine;
            }
        }
    }
}

二、演示如何獲取控件的默認 Style, ControlTemplate, VisualState
Controls/UI/DefaultUI.xaml

<Page
    x:Class="Windows10.Controls.UI.DefaultUI"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.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="10 0 10 10">

            <TextBlock TextWrapping="Wrap" Margin="5">
                <Run>如何獲取控件的默認 Style, ControlTemplate, VisualState 呢？</Run>
                <LineBreak />
                <Run>一、在 msdn 上找: https://msdn.microsoft.com/zh-cn/library/windows/apps/xaml/mt299122.aspx</Run>
                <LineBreak />
                <Run>二、在 Visual Studio 的設計界面，右鍵選擇控件，而後選擇「編輯控件」或「編輯模板」或「編輯其餘模板」，而後選擇「編輯副本」</Run>
                <LineBreak />
                <Run>三、打開這個 C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10586.0\Generic\generic.xaml 文件，而後在裏面找</Run>
            </TextBlock>

            <TextBlock TextWrapping="Wrap" Margin="5">
                <Run>若是遇到複雜的控件，如何肯定我要編輯的其內部的控件的類型呢？</Run>
                <LineBreak />
                <Run>運行你的程序，而後在「實時可視化樹（Live Visual Tree）」中找</Run>
            </TextBlock>

        </StackPanel>
    </Grid>

    <Page.Resources>
        <!--
            這個就是 Button 的默認樣式
        -->
        <Style x:Key="ButtonStyle1" TargetType="Button">
            <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/>
            <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
            <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}"/>
            <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/>
            <Setter Property="Padding" Value="8,4,8,4"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
            <Setter Property="FontWeight" Value="Normal"/>
            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
            <Setter Property="UseSystemFocusVisuals" Value="True"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

</Page>

OK
[源碼下載]