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.