UWP 视觉状态管理器不适用于 PointerOver 和 Pressed 状态答案

【问题标题】：UWP Visual State Manager Not Working for PointerOver and Pressed StatesUWP 视觉状态管理器不适用于 PointerOver 和 Pressed 状态
【发布时间】：2019-09-09 09:12:56
【问题描述】：

我有一个自定义用户控件，它就像一个带有文本的图标按钮。我希望它具有与AppBarButton 相同的PointerOver 和Pressed 动画，但VisualStateManager 似乎不起作用。

这是控件的xaml：

<UserControl
    x:Class="SMPlayer.IconTextButton"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:SMPlayer"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    d:DesignHeight="300"
    d:DesignWidth="400"
    mc:Ignorable="d">

    <Grid
        x:Name="Root"
        Background="{x:Bind Background}"
        CornerRadius="{x:Bind CornerRadius}"
        Tapped="Root_Tapped">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Viewbox
            x:Name="ContentViewbox"
            Grid.Column="1"
            Height="{ThemeResource AppBarButtonContentHeight}"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Center"
            AutomationProperties.AccessibilityView="Raw">
            <ContentPresenter
                x:Name="IconContent"
                Content="{x:Bind Icon}"
                Foreground="{x:Bind Foreground}" />
        </Viewbox>
        <TextBlock
            x:Name="LabelTextBlock"
            Grid.Column="2"
            Margin="0,0,10,0"
            VerticalAlignment="Center"
            AutomationProperties.AccessibilityView="Raw"
            FontSize="{x:Bind FontSize}"
            FontWeight="{x:Bind FontWeight}"
            Foreground="{x:Bind Foreground}"
            Text="{x:Bind Label}"
            TextAlignment="Center"
            TextWrapping="Wrap" />
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal">
                    <VisualState.Setters>
                        <Setter Target="Root.CornerRadius" Value="20" />
                    </VisualState.Setters>
                    <Storyboard>
                        <PointerUpThemeAnimation Storyboard.TargetName="ContentRoot" />
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="PointerOver">
                    <VisualState.Setters>
                        <Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
                        <Setter Target="Root.Background" Value="{ThemeResource AppBarButtonRevealBackgroundPointerOver}" />
                        <Setter Target="IconContent.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
                        <Setter Target="LabelTextBlock.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
                    </VisualState.Setters>
                    <Storyboard>
                        <PointerUpThemeAnimation Storyboard.TargetName="LabelTextBlock" />
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Pressed">
                    <VisualState.Setters>
                        <Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
                        <Setter Target="Root.Background" Value="{ThemeResource AppBarButtonRevealBackgroundPressed}" />
                        <Setter Target="IconContent.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
                        <Setter Target="LabelTextBlock.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
                    </VisualState.Setters>
                    <Storyboard>
                        <PointerDownThemeAnimation Storyboard.TargetName="LabelTextBlock" />
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</UserControl>

我的代码有什么问题？提前致谢！

【问题讨论】：

标签： xaml uwp win-universal-app visualstatemanager visualstategroup

【解决方案1】：

UWP 视觉状态管理器不适用于 PointerOver 和 Pressed 状态

请检查此document，您需要使用VisualStateManager 调用GoToState 方法在匹配的事件处理程序中的代码中的状态之间进行转换。

VisualStateManager.GoToState(this, "PointerOver", useTransitions);

【讨论】：