删除 NavigationMenuItem 上的悬停动画

Question

我想删除 UWP 导航菜单中导航菜单项上显示的悬停动画。我环顾四周，但找不到 NavigationMenuItem 的默认样式。更不用说，为一些微不足道的东西创造一种全新的风格似乎有点过分了。关于如何实现这一目标的任何提示？

Answer 1

这是 NavigationViewItem 的样式。您可以修改 PointerOver VisualState 来更改悬停动画。

<Style  TargetType="NavigationViewItem">
            <Setter Property="Foreground" Value="{ThemeResource NavigationViewItemForeground}" />
            <Setter Property="Background" Value="{ThemeResource NavigationViewItemBackground}" />
            <Setter Property="BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrush}" />
            <Setter Property="BorderThickness" Value="{StaticResource NavigationViewItemBorderThickness}" />
            <Setter Property="UseSystemFocusVisuals" Value="True" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="NavigationViewItem">
                        <Grid
                        x:Name="LayoutRoot"
                        Height="40"
                        Background="{TemplateBinding Background}"
                        Control.IsTemplateFocusTarget="True">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="PointerStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="PointerOver">
                                        <VisualState.Setters>
                                            <Setter Target="LayoutRoot.(RevealBrush.State)" Value="PointerOver" />
                                            <Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundPointerOver}" />
                                            <Setter Target="RevealBorder.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushPointerOver}" />
                                            <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundPointerOver}" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <VisualState.Setters>
                                            <Setter Target="LayoutRoot.(RevealBrush.State)" Value="Pressed" />
                                            <Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundPressed}" />
                                            <Setter Target="RevealBorder.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushPressed}" />
                                            <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundPressed}" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Selected">
                                        <VisualState.Setters>
                                            <Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundSelected}" />
                                            <Setter Target="RevealBorder.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushSelected}" />
                                            <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundSelected}" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="PointerOverSelected">
                                        <VisualState.Setters>
                                            <Setter Target="LayoutRoot.(RevealBrush.State)" Value="PointerOver" />
                                            <Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundSelectedPointerOver}" />
                                            <Setter Target="RevealBorder.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushSelectedPointerOver}" />
                                            <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundSelectedPointerOver}" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="PressedSelected">
                                        <VisualState.Setters>
                                            <Setter Target="LayoutRoot.(RevealBrush.State)" Value="Pressed" />
                                            <Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundSelectedPressed}" />
                                            <Setter Target="RevealBorder.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushSelectedPressed}" />
                                            <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundSelectedPressed}" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="DisabledStates">
                                    <VisualState x:Name="Enabled" />
                                    <VisualState x:Name="Disabled">
                                        <VisualState.Setters>
                                            <Setter Target="LayoutRoot.Opacity" Value="{ThemeResource ListViewItemDisabledThemeOpacity}" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="PaneStates">
                                    <VisualState x:Name="NotClosedCompact" />
                                    <VisualState x:Name="ClosedCompact">
                                        <VisualState.Setters>
                                            <Setter Target="RevealBorder.HorizontalAlignment" Value="Left" />
                                            <Setter Target="RevealBorder.Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CompactPaneLength}" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="IconStates">
                                    <VisualState x:Name="IconVisible" />
                                    <VisualState x:Name="IconCollapsed">
                                        <VisualState.Setters>
                                            <Setter Target="IconBox.Visibility" Value="Collapsed" />
                                            <Setter Target="IconColumn.Width" Value="16" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <!-- Wrap SelectionIndicator in a grid so that its offset is 0,0 - this enables the offset animation. -->
                            <Grid 
                            HorizontalAlignment="Left"
                            VerticalAlignment="Center">
                                <Rectangle
                                x:Name="SelectionIndicator"
                                    Width="6"
                                    Height="24"
                                Fill="{ThemeResource NavigationViewSelectionIndicatorForeground}"
                                Opacity="0.0"/>
                            </Grid>
                            <Border
                            x:Name="RevealBorder"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}" />
                            <Grid Height="40" HorizontalAlignment="Left">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition x:Name="IconColumn" Width="48" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Viewbox x:Name="IconBox"
                                         Child="{TemplateBinding Icon}"
                                Margin="16,12"/>
                                <ContentPresenter x:Name="ContentPresenter"
                                Grid.Column="1"
                                ContentTransitions="{TemplateBinding ContentTransitions}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                Content="{TemplateBinding Content}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                Margin="{TemplateBinding Padding}"/>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Answer 2

您可以按照上一个答案中的说明编辑样式。

或者，也许，像这样将 BorderThickness 设置为 0：

<NavigationView >
    <NavigationView.MenuItems>
        <NavigationViewItem BorderThickness="0" Content="Item1"/>
        <NavigationViewItem BorderThickness="0" Content="Item2"/>
    </NavigationView.MenuItems>
</NavigationView>

删除 NavigationMenuItem 上的悬停动画

Removing the hover animation on NavigationMenuItem

uwp

windows-10-universal

uwp-xaml