主视图中使用UserControl时外部图片加载失败问题

这个问题我之前也碰到过，核心是WPF相对路径的解析上下文会随着控件嵌套层级变化：当你的UserControl单独使用时，相对路径是基于它自身所在的项目目录（Views/UserControls）查找资源；但把它嵌入MainView后，路径解析会切换到MainView所在的根目录，导致它错误地去寻找views/usercontrols/resources/...，而你的图片实际在可执行文件的同目录下，自然找不到。

这里给你一个纯XAML的解决方案，用WPF的Pack URI语法指定从应用程序安装目录（exe所在文件夹）开始查找，彻底避免路径上下文的问题：

修改UserControl中的ImageSource路径 #

把你UserControl里的ImageBrush的ImageSource替换成以下格式：

<ImageBrush ImageSource="pack://siteoforigin:,,,/Resources/PlayerButtonsIcons/play-icon.png" />

这个URI的含义： #

• pack://siteoforigin:,,,：这是WPF的固定语法，表示以应用程序的安装目录（也就是exe所在的文件夹）作为起始路径
• /Resources/PlayerButtonsIcons/play-icon.png：这是相对于exe目录的图片路径，完全匹配你描述的“最终可执行文件同目录的/Resources/PlayerButtonsIcons/play-icon.png”结构

修改后的完整UserControl代码 #

<UserControl x:Class="MusicPlayer.Views.UserControls.NowPlayingControl" 
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:local="clr-namespace:MusicPlayer.Views.UserControls" 
             mc:Ignorable="d" 
             d:DesignWidth="400" 
             x:Name="ParentControl">
    <!--Resources-->
    <UserControl.Resources>
    </UserControl.Resources>
    <!--Design-->
    <DockPanel x:Name="ParentContainer">
        <Button x:Name="btnPlay">
            <Button.Background>
                <ImageBrush ImageSource="pack://siteoforigin:,,,/Resources/PlayerButtonsIcons/play-icon.png" />
            </Button.Background>
        </Button>
    </DockPanel>
</UserControl>

额外检查点 #

1. 确保运行时，你的图片确实存在于[exe目录]/Resources/PlayerButtonsIcons/play-icon.png路径下（如果是手动部署，要把图片文件夹复制到输出目录）
2. 注意路径的大小写，WPF在路径匹配上是区分大小写的，尽量保持文件名和XAML中的路径一致

这个方案完全不需要后台代码，仅通过XAML就能解决问题，而且不管你的UserControl被嵌套到任何层级的容器中，都会正确定位到exe目录下的图片资源。

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