VisualStateManager does not revert to original state

Question

The following definition is used as ItemContainer style for a GridView, SelectionMode "Single". When an element is selected, a particular glyph becomes visible to indicate selection.

It works right with Windows 8.1, but with UWP, it accepts changed state: Selected makes the glyph to appear, but does not revert to the original state (state Unselected), glyph stays with selection changed, even though SelectionChanged event brings the old selection as removed item.

Similar problems exist for other states (like Pressed and Focused), I just don't show the full VisualStateManager for simplicity.

<Style x:Key="MyItemContainerStyle" TargetType="SelectorItem">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="SelectorItem">
                <Border>
                    <Grid>
                        <!--  Layout of the grid  -->
                    </Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="SelectionStates">
                            <VisualState x:Name="Unselected" />
                            <VisualState x:Name="SelectedUnfocused">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="SelectingGlyph"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="1"
                                                     Duration="0" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="SelectingGlyph"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="1"
                                                     Duration="0" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Tried also

<VisualState x:Name="Unselected">
    <Storyboard>
        <DoubleAnimation Storyboard.TargetName="SelectingGlyph"
                         Storyboard.TargetProperty="Opacity"
                         To="0"
                         Duration="0" />
    </Storyboard>
</VisualState>

But didn't help.

Are you sure your visual state group and visual states names are correct? https://msdn.microsoft.com/en-us/library/windows/apps/mt299136.aspx — Posix, Dec 23 '16 at 09:21

score 0 · Accepted Answer · answered Dec 27 '16 at 13:15

According to the code you've posted, it seems you are using VisualStateGroup and VisualStates defined in Windows 8.1. However, in UWP, these VisualStates have been changed.

In GridViewItem styles and templates, it lists all the VisualStates defined in the control's default style. As you can see, in UWP, there is no "SelectionStates" VisualStateGroup and also no "Unselected" VisualState. So your code won't work in UWP.

To solve your problem, I'd suggest you rewrite your style according to the new GridViewItem styles and templates used in UWP. And in the new style, "Normal" and "Selected" visual state are in the same visual state group. So you can show "SelectingGlyph" in "Selected" and hide it in "Normal" like:

<VisualState x:Name="Normal">
    <Storyboard>
        <DoubleAnimation Storyboard.TargetName="SelectingGlyph"
                         Storyboard.TargetProperty="Opacity"
                         To="0"
                         Duration="0" />
        <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
    </Storyboard>
</VisualState>
...
<VisualState x:Name="Selected">
    <Storyboard>
        <DoubleAnimation Storyboard.TargetName="SelectingGlyph"
                         Storyboard.TargetProperty="Opacity"
                         To="1"
                         Duration="0" />
        ...
    </Storyboard>
</VisualState>

VisualStateManager does not revert to original state

1 Answers1