Avalonia UI 如何在资源字典中添加一张位图图片？

admin管理员组

文章数量:1442412

Avalonia UI 如何在资源字典中添加一张位图图片？

根据 Avalonia UI 的官方文档，可以在视图中使用以下代码将图片文件绑定到 Image 控件上：

代码语言：javascript代码运行次数：0运行复制

<Grid ColumnDefinitions="*,*,*" RenderOptions.BitmapInterpolationMode="HighQuality">
    <Image Grid.Column="0" Source="avares://LoadingImages/Assets/abstract.jpg" MaxWidth="300" />
    <Image Grid.Column="1" Source="{Binding ImageFromBinding}" MaxWidth="300" />
    <Image Grid.Column="2" Source="{Binding ImageFromWebsite^}" MaxWidth="300" />
</Grid>

Image 控件的 Source 属性可以接受各种类型的图像来源，包括文件路径、URL 或资源。请注意，对于异步图像来源，必须在绑定表达式后使用 ^ 字符，以告诉 Avalonia UI 这是一个异步绑定。

在必要的情况下，我们需要根据不同的 ThemeVariant 来展示不同的图片：比如在暗色模式下展示亮度更低的产品 LOGO 。

Avalonia UI 并未内置可以直接添加到 ResourceDictionary 中的 Bitmap 对象。而且如果你尝试直接将 Avalonia UI 资源路径（以 avares:// 开头的路径）绑定给 Image  控件的 Source 属性，会发现图片无法正常显示。

一个简单的解决方式是添加一个新的类型：AssetBitmap

代码语言：javascript代码运行次数：0运行复制

using System;
using Avalonia.Media.Imaging;
using Avalonia.Platform;
namespace Popcorn.Toolkit.UI.Media.Imaging;
public class AssetBitmap(string url) : Bitmap(AssetLoader.Open(new Uri(url)));

该类型派生自 Bitmap，并向外暴露一个构造函数。接收一个 Avalonia 资源路径用于初始化位图。

代码语言：javascript代码运行次数：0运行复制

<ResourceDictionary xmlns=";
                    xmlns:img="clr-namespace:Popcorn.Toolkit.UI.Media.Imaging"
                    xmlns:x=";>
    <!-- Add Resources Here -->
    <img:AssetBitmap x:Key="EmptyImage">
        <x:Arguments>
            <x:String>avares://Popcorn.Toolkit.UI/Assets/Images/empty-dark.png</x:String>
        </x:Arguments>
    </img:AssetBitmap>
</ResourceDictionary>

这样，调用示例：

代码语言：javascript代码运行次数：0运行复制

<Image Source="{DynamicResource EmptyImage}"></Image>

本文标签： Avalonia UI 如何在资源字典中添加一张位图图片