wpf - 如何使用 Properties.Resources 中的图像从 WPF 中的代码隐藏动态更改图像源？

Question

我有一个 WPF 应用程序，需要向用户提供有关内部状态的反馈。该设计有三个图像，分别称为红色、黄色和绿色。根据状态，一次会显示其中一张图像。要点如下:

• 这三个图像位于代码隐藏的 Properties.Resources 中
• 一次仅显示一张图像。
• 状态更改来自代码隐藏过程，而不是来自用户。
• 我想绑定(bind)一个图像控件，以便可以从代码隐藏中更改图像。

我假设我需要一个图像转换器将 JPG 图像更改为图像源，例如:

<小时/>

[ValueConversion(typeof(System.Drawing.Bitmap), typeof(ImageSource))]
public class BitmapToImageSourceConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var bmp = value as System.Drawing.Bitmap;
        if (bmp == null)
            return null;
        return System.Windows.Interop.Imaging.CreateBitmapSourceFromHBitmap(
                    bmp.GetHbitmap(),
                    IntPtr.Zero,
                    Int32Rect.Empty,
                    BitmapSizeOptions.FromEmptyOptions());
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotSupportedException();
    }
}

<小时/>

我更愿意在初始化期间转换图像一次并保留图像源列表。我还假设我需要一个依赖属性来绑定(bind)控件，但我不确定如何使用此图像源列表进行设置:

<小时/>

    // Dependancy Property for the North Image
    public static readonly DependencyProperty NorthImagePathProperty
        = DependencyProperty.Register(
            "NorthImagePath",
            typeof(ImageSource),
            typeof(MainWindow),
            new PropertyMetadata("**Don't know what goes here!!!**"));

    // Property wrapper for the dependancy property
    public ImageSource NorthImagePath
    {
        get { return (ImageSource)GetValue(NorthImagePathProperty); }
        set { SetValue(NorthImagePathProperty, value); }
    }

Answer 1

虽然 WPF 项目中的图像资源会在 Resources.Designer.cs 中生成 System.Drawing.Bitmap 属性，但您可以直接创建 BitmapImage来自该资源。您只需设置 Build Action将图像文件添加到Resource(而不是默认的None)。

如果您的 Visual Studio 项目的 Resources 文件夹中有一个文件 Red.jpg，则创建一个 BitmapImage 将如下所示。它使用 WPF Pack Uri .

var uri = new Uri("pack://application:,,,/Resources/Red.jpg");
var bitmap = new BitmapImage(uri);

如果您有 Image在 XAML 中的某处声明的控件如下所示:

<Image x:Name="image"/>

您可以简单地将图像的 Source 属性设置为后面代码中的 BitmapImage:

image.Source = bitmap;

<小时/>

如果您希望通过绑定(bind)来设置 Source 属性，您可以创建一个返回图像 URI 的 string 属性。该字符串将通过内置 TypeConverter 自动转换为 BitmapImage在 WPF 中。

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        DataContext = this;
        ImageUri = "pack://application:,,,/Resources/Red.jpg";
    }

    public static readonly DependencyProperty ImageUriProperty =
        DependencyProperty.Register("ImageUri", typeof(string), typeof(MainWindow));

    public string ImageUri
    {
        get { return (string)GetValue(ImageUriProperty); }
        set { SetValue(ImageUriProperty, value); }
    }
}

在 XAML 中，您可以像这样绑定(bind)到该属性:

<Image Source="{Binding ImageUri}"/>

<小时/>

当然，您也可以将属性声明为 ImageSource 类型

public static readonly DependencyProperty ImageProperty =
    DependencyProperty.Register("Image", typeof(ImageSource), typeof(MainWindow));

public ImageSource Image
{
    get { return (ImageSource)GetValue(ImageProperty); }
    set { SetValue(ImageProperty, value); }
}

并以相同的方式绑定(bind):

<Image Source="{Binding Image}"/>

现在您可以预加载图像并根据需要将它们放入属性中:

private ImageSource imageRed =
    new BitmapImage(new Uri("pack://application:,,,/Resources/Red.jpg"));
private ImageSource imageBlue =
    new BitmapImage(new Uri("pack://application:,,,/Resources/Blue.jpg"));
...
Image = imageBlue;

<小时/>

更新:毕竟，您的图像不需要是 Visual Studio 项目中的资源。您只需添加一个项目文件夹，将图像文件放入该文件夹并将其构建操作设置为Resource。例如，如果您调用文件夹 Images，则 URI 将为 pack://application:,,,/Images/Red.jpg。