c# UWP 控件 Button（十三）

⚫Button的VisualStates

Button的CotrolTemplate中包含四个VisualState，分别是Normal、PointerOver、Pressed、Disabled。

Normal        : Button的默认状态，UWP的按钮是完全扁平化的设计。没有边框。

PointerOver: 鼠标进入的状态，出现边框，背景颜色也会改变。Windows中通常不会用改变鼠标指针来表明“这是一个Button”，
                     而是让Button进入PointerOver状态。只有HyperlinkButton是特例，符合 W3C的建议

                     使用了CoreCursorType.Hand作为鼠标指针。

Pressed      : 按下的状态，有趣的是除了改变颜色Button还应用了PointerDownThemeAnimation使得按钮向按下方向倾斜，
                     营造一种有深度的设计。不过这个做法会导致Button的内容变模糊（Projection都有这个问题）。

Disabled     : 当IsEnabled="False"时的状态，一般控件都有这个状态，大部分都表现为背景变灰，字体颜色变浅，表示不可操作。

习惯做触屏设计的话很容易就忽略PointerOver状态，目前UWP大部分的应用场景还是在桌面上，所以应该在ControlTemplate中包含这四种VisualState。除了这四种VisualState，Button还可以定义FocusStates。

在设计器里找到你写的Button控件，右键->编辑模板->编辑副本，vs会帮你生成一个样式，如下：

<Style x:Key="ButtonStyle2" TargetType="Button">
        <Setter Property="Background"                  Value="{ThemeResource ButtonBackground}"/>
        <Setter Property="BackgroundSizing"            Value="OuterBorderEdge"/>
        <Setter Property="Foreground"                  Value="{ThemeResource ButtonForeground}"/>
        <Setter Property="BorderBrush"                 Value="{ThemeResource ButtonBorderBrush}"/>
        <Setter Property="BorderThickness"             Value="{ThemeResource ButtonBorderThemeThickness}"/>
        <Setter Property="Padding"                     Value="{StaticResource ButtonPadding}"/>
        <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="{StaticResource UseSystemFocusVisuals}"/>
        <Setter Property="FocusVisualMargin"           Value="-3"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <ContentPresenter x:Name="ContentPresenter"
                            AutomationProperties.AccessibilityView="Raw" 
                            BackgroundSizing           ="{TemplateBinding BackgroundSizing}"
                            Background                 ="{TemplateBinding Background}" 
                            BorderThickness            ="{TemplateBinding BorderThickness}" 
                            BorderBrush                ="{TemplateBinding BorderBrush}" 
                            ContentTemplate            ="{TemplateBinding ContentTemplate}" 
                            Content                    ="{TemplateBinding Content}"
                            CornerRadius               ="{TemplateBinding CornerRadius}" 
                            ContentTransitions         ="{TemplateBinding ContentTransitions}" 
                            HorizontalContentAlignment ="{TemplateBinding HorizontalContentAlignment}" 
                            Padding                    ="{TemplateBinding Padding}" 
                            VerticalContentAlignment   ="{TemplateBinding VerticalContentAlignment}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">
                                       <Storyboard>
                                              <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter"/>
                                       </Storyboard>
                                </VisualState>
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames 
                                                Storyboard.TargetName="ContentPresenter" 
                                                Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                             Value="{ThemeResource ButtonBackgroundPointerOver}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames 
                                                Storyboard.TargetName="ContentPresenter" 
                                                Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                             Value="{ThemeResource ButtonBorderBrushPointerOver}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames 
                                                Storyboard.TargetName="ContentPresenter" 
                                                Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" 
                                                             Value="{ThemeResource ButtonForegroundPointerOver}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames 
                                                Storyboard.TargetName="ContentPresenter" 
                                                Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" 
                                                             Value="{ThemeResource ButtonBackgroundPressed}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames 
                                                Storyboard.TargetName="ContentPresenter" 
                                                Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" 
                                                             Value="{ThemeResource ButtonBorderBrushPressed}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames 
                                                Storyboard.TargetName="ContentPresenter" 
                                                Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" 
                                                             Value="{ThemeResource ButtonForegroundPressed}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerDownThemeAnimation Storyboard.TargetName="ContentPresenter"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames 
                                                Storyboard.TargetName="ContentPresenter" 
                                                Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                             Value="{ThemeResource ButtonBackgroundDisabled}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames 
                                                Storyboard.TargetName="ContentPresenter" 
                                                Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" 
                                                             Value="{ThemeResource ButtonBorderBrushDisabled}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames 
                                                Storyboard.TargetName="ContentPresenter" 
                                                Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" 
                                                             Value="{ThemeResource ButtonForegroundDisabled}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </ContentPresenter>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>