Avalonia UI 如何在资源字典中添加一张位图图片？
原创
Avalonia UI 如何在资源字典中添加一张位图图片？
原创
Power
发布于 2025-04-02 00:04:17
发布于 2025-04-02 00:04:17
代码可运行
运行总次数：0
代码可运行
根据 Avalonia UI 的官方文档，可以在视图中使用以下代码将图片文件绑定到 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 UI 这是一个异步绑定。
在必要的情况下，我们需要根据不同的 ThemeVariant 来展示不同的图片：比如在暗色模式下展示亮度更低的产品 LOGO 。
Avalonia UI 并未内置可以直接添加到 ResourceDictionary 中的 Bitmap 对象。而且如果你尝试直接将 Avalonia UI 资源路径（以 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>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
