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?

there is no `UpdateStates(Boolean)` method, do you mean `VisualStateManager.GoToState` method? — kennyzx, Sep 04 '18 at 09:19
yes, i meant VisualStateManager.GoToState, sorry. I am wondering why it does not get triggered by default. I read this post: https://stackoverflow.com/questions/32912308/visualstate-commonstate-doesn%C2%B4t-work-xaml# which says that it should be triggered without explicit call of VisualStateManager.GoToState. — iceteapeach221, Sep 04 '18 at 09:19

score 2 · Answer 1 · answered Sep 04 '18 at 09:49

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.

CommonStates not triggered automatically

1 Answers1