VisualStateManager 不会恢复到原始状态答案

【问题标题】：VisualStateManager does not revert to original stateVisualStateManager 不会恢复到原始状态
【发布时间】：2016-12-28 00:20:28
【问题描述】：

以下定义用作GridView、SelectionMode“Single”的ItemContainer 样式。当一个元素被选中时，一个特定的字形变为可见以指示选择。

它适用于 Windows 8.1，但在 UWP 中，它接受更改的状态：Selected 使字形出现，但不会恢复到原始状态（状态 Unselected)，即使SelectionChanged 事件将旧的选择作为已删除的项目，字形也会保持选择。

其他状态（如Pressed和Focused）也存在类似问题，为了简单起见，我只是不显示完整的VisualStateManager。

<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>

也试过了

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

但没有帮助。

【问题讨论】：

您确定您的视觉状态组和视觉状态名称正确吗？ msdn.microsoft.com/en-us/library/windows/apps/mt299136.aspx

标签： xaml animation uwp visualstatemanager visualstates

【解决方案1】：

根据您发布的代码，您似乎正在使用 Windows 8.1 中定义的 VisualStateGroup 和 VisualStates。但是，在 UWP 中，这些 VisualStates 已更改。

在GridViewItem styles and templates中，列出了控件默认样式中定义的所有VisualState。如您所见，在 UWP 中，没有“SelectionStates”VisualStateGroup，也没有“Unselected”VisualState。所以你的代码不能在 UWP 中运行。

为了解决您的问题，我建议您根据 UWP 中使用的新 GridViewItem styles and templates 重写您的样式。并且在新样式中，“Normal”和“Selected”视觉状态在同一个视觉状态组中。因此，您可以在“Selected”中显示“SelectingGlyph”并将其隐藏在“Normal”中，例如：

<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>

【讨论】：