CommonStates not triggered automatically

Question

I am trying to use the CommonStates in order to animate my user control. I tried the following:

 <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal">
            </VisualState>
            <VisualState x:Name="PointerOver">
                <Storyboard>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="circle"
                                                  Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                                                  EnableDependentAnimation="True">
                        <LinearColorKeyFrame Value="Red"
                                             KeyTime="0:0:0.02" />
                    </ColorAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="Pressed">
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Ellipse x:Name="circle"
             Height="280"
             Width="280"
             Fill="Green" />
</Grid>

I can produce the changes by manually calling UpdateStates(true), but refering to the documentation the commonstates should be triggered automatically.

Any idea what I do wrong?

Answer 1

Some controls have defined visual states and switch between them in their implementation, for example Button or Checkbox. In such case these states are listed in the documentation like here. Unfortunately Grid is not one of them so if you want similar behavior there, you will need to add event handlers and use GoToState manually. You can also create a custom derived class from Grid to have this behavior reusable.