UWP Visual State Manager Not Working for PointerOver and Pressed States

Question

I have a custom user control which is like a icon button with text. I want it to have the same PointerOver and Pressed animations as AppBarButton but the VisualStateManager doesn't seem to be working.

This is the xaml of the control:

<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>

What is wrong with my code? Thanks in advance!

Answer 1

UWP Visual State Manager Not Working for PointerOver and Pressed States

Please check this document, you need to use VisualStateManager invoke GoToState method to transition between states in the code behind within the matched event handler .

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