WinUI NavigationView自定义彩色图标设计器正常但运行时不显示如何解决？

问题原因 #

1. 控件放置位置错误：NavigationViewItem.Content属性对应导航项的文本展示区域，运行时导航栏折叠状态下会隐藏该区域，该属性并非图标专属展示位，NavigationViewItem.Icon才是专门用来承载导航图标的属性。
2. 资源路径解析差异：设计器和运行时的相对路径解析逻辑不同，你使用的/Assets/Icons/HomeIcon.png相对路径在运行时无法正确定位资源。
3. 资源文件配置错误：如果图标文件的生成操作未设置为「内容」，运行时不会被打包到程序包中，无法被加载。

解决方案 #

按以下步骤修改即可解决：

• 调整控件挂载位置，将Image控件放到Icon属性下，Content属性保留用于展示导航文本，同时修改资源路径为带ms-appx:///前缀的绝对路径，示例代码如下：

<winui:NavigationViewItem x:Uid="Shell_Main" helpers:NavHelper.NavigateTo="views:MainPage">
    <winui:NavigationViewItem.Icon>
        <Image Source="ms-appx:///Assets/Icons/HomeIcon.png" Width="25" Height="25" />
    </winui:NavigationViewItem.Icon>
    <winui:NavigationViewItem.Content>
        <!-- 此处放置导航项显示的文本 -->
        <TextBlock x:Uid="Shell_Main_Label" />
    </winui:NavigationViewItem.Content>
</winui:NavigationViewItem>

• 检查图标文件配置：在解决方案资源管理器中右键选中HomeIcon.png文件，选择「属性」，将「生成操作」设置为内容，「复制到输出目录」设置为如果较新则复制。
• 若仍存在图标变色问题，可显式设置Image的Opacity为1，避免继承NavigationView的默认图标样式覆盖彩色效果。

内容的提问来源于stack exchange，提问作者Mohamed Nessim