UWP - VisualStates SelectionStates "Selected and Unselected" 在 ListviewItem 样式中不起作用

Question

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

实际上我需要在 Selected visualState 上开始动画并在 Unselected visualState 上结束动画。动画工作正常，但仅适用于 PointerOver、PointerPressed、PointerFocused、Unfocused 等，但我需要它适用于 Selected 和 Unselected visualstates。

当我点击 ListviewItem 时，Colorband 向右展开，当我点击另一个项目时，之前聚焦的 ListviewItem 的 Colorband 折叠，当前聚焦的 Colorband 展开。我已经这样做了，它在 FocusStates Visualstates 上运行良好(PointerFocus/Unfocus) 但问题是，当我什至在 Listview 外部单击时，Colorband 崩溃了，因为它失去了焦点并且触发了 Unfocus visualstate ...但我需要在 Selected/Unselected visualstates 上，所以即使当我们在 Listview 项之外单击它不会 LostFocus，直到我单击另一个 listview 项。请帮助。

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

Answer 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);
                    }
                }
            }

        }

Answer 2

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

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

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

UWP - VisualStates SelectionStates "Selected and Unselected" 在 ListviewItem 样式中不起作用

UWP - VisualStates SelectionStates "Selected and Unselected" is not working in ListviewItem Style

win-universal-app

universal