[Bug] xct:TouchEffect.NativeAnimation incompatible with VisualStateManager

[Tommigun1980]

Description

Steps to Reproduce

Hi and thanks again for a great component!

I noticed that if you have a control that gets coloured via the VisualStateManager, something like this:

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="CommonStates">
        <VisualState x:Name="Selected">
            <VisualState.Setters>
                <Setter Property="Style" Value="{StaticResource SelectedStyle}" />
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="Normal">
            <VisualState.Setters>
                <Setter Property="Style" Value="{StaticResource NormalStyle}" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

... where 'SelectedStyle' and 'NormalStyle' assign a background color, and you add the following to the control's root:

xct:TouchEffect.NativeAnimation="True"

... then, when the control is interacted with, it never gets the 'Selected' style's background color.

I am guessing what happens is that TouchEffect samples the the color when interaction starts, and it gets executed before the VisualStateManager has had a chance to change the color to 'Selected' state, so when touch is released the TouchEffect puts back the old style's colors. I haven't looked at the code but this is what it looks like.

I only tested this on iOS.

Expected Behavior

TouchEffect should not prevent VisualStateManager from working.

Actual Behavior

TouchEffect should prevents VisualStateManager from working.

Basic Information

• Version with issue: 1.0.2
• Last known good version: None?
• IDE:
• Platform Target Frameworks:
  • iOS: 14.4

Workaround

Put the state manager higher up in the hierarchy than the TouchEffect.

[AndreiMisiukevich]

Hi, thanks for asking

But it seems you use the wrong name "Selected".
States have names "Normal", "Pressed" and "Hovered".

[Tommigun1980]

Hi, thanks for asking

But it seems you use the wrong name "Selected".
States have names "Normal", "Pressed" and "Hovered".

Hi. It’s my own custom component, and it has a selected state.
I added the TouchEffect to it and it broke the state visualization.

[AndreiMisiukevich]

Well, then it happened because of names conflicts, I guess.

[AndreiMisiukevich]

@Tommigun1980 posted PR

[AndreiMisiukevich]

Fixed in #1056