UWP VisualStates in UserControl

Question

I am having a hard time understanding how to use the UWP VisualStateManager correctly. I have defined a UserControl containing some simple Visual States, Here is the XAML:

<UserControl
    x:Class="BingSearch.Views.UserControls.VerticalsTabHeader"
    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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Margin="8 0 8 0"
    mc:Ignorable="d" IsTabStop="False">
    <UserControl.Resources>
        <VisualStateGroup x:Name="CommonStates">
            <VisualStateGroup.Transitions>
                <VisualTransition From="Normal" To="Minimal" 
                          GeneratedDuration="0:0:0.2">
                </VisualTransition>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="Normal">
            </VisualState>
            <VisualState x:Name="Minimal">
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="BubbleGrid" 
                    Storyboard.TargetProperty="Opacity" From="1" To="0" />
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </UserControl.Resources>
    <StackPanel>
        <Grid x:Name="BubbleGrid">
            <Ellipse Width="60" Height="60" Fill="Black" Stroke="White" StrokeThickness="1" />
            <FontIcon
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Glyph="{Binding Glyph}"
                Foreground="White"
                FontSize="26" />
        </Grid>
    </StackPanel>
</UserControl>

In my code behind, when I call VisualStateManager.GoToState(this, "Minimal", true);or VisualStateManager.GoToState(this, "Normal", true);, nothing happens. The return value of the calls are always false, and CommonStates.CurrentState is always null. It seems like my Visual States never got "hooked up" to the UserControl. Is this not the correct way to define Visual States for UserControls?

Answer 1

If you want to use the VisualStateManager correctly in the UserControl, you need to do the following two things:

First you need to wrap your VisualStateGroup inside the

<VisualStateManager.VisualStateGroups>
...
</VisualStateManager.VisualStateGroups>

After that you need to put the VisualStateManager to be the direct child of the Root control in the UserControl as following:

<StackPanel>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
            <VisualStateGroup.Transitions>
                <VisualTransition From="Normal" To="Minimal" 
                      GeneratedDuration="0:0:0.2">
                </VisualTransition>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="Normal">
            </VisualState>
            <VisualState x:Name="Minimal">
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="BubbleGrid" 
                Storyboard.TargetProperty="Opacity" From="1" To="0" />
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Grid x:Name="BubbleGrid">
        <Ellipse Width="60" Height="60" Fill="Black" Stroke="White" StrokeThickness="1" />
        <FontIcon
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Glyph="{Binding Glyph}"
            Foreground="White"
            FontSize="26" />
    </Grid>
</StackPanel>

The result: