UWP 视觉状态管理 VisualStateManager

<Page
    x:Class="sharedstylewithdatatemplate.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:sharedstylewithdatatemplate"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <ControlTemplate x:Name="buttonTemplete" TargetType="Button">
            <Grid>
                <VisualStateManager.VisualStateGroups>
                    
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal"/>
                        <VisualState x:Name="PointerOver"/>

                        <VisualState x:Name="Pressed">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="border"
                                                               Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="LightGray"/>
                                </ObjectAnimationUsingKeyFrames>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"
                                                               Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Green"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>

                        <VisualState x:Name="Disabled">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="disabledRect"
                                                               Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>

                    <VisualStateGroup x:Name="FocuseStates">
                        <VisualState x:Name="Unfocused"/>
                        <VisualState x:Name="Focused">
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="focusRectangle"
                                                 Storyboard.TargetProperty="Opacity"
                                                 To="1"
                                                 Duration="0"/>
                            </Storyboard>
                        </VisualState>

                        <VisualState x:Name="PointerFocused"/>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>

                <Border Name="border"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CornerRadius="12">

                    <Grid>
                        <ContentPresenter Name="contentPresenter"
                                          Content="{TemplateBinding Content}"
                                          ContentTemplate="{TemplateBinding ContentTemplate}"
                                          Margin="{TemplateBinding Padding}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          ContentTransitions="{TemplateBinding ContentTransitions}"/>

                        <Rectangle Name="focusRectangle"
                                   Stroke="{TemplateBinding Foreground}"
                                   Opacity="0"
                                   StrokeThickness="1"
                                   StrokeDashArray="2 2"
                                   Margin="4"
                                   RadiusX="12"
                                   RadiusY="12"/>
                    </Grid>
                </Border>

                <Rectangle Name="disabledRect"
                           Visibility="Collapsed"
                           Fill="Black"
                           Opacity="0.5"/>
            </Grid>
        </ControlTemplate>

        <Style x:Name="buttonStyle" TargetType="Button">
            <Setter Property="Background"       Value="White"/>
            <Setter Property="Foreground"       Value="Blue"/>
            <Setter Property="BorderBrush"      Value="Red"/>
            <Setter Property="BorderThickness"  Value="3"/>
            <Setter Property="FontSize"         Value="24"/>
            <Setter Property="Padding"          Value="12"/>
            <Setter Property="Template"         Value="{StaticResource buttonTemplete}"/>
        </Style>
    </Page.Resources>

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Button Content="Disabled center button"
                Grid.Column="0"
                Style="{StaticResource buttonStyle}"
                VerticalAlignment="Center"
                HorizontalAlignment="Center"
                Click="Button_Click"/>

        <Button Name="centerButton"
                Content="Center Button"
                Grid.Column="1"
                Style="{StaticResource buttonStyle}"
                FontSize="48"
                Background="DarkGray"
                Foreground="Red"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"/>

        <Button Content="Enable center button"
                Grid.Column="2"
                Style="{StaticResource buttonStyle}"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                
                Click="Button_Click_1">
            
            <Button.ContentTransitions>
                <TransitionCollection>
                    <EntranceThemeTransition/>
                </TransitionCollection>
            </Button.ContentTransitions>
            
        </Button>
    </Grid>
</Page>

　　

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409

namespace sharedstylewithdatatemplate
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            centerButton.IsEnabled = false;
        }

        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            centerButton.IsEnabled = true;
        }
    }
}