Avalonia 11: How to use Image defined in ResourceDictionary depended on Theme

Question

For my Avalonia App i want to use a different Image whether the App is in light or dark mode. Therefor I have the following Styles.axaml file:

<ResourceDictionary xmlns="https://github.com/avaloniaui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <ResourceDictionary.ThemeDictionaries>
        <ResourceDictionary x:Key="Light">
            <SolidColorBrush x:Key="FontColor">#000000</SolidColorBrush>
            <SolidColorBrush x:Key="Accent">#00adb5</SolidColorBrush>
            <ImageBrush x:Key="SomeImage" Source="/Assets/SomeImage-Light.png"/>
        </ResourceDictionary>
        <ResourceDictionary x:Key="Dark">
            <SolidColorBrush x:Key="FontColor">#ffffff</SolidColorBrush>
            <SolidColorBrush x:Key="Accent">#00adb5</SolidColorBrush>
            <ImageBrush x:Key="SomeImage" Source="/Assets/SomeImage-Dark.png"/>
        </ResourceDictionary>
    </ResourceDictionary.ThemeDictionaries>
    
</ResourceDictionary>

I use this in my App.axaml as follows:

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="SomeNamespace.App"
             RequestedThemeVariant="Default">

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceInclude Source="/Accents/Styles.axaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

    <Application.Styles>
        <FluentTheme>
            <FluentTheme.Palettes>
                <ColorPaletteResources x:Key="Light" RegionColor="#EEEEEE" Accent="#00ADB5"/>
                <ColorPaletteResources x:Key="Dark" RegionColor="#2b2b2b" Accent="#0D7377"/>
            </FluentTheme.Palettes>
        </FluentTheme>
    </Application.Styles>
    
</Application>

With this I can use my defined styles like this: <SomeElement Background="{DynamicResource Accent}"/>.

But doing this for the Image does not work. Doing it as follows I get no error but the Image is also not beeing displayed: <Image Source="{DynamicResource SomeImage}"/>.

What am I doing wrong and how can I display an Image depended on the Light and Dark mode?

Answer 1

You should have noticed an error message like the following (for example in the Output Window in Visual Studio) when you debug the application:

Error in binding to 'Avalonia.Controls.Image'.'Source': 'Unable to convert object 'Avalonia.Media.ImageBrush' of type 'Avalonia.Media.ImageBrush' to type 'Avalonia.Media.IImage'.

This is because the Image.Source property expects an instance of a type that implements IImage, e.g. a Bitmap, but your resources are of type ImageBrush.

Change your ResourceDictionary like this:

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Light">
        ...
        <Bitmap x:Key="SomeImage">/Assets/SomeImage-Light.jpg</Bitmap>
    </ResourceDictionary>
    <ResourceDictionary x:Key="Dark">
        ...
        <Bitmap x:Key="SomeImage">/Assets/SomeImage-Dark.jpg</Bitmap>
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

---

Alternatively you could keep the ImageBrush resources, but then you would use them like any other Brush, i.e. for the Background or Fill property, like

<Rectangle Fill="{DynamicResource SomeImage}"/>