在 Avalonia 的应用程序资源中将图像路径设置为变量以供重用

Question

I have a logo, which is used in certain places of my application. So I'd like to store it's path in a variable of my App.axaml file, which should allow me to reference this path as variable in the entire application. This works fine with colors like StepBoxBG

<Application.Resources>
    <Color x:Key="StepBoxBG">#5eba00</Color>
    <Image x:Key="LogoPath">/Assets/Logos/logo.png</Image>
</Application.Resources>

which I reference using DynamicResource in eg a border element like this

<Border Background="{DynamicResource StepBoxBG}" Padding="20">
...
</Border>

But when my logo path is referenced in the same way

<Image Height="90" Source="{DynamicResource LogoPath}" />

no logo is displayed. The path is correct, because when I use the path directly in the Image element it works:

<Image Height="90" Source="/Assets/Logos/logo.png" />

I found this question and tried it, so the App.axaml looks like this:

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="using:My.App"
             xmlns:imaging="clr-namespace:Avalonia.Media.Imaging;assembly=Avalonia.Visuals"
             x:Class="ULabs.Image2Card.App">
    <Application.DataTemplates>
        <local:ViewLocator/>
    </Application.DataTemplates>

    <Application.Styles>
        <FluentTheme Mode="Light"/>
    </Application.Styles>

    <Application.Resources>
        <Color x:Key="StepBoxBG">#5eba00</Color>
        <imaging:Bitmap x:Key="LogoPath">
            <x:Arguments>
                <x:String>/Assets/Logos/logo.png</x:String>
            </x:Arguments>
        </imaging:Bitmap>
    </Application.Resources>
</Application>

Now it throws an exception, because it refers this as an absolute path instead of being relative to the project:

System.IO.DirectoryNotFoundException: "Could not find a part of the path 'C:\Assets\Logos\logo.png'."

I set build action to AvaloniaResource so it should be included in my assembly. Also tried <x:String>Assets/Logos/ul-logo.png</x:String> , now the exception refers to the debug folder ( bin/Debug/net5.0/Assets ).

How can I specify a resource that just holds the /Assets/Logos/logo.png path and resolve it as hard-coded paths in the <Image> element would do?

Answer 1

You cannot use a Control subclass (Image) in <Application.Resources>. In WPF you would usually use a BitmapImage.

However, BitmapImage is not available in Avalonia, but you can resort to ImageBrush as an alternative, see this great example: https://github.com/AvaloniaUI/Avalonia/issues/7211#issuecomment-998036759

Adapting the example only slightly to your use case, you could define Logo as follows in App.axaml:

<Application.Resources>
    <Color x:Key="StepBoxBG">#5eba00</Color>
    <ImageBrush x:Key="Logo" Source="/Assets/Logos/logo.png" />
</Application.Resources>

Finally, one would refer to it in this way:

<Image Height="90" Source="{Binding Source={StaticResource Logo}, Path=Source}" />