学无先后达者为师!
不忘初心,砥砺前行。

Avalonia 项目如何在资源字典中添加一张位图图片?

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

<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 这是一个异步绑定。

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

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

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

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 资源路径用于初始化位图。

<ResourceDictionary xmlns="https://github.com/avaloniaui"
                    xmlns:img="clr-namespace:Popcorn.Toolkit.UI.Media.Imaging"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <!-- 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>

​调用方式如下:

<Image Source="{DynamicResource EmptyImage}"></Image>
赞(1) 打赏
未经允许不得转载:码农很忙 » Avalonia 项目如何在资源字典中添加一张位图图片?

评论 抢沙发

给作者买杯咖啡

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫

微信扫一扫

登录

找回密码

注册