移除 ListViewItem 按下动画 (PointerDownThemeAnimation)

Question

我在我的应用程序中添加了一个汉堡菜单，我正在尝试重建 Windows 10 应用程序（如地图）中使用的“原始”汉堡菜单。

我更改了汉堡菜单的 ListViewItem 样式：

  <Style x:Key="NavigationMenuListViewItemStyle" 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="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="Height" Value="48"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListViewItem">
                        <ListViewItemPresenter CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" ContentMargin="{TemplateBinding Padding}" CheckMode="Inline" CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}" DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}" DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}" DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}" FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" PointerOverForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}" PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}" PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}" ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" SelectedPressedBackground="{ThemeResource ApplicationAccentLowBrush}" SelectionCheckMarkVisualEnabled="True" SelectedForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}" SelectedPointerOverBackground="{ThemeResource ApplicationAccentLowBrush}" SelectedBackground="{ThemeResource ApplicationAccentLowBrush}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
                            <ListViewItemPresenter.Content>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="48" />
                                        <ColumnDefinition />
                                    </Grid.ColumnDefinitions>
                                    <FontIcon Grid.Column="0" FontSize="16" Glyph="{TemplateBinding Tag}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                    <TextBlock Grid.Column="1" Margin="12,0,0,0" Text="{TemplateBinding Content}"></TextBlock>
                                </Grid>
                            </ListViewItemPresenter.Content>
                        </ListViewItemPresenter>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

我的汉堡菜单：

 <SplitView x:Name="spvNavigationMenu" CompactPaneLength="48" DisplayMode="CompactOverlay" OpenPaneLength="256" RequestedTheme="Dark">
    <SplitView.Pane>
        <StackPanel>
            <ToggleButton x:Name="tobNavigationMenu" Content="APPLICATION NAME" IsChecked="{Binding IsPaneOpen, ElementName=spvNavigationMenu, Mode=TwoWay}" Style="{StaticResource NavigationMenuToggleButtonStyle}"/>
            <ListView Style="{StaticResource NavigationMenuListViewStyle}" ItemContainerStyle="{StaticResource NavigationMenuListViewItemStyle}">
                <ListViewItem Content="Home" Tag="&#xE707;"/>
                <ListViewItem Content="Search" Tag="&#xE11A;"/>
                <ListViewItem Content="Friends" Tag="&#xE716;"/>
                <ListViewItem Content="Help" Tag="&#xE897;"/>
            </ListView>
        </StackPanel>
    </SplitView.Pane>
    <SplitView.Content>
        <Frame x:Name="fraMain">
            <Frame.ContentTransitions>
                <TransitionCollection>
                    <NavigationThemeTransition>
                        <NavigationThemeTransition.DefaultNavigationTransitionInfo>
                            <EntranceNavigationTransitionInfo/>
                        </NavigationThemeTransition.DefaultNavigationTransitionInfo>
                    </NavigationThemeTransition>
                </TransitionCollection>
            </Frame.ContentTransitions>
        </Frame>
    </SplitView.Content>
</SplitView>

它看起来像原来的汉堡菜单，但是当我按下 ListViewItem 时，会播放 PointerDownThemeAnimation。如何删除动画？

（如果有人对汉堡菜单样式感兴趣，可以问我。我可以发布其余样式）

Answer 1

PointerDownThemeAnimation 与ListViewItemPresenter 一起提供，但ListViewItemPresenter 没有Template 属性供我们更改其行为。所以我们需要使用UIElement 树和视觉状态而不是ListViewItemPresenter。然后在视觉状态下，我们可以根据自己的需求自定义动画。以下是没有PointerDownThemeAnimation 的示例样式：

<Style x:Key="MyListViewItemStyle" TargetType="ListViewItem">
    <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="CommonStates">
                            <VisualState x:Name="Normal">
                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <DoubleAnimation Duration="0"
                                                     Storyboard.TargetName="BorderBackground"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="1" />
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <DoubleAnimation Duration="0"
                                                     Storyboard.TargetName="BorderBackground"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="1" />
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <DoubleAnimation Duration="0"
                                                     Storyboard.TargetName="BorderBackground"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="1" />
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListAccentLowBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PointerOverSelected">
                                <Storyboard>
                                    <DoubleAnimation Duration="0"
                                                     Storyboard.TargetName="BorderBackground"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="1" />
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListAccentMediumBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PressedSelected">
                                <Storyboard>
                                    <DoubleAnimation Duration="0"
                                                     Storyboard.TargetName="BorderBackground"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="1" />
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListAccentHighBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="DisabledStates">
                            <VisualState x:Name="Enabled" />
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation Duration="0"
                                                     Storyboard.TargetName="ContentBorder"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="{ThemeResource ListViewItemDisabledThemeOpacity}" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Rectangle x:Name="BorderBackground"
                               Control.IsTemplateFocusTarget="True"
                               Fill="{ThemeResource SystemControlHighlightListAccentLowBrush}"
                               IsHitTestVisible="False"
                               Opacity="0" />

                    <ContentPresenter x:Name="ContentPresenter"
                                      Margin="0"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                      ContentTransitions="{TemplateBinding ContentTransitions}">
                        <ContentPresenter.Content>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="48" />
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
                                <FontIcon Grid.Column="0"
                                          HorizontalAlignment="Center"
                                          VerticalAlignment="Center"
                                          FontSize="16"
                                          Glyph="{TemplateBinding Tag}" />
                                <TextBlock Grid.Column="1"
                                           Margin="12,0,0,0"
                                           Text="{TemplateBinding Content}" />
                            </Grid>
                        </ContentPresenter.Content>
                    </ContentPresenter>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

您可以继续编辑此Template 以满足您的需求。