使用控件时未加载 UserControl 中的外部图像

Posted 2023-04-01

【中文标题】使用控件时未加载 UserControl 中的外部图像

【英文标题】：External image in UserControl not loading when control is used

【发布时间】：2020-11-08 18:00:35

【问题描述】：

我有一个Image，我需要将其从外部文件加载到Button。Image 与最终的可执行文件位于同一目录中的文件夹中。

/Resources/image.png  

它不包含在Project Resources 中，它不应该满足Application 的需求。Image 已加载并显示为 UserControl 很好，但是当我将 UserControl 放入我的主要 View 时， 我收到以下错误：

Cannot locate resource 'views/usercontrols/resources/playerbuttonsicons/repeat-icon.png'.  

如错误所示，UserControl 位于我的Project Tree 中的Views/UserControls 下。 我尝试了各种指定图像路径的方法（绝对、相对、uri、pack 等），但都没有奏效。 如果可能，只能使用xaml 来解决问题。

---

用户控制代码：

<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="Resources/PlayerButtonsIcons/play-icon.png" />
                </Button.Background>
        </Button>
    </DockPanel>
</UserControl>

---

主视图代码：

<Window x:Class="MusicPlayer.MainView"
        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"
        mc:Ignorable="d"
        xmlns:vm="clr-namespace:MusicPlayer.ViewModels"
        xmlns:uc="clr-namespace:MusicPlayer.Views.UserControls"
        x:Name="ParentControl">

    <!--Resources-->
    <Window.Resources>
        <vm:MainViewModel x:Key="VM" />
    </Window.Resources>

    <!--Design-->
    <Grid x:Name="ParentContainer"
                  DataContext="StaticResource VM">  
        <uc:NowPlayingControl />
    </Grid>
</Window>

【问题讨论】：

如果图像文件是UserControl的程序集中的程序集资源，请将其Build Action设置为Resource，并通过MusicPlayer.Views.UserControls;component/Resources/PlayerButtonsIcons/play-icon.png或pack://application:,,,/MusicPlayer.Views.UserControls;component/Resources/PlayerButtonsIcons/play-icon.png等完整的Pack URI加载它

在程序集资源中嵌入图像是最终的解决方案。该文件必须位于外部相关文件夹中，因此可以在不编辑应用程序的情况下对其进行替换。

然后试试pack://siteoforigin:,,,/<AssemblyName>;component/Resources/PlayerButtonsIcons/play-icon.png。见docs.microsoft.com/en-us/dotnet/framework/wpf/app-development/…

siteoforigin 给我以下错误：Could not find a part of the path 'C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\Common7\IDE\MusicPlayer;component\Resources\PlayerButtonsIcons\play-icon.png'. 为什么它引用 Visual Studio 目录而不是项目？

不知道。无论如何，像./Resources/PlayerButtonsIcons/play-icon.png 这样的相对路径当然应该有效，只要您确保它实际上是有效的，即这样的路径相对于应用程序的当前工作目录是有效的。

【参考方案1】：

我通过以下步骤解决了我的问题。

将所有外部文件包含在我的Project Resources 中。将它们标记为Content 和Copy Always。 我没有在运行时将Images 加载到我的UserControl 中，而是将它们加载到我的App.xaml Resources 中。 Images 现在在我的UserControl 中用作StaticResource。

---

App.xaml

<Application x:Class="MusicPlayer.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:MusicPlayer"
             xmlns:ex="clr-namespace:SharpUtilities.WPF"
             StartupUri="Views/MainView.xaml">
    
    <Application.Resources>
        <BitmapImage x:Key="PlayerPlayIcon"
                     UriSource="Resources/play-icon.png" />
    </Application.Resources>
</Application>

---

UserControl.xaml

<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">

    <DockPanel x:Name="ParentContainer">
         <Button x:Name="btnPlay">
                <Button.Background>
                    <ImageBrush ImageSource="StaticResource PlayerPlayIcon" />
                </Button.Background>
        </Button>
    </DockPanel>
</UserControl>