UWP - VisualStates SelectionStates“已选择和未选择”在 ListviewItem 样式中不起作用答案

【问题标题】：UWP - VisualStates SelectionStates "Selected and Unselected" is not working in ListviewItem StyleUWP - VisualStates SelectionStates“已选择和未选择”在 ListviewItem 样式中不起作用
【发布时间】：2016-06-29 06:00:13
【问题描述】：

我正在开发 UWP Win10 VS2015 应用程序，并在 ListviewItem 样式中使用 VisualStates ...我在 FocusStates 中有动画/故事板，它工作正常，但问题是当我们在 Listview 外部单击时，我们失去了焦点，然后动画结束。

其实我需要在 Selected visualState 上开始动画，在 Unselected visualState 上结束动画。动画效果很好，但仅适用于 PointerOver、PointerPressed、PointerFocused、Unfocused 等，但我需要在 Selected 和 Unselected 视觉状态上使用它。

当我单击 ListviewItem 时，色带向右展开，当我单击另一个项目时，先前聚焦的 ListviewItem 的色带被折叠，当前聚焦的色带被展开。我已经这样做了，它在 FocusStates Visualstates(PointerFocus /Unfocus）但问题是当我什至在 Listview 外部单击时，色带折叠，因为它失去焦点并且触发了 Unfocus 视觉状态......但我需要在 Selected/Unselected 视觉状态上使用它，这样即使我们在 Listview 项目之外单击在我单击另一个列表视图项之前，它不会 LostFocus。请帮忙。

Colorband 的 Storyboard 和所有的 Visualstates 都在样式代码中。正如我在上面所说的，这段代码和动画在给定的样式代码下工作得很好，但是如果我删除 FocusStates ......它将无法在 SelectionStates 上工作......而且我需要在 SelectionStates 上使用它。

【问题讨论】：

查看此链接。 msdn.microsoft.com/en-us/library/windows/apps/mt299136.aspx。选中和未选中的视觉状态组是错误的
你想要什么动画？
Hay @GraceFeng-MSFT，我已经用屏幕截图更新了我的问题，最后我确实需要一些更多细节。我也通过另一个问题发布了这个，但程序不同......所以也看看这个和那个。提前致谢。 stackoverflow.com/questions/35933968/…
你的意思是你希望每个listviewitems在你点击listview之外的最后一次点击item时保持它的样式？
@ZiaUrRahman，如果我要你的样品，是不是太过分了？我只是测试了你的代码，一旦我点击它就永远不会折叠它。如果你分享一个小演示来解决这个问题会容易得多。而且我可以看到你做得很好，我喜欢你照片中的风格。

标签： win-universal-app universal

【解决方案1】：

列表视图自定义选中和未选中状态的样式

<Style x:Key="ListViewItemStyle1" TargetType="ListViewItem">
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
            <Setter Property="TabNavigation" Value="Local"/>
            <Setter Property="IsHoldingEnabled" Value="True"/>
            <Setter Property="Padding" Value="12,0,12,0"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}"/>
            <Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListViewItem">
                        <Grid x:Name="ContentBorder"
              Background="{TemplateBinding Background}"
              BorderBrush="{TemplateBinding BorderBrush}"
              BorderThickness="{TemplateBinding BorderThickness}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CustomStates">
                                    <VisualState x:Name="Unselected">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0:0:0.3" From="60" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="colorBand" EnableDependentAnimation="True">
                                                <DoubleAnimation.EasingFunction>
                                                    <QuadraticEase EasingMode="EaseOut"/>
                                                </DoubleAnimation.EasingFunction>
                                            </DoubleAnimation>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="CustomSelected">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0:0:0.3" From="1" To="60" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="colorBand" EnableDependentAnimation="True">
                                                <DoubleAnimation.EasingFunction>
                                                    <QuadraticEase EasingMode="EaseOut"/>
                                                </DoubleAnimation.EasingFunction>
                                            </DoubleAnimation>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                    </VisualState>
                                    <VisualState x:Name="PointerOver">
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                    </VisualState>
                                    <VisualState x:Name="Selected">
                                    </VisualState>
                                    <VisualState x:Name="PressedSelected">
                                    </VisualState>
                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="colorBand" 
                                    Background="Red"                                    

                                    HorizontalAlignment="Left"
                                    Width="15" 
                                    Height="20" 
                                    RenderTransformOrigin="0.5,0.5">
                                <Border.RenderTransform>
                                    <CompositeTransform/>
                                </Border.RenderTransform>
                            </Border>
                            <!--<Rectangle x:Name="BorderBackground"
                    IsHitTestVisible="False"
                    Fill="{ThemeResource SystemControlHighlightListAccentLowBrush}"
                    Opacity="0"
                    Control.IsTemplateFocusTarget="True"/>-->
                            <Grid x:Name="ContentPresenterGrid"
              Background="Transparent"
              Margin="0,0,0,0">
                                <Grid.RenderTransform>
                                    <TranslateTransform x:Name="ContentPresenterTranslateTransform"/>
                                </Grid.RenderTransform>
                                <ContentPresenter x:Name="ContentPresenter"
                            ContentTransitions="{TemplateBinding ContentTransitions}"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            Content="{TemplateBinding Content}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            Margin="{TemplateBinding Padding}"/>
                            </Grid>
                            <!-- The 'Xg' text simulates the amount of space one line of text will occupy.
                          In the DataPlaceholder state, the Content is not loaded yet so we
                          approximate the size of the item using placeholder text. -->

                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

后面的代码

private void ListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (e.AddedItems != null)
            {
                foreach (var item in e.AddedItems)
                {
                    Debug.WriteLine(item);
                    ListViewItem litem = (sender as ListView).ContainerFromItem(item) as ListViewItem;
                    if (litem != null)
                    {
                        VisualStateManager.GoToState(litem, "CustomSelected", true);
                    }
                }
            }
            if (e.RemovedItems != null)
            {
                foreach (var item in e.RemovedItems)
                {
                    ListViewItem litem = (sender as ListView).ContainerFromItem(item) as ListViewItem;
                    if (litem != null)
                    {
                        VisualStateManager.GoToState(litem, "Unselected", true);
                    }
                }
            }

        }

【讨论】：

您告诉 RemovedItem 列表为空。我已经检查了 Windows 10 它对我有用。请发布listview控制代码来检查问题
感谢您的关注...我检查的样式代码不起作用...您是否为演示创建了 CustomStates 或者这是视觉状态的实际部分？好的，稍后我也会为 RemovedItem 分享 SelectionChangedevent 代码。谢谢。
我已经创建了它，它不是列表视图视觉状态的实际部分。只有当您更改代码中的视觉状态时，它才会起作用
请检查选择更改事件代码。它为我工作。 e.RemovedItems 不会为空
是的，你是对的，e.RemovedItems 不会为空......这是我的错误......但是请指导我关于自定义 OR SelectionStates 视觉状态......我被困在这个.

【解决方案2】：

如果您实现了 ISelectionInfo，RemovedItems 似乎将为空。在这种情况下，您应该将删除的项目保存在 DeselectRange 中，然后在 SelectionChanged 中访问它（在 DeselectRange 之后调用）。

如果您没有上面讨论的自定义视觉状态，那么您将使用 VisualStateManager.GoToState(lvi, "Normal", true)。这将从 ListViewItem (lvi) 中删除突出显示。

这似乎是 ListView 中的一个错误。在单击 ListView 之外的另一个控件然后在 ListView 中选择一个新条目后，它不会检查所选 ListViewItem 的选择状态。

【讨论】：