UWP中Visual State Manager的PointerOver与Pressed状态失效排查

我帮你排查出几个导致VisualStateManager无法正常工作的核心问题，结合AppBarButton的实现逻辑，下面逐一说明并给出修复方案：

问题1：UserControl没有自动状态切换的能力 #

AppBarButton继承自ButtonBase，内置了指针事件监听和状态自动切换的逻辑，但你的自定义UserControl是基础控件，不会自动识别PointerOver、Pressed这些状态，必须手动处理指针事件来触发状态切换。

问题2：Storyboard的目标元素不存在 #

你在Normal状态里写了<PointerUpThemeAnimation Storyboard.TargetName="ContentRoot" />，但XAML里根本没有名为ContentRoot的元素，动画自然无法执行。另外AppBarButton的指针动画通常针对图标容器，而非文本，这点也需要调整。

问题3：RevealBrush状态设置无效 #

你通过Setter Target="Root.(RevealBrush.State)"修改状态，但如果Root的Background一开始不是RevealBrush类型，这个设置不会生效。需要先把初始Background设为AppBarButton对应的RevealBrush资源。

问题4：VisualStateGroups位置建议 #

虽然XAML元素顺序不影响功能，但把VisualStateManager.VisualStateGroups放在根Grid的最前面，代码结构会更清晰，也避免被其他元素定义干扰。

修复后的完整代码 #

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="{ThemeResource AppBarButtonRevealBackground}" 
          CornerRadius="{x:Bind CornerRadius, Mode=OneWay}"
          PointerEntered="Root_PointerEntered"
          PointerExited="Root_PointerExited"
          PointerPressed="Root_PointerPressed"
          PointerReleased="Root_PointerReleased"
          Tapped="Root_Tapped">
        <!-- 把VisualStateGroups放在最前面，结构更清晰 -->
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal">
                    <Storyboard>
                        <!-- 修正动画目标为图标容器ContentViewbox -->
                        <PointerUpThemeAnimation Storyboard.TargetName="ContentViewbox" />
                    </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="ContentViewbox" />
                    </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="ContentViewbox" />
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        
        <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, Mode=OneWay}" 
                              Foreground="{x:Bind Foreground, Mode=OneWay}" />
        </Viewbox>
        <TextBlock x:Name="LabelTextBlock" Grid.Column="2" 
                   Margin="0,0,10,0" VerticalAlignment="Center" 
                   AutomationProperties.AccessibilityView="Raw" 
                   FontSize="{x:Bind FontSize, Mode=OneWay}" 
                   FontWeight="{x:Bind FontWeight, Mode=OneWay}" 
                   Foreground="{x:Bind Foreground, Mode=OneWay}" 
                   Text="{x:Bind Label, Mode=OneWay}" 
                   TextAlignment="Center" TextWrapping="Wrap" />
    </Grid>
</UserControl>

C#后台代码 #

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;

namespace SMPlayer
{
    public sealed partial class IconTextButton : UserControl
    {
        public IconTextButton()
        {
            this.InitializeComponent();
        }

        // 定义Icon依赖属性
        public static readonly DependencyProperty IconProperty =
            DependencyProperty.Register(nameof(Icon), typeof(object), typeof(IconTextButton), new PropertyMetadata(null));

        public object Icon
        {
            get { return GetValue(IconProperty); }
            set { SetValue(IconProperty, value); }
        }

        // 定义Label依赖属性
        public static readonly DependencyProperty LabelProperty =
            DependencyProperty.Register(nameof(Label), typeof(string), typeof(IconTextButton), new PropertyMetadata(string.Empty));

        public string Label
        {
            get { return (string)GetValue(LabelProperty); }
            set { SetValue(LabelProperty, value); }
        }

        // 定义Foreground依赖属性
        public static readonly DependencyProperty ForegroundProperty =
            DependencyProperty.Register(nameof(Foreground), typeof(Windows.UI.Xaml.Media.Brush), typeof(IconTextButton), new PropertyMetadata(Application.Current.Resources["AppBarButtonForeground"]));

        public Windows.UI.Xaml.Media.Brush Foreground
        {
            get { return (Windows.UI.Xaml.Media.Brush)GetValue(ForegroundProperty); }
            set { SetValue(ForegroundProperty, value); }
        }

        // 定义FontSize依赖属性
        public static readonly DependencyProperty FontSizeProperty =
            DependencyProperty.Register(nameof(FontSize), typeof(double), typeof(IconTextButton), new PropertyMetadata(12d));

        public double FontSize
        {
            get { return (double)GetValue(FontSizeProperty); }
            set { SetValue(FontSizeProperty, value); }
        }

        // 定义FontWeight依赖属性
        public static readonly DependencyProperty FontWeightProperty =
            DependencyProperty.Register(nameof(FontWeight), typeof(Windows.UI.Text.FontWeight), typeof(IconTextButton), new PropertyMetadata(Windows.UI.Text.FontWeight.Normal));

        public Windows.UI.Text.FontWeight FontWeight
        {
            get { return (Windows.UI.Text.FontWeight)GetValue(FontWeightProperty); }
            set { SetValue(FontWeightProperty, value); }
        }

        // 定义CornerRadius依赖属性
        public static readonly DependencyProperty CornerRadiusProperty =
            DependencyProperty.Register(nameof(CornerRadius), typeof(CornerRadius), typeof(IconTextButton), new PropertyMetadata(new CornerRadius(20)));

        public CornerRadius CornerRadius
        {
            get { return (CornerRadius)GetValue(CornerRadiusProperty); }
            set { SetValue(CornerRadiusProperty, value); }
        }

        // 手动处理指针事件，切换VisualState
        private void Root_PointerEntered(object sender, PointerRoutedEventArgs e)
        {
            VisualStateManager.GoToState(this, "PointerOver", true);
        }

        private void Root_PointerExited(object sender, PointerRoutedEventArgs e)
        {
            VisualStateManager.GoToState(this, "Normal", true);
        }

        private void Root_PointerPressed(object sender, PointerRoutedEventArgs e)
        {
            VisualStateManager.GoToState(this, "Pressed", true);
        }

        private void Root_PointerReleased(object sender, PointerRoutedEventArgs e)
        {
            VisualStateManager.GoToState(this, "Normal", true);
        }

        private void Root_Tapped(object sender, TappedRoutedEventArgs e)
        {
            // 这里可以添加自定义点击逻辑，或者定义一个RoutedEvent让外部绑定
        }
    }
}

额外说明 #

• 所有x:Bind绑定的属性都必须定义为依赖属性，这样才能支持OneWay模式的动态更新。
• 后台的指针事件处理确保了状态切换的时机和AppBarButton一致。
• 修正后的动画目标和AppBarButton保持统一，视觉效果更接近原生控件。

内容的提问来源于stack exchange，提问作者Seaky Lone