WPFUI导航栏图标未正常渲染，仅鼠标悬停时显示

开发者阿泽

2026-7-11

WPF UI导航栏图标仅悬停显示问题解决方案

问题根源

在ViewModel中直接实例化SymbolIcon这类UI控件时，控件未正确纳入WPF视觉树，导致默认样式（包括图标前景色）未正常应用，只有鼠标悬停触发样式触发器时图标才会显示。同时WPF-UI 3.0.0-preview4预览版存在此类绑定兼容性问题。

解决方案

方案1：使用NavigationViewItemModel（推荐，符合MVVM规范）

WPF-UI官方推荐用数据模型替代在ViewModel中创建UI控件，NavigationView会自动将模型转换为对应的NavigationViewItem并正确应用样式：

修改MainWindowViewModel.cs中的菜单集合定义：

using Wpf.Ui.Common;
using Wpf.Ui.Controls;
using Wpf.Ui.Mvvm;

[ObservableProperty]
private ObservableCollection<NavigationViewItemModel> _menuItems = new()
{
    new NavigationViewItemModel()
    {
        Content = "MENU PRINCIPAL",
        IconSymbol = SymbolRegular.Home24,
        TargetPageType = typeof(Views.Pages.DashboardPage)
    },
    new NavigationViewItemModel()
    {
        Content = "LISTA CHOFERES",
        IconSymbol = SymbolRegular.ClipboardTaskListLtr24,
        TargetPageType = typeof(Views.Pages.ChoferDataPage)
    },
    // 其余菜单项按此格式修改
};

[ObservableProperty]
private ObservableCollection<NavigationViewItemModel> _footerMenuItems = new()
{
    new NavigationViewItemModel()
    {
        Content = "CONFIGURACION",
        IconSymbol = SymbolRegular.Settings24,
        TargetPageType = typeof(Views.Pages.SettingsPage)
    }
};

方案2：手动绑定SymbolIcon前景色

如果坚持在ViewModel中创建NavigationViewItem，需为SymbolIcon绑定动态资源前景色，确保默认状态下显示：

new NavigationViewItem()
{
    Content = "MENU PRINCIPAL",
    Icon = new SymbolIcon { 
        Symbol = SymbolRegular.Home24,
        Foreground = (Brush)new DynamicResourceExtension("TextFillColorPrimaryBrush")
    },
    TargetPageType = typeof(Views.Pages.DashboardPage)
}