WinUI3 NavigationViewItem样式问题：鼠标悬停时样式失效

问题重现 #

自定义NavigationViewItem样式如下，仅未悬停状态生效，鼠标悬停时恢复默认样式：

<NavigationView.Resources>
    <Style TargetType="NavigationViewItem" x:Key="sx1">
        <Setter Property="Background" Value="{ThemeResource AccentTextFillColorPrimaryBrush}"/>
        <Setter Property="Foreground" Value="{ThemeResource TextOnAccentFillColorPrimaryBrush}"/>
    </Style>
</NavigationView.Resources>

尝试修改模板的方案后，鼠标悬停时应用抛出异常。

正确解决方案 #

NavigationViewItem的视觉状态（如悬停、选中）是通过ControlTemplate定义的，仅设置Style的Setter无法覆盖这些状态下的样式。需要完整重写模板，并修改对应视觉状态的属性：

1. 获取官方默认模板：通过Blend工具导出NavigationViewItem的默认模板，或从WinUI官方文档获取基础模板结构。
2. 复制模板到你的Style中，修改对应视觉状态的属性：
   • 找到PointerOver视觉状态，修改Background和Foreground为目标值
   • 同步修改Pressed、SelectedPointerOver等相关状态，保持样式一致性
3. 示例修改后的完整样式：

<NavigationView.Resources>
    <Style TargetType="NavigationViewItem" x:Key="sx1">
        <Setter Property="Background" Value="{ThemeResource AccentTextFillColorPrimaryBrush}"/>
        <Setter Property="Foreground" Value="{ThemeResource TextOnAccentFillColorPrimaryBrush}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="NavigationViewItem">
                    <Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}" Height="40" Control.IsTemplateFocusTarget="True">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="PointerStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="PointerOver">
                                    <VisualState.Setters>
                                        <Setter Target="LayoutRoot.Background" Value="{ThemeResource AccentTextFillColorPrimaryBrush}"/>
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TextOnAccentFillColorPrimaryBrush}"/>
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <VisualState.Setters>
                                        <Setter Target="LayoutRoot.Background" Value="{ThemeResource AccentTextFillColorPrimaryBrush}"/>
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TextOnAccentFillColorPrimaryBrush}"/>
                                    </VisualState.Setters>
                                </VisualState>
                                <!-- 按需补充Selected、SelectedPointerOver等其他状态的样式修改 -->
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ContentPresenter x:Name="ContentPresenter" 
                                          Content="{TemplateBinding Content}"
                                          Foreground="{TemplateBinding Foreground}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</NavigationView.Resources>

异常排查提示 #

如果应用悬停时抛出异常，通常是以下原因导致：

• 模板中元素名称（如LayoutRoot、ContentPresenter）与默认模板不一致，导致Target找不到对应元素
• ThemeResource引用错误，目标资源不存在于当前主题中
• 遗漏模板必要元素（如IconPresenter、Border），破坏控件布局逻辑

内容的提问来源于stack exchange，提问作者Michael Chourdakis