CODEWITHSUNDEEP
maui.net-maui
user1522446
user1522446

Reputation: 296

Change ImageButton source based on Theme in xaml

I want to change the Source of an ImageButton in xaml based on the Theme (i.e. Light vs Dark). I get a System.NullReferenceException 'Object reference not set to an instance of an object.' when I use the following:

<ImageButton
        Grid.Row="1"
        Margin="10"
        Command="{Binding CreateCommand}"
        Source="{AppThemeBinding Light=add_box_black_48dp.svg, Dark=add_box_light_48dp.svg}"
        HorizontalOptions="End"
        VerticalOptions="End"/>

If I change the Source to the following everything works

Source="add_box_white_48dp"

Can I use AppThemeBinding to change the ImageButton Source in this way?

<Edited on 6/4/2022 to show xaml for cases that work and those that do not work. Also changed the names of the svg files to reflect light and dark cases>

I am using Visual Studio Community 2022 (64-bit) - Preview Version 17.3.0 Preview 1.1

This ImageButton xaml throws the exception:

<ImageButton
    Margin="10"
    Command="{Binding CreateNewAccountCommand}"
    Source="{AppThemeBinding Light=add_light.svg, Dark=add_dark.svg}"
    HorizontalOptions="End"
    VerticalOptions="End"
    BackgroundColor="#376489"
    CornerRadius="8"
    WidthRequest="36"
    HeightRequest="36">
</ImageButton>

This ImageButton xaml works and does not throw an exception

<ImageButton
    Margin="10"
    Command="{Binding CreateNewAccountCommand}"
    Source="add_light.svg"
    HorizontalOptions="End"
    VerticalOptions="End"
    BackgroundColor="#abdbe3"
    CornerRadius="8"
    WidthRequest="36"
    HeightRequest="36">
</ImageButton>

This also works and does not throw an exception

<ImageButton
    Margin="10"
    Command="{Binding CreateNewAccountCommand}"
    Source="add_dark.svg"
    HorizontalOptions="End"
    VerticalOptions="End"
    BackgroundColor="#376489"
    CornerRadius="8"
    WidthRequest="36"
    HeightRequest="36">
</ImageButton>

Upvotes: 3

Views: 1959

Answers (1)

ToolmakerSteve
ToolmakerSteve

Reputation: 21321

To work cross-platform, refer to .png files. These get built automatically by Maui:

  1. Each image resource needs Property/BuildAction: "MauiImage".
  2. Refer to .png in xaml:
Source="{AppThemeBinding Light=add_box_black_48dp.png, Dark=add_box_light_48dp.png}"

Verified by modifying Maui project's default MainPage, to say:

<Image Source="{AppThemeBinding Light=dotnet_bot.png, Dark=dotnet_bot.png}" ... />

This refers to a Media item dotnet_bot.svg, which (I infer) gets converted by "MauiImage" into a .png resource.

NOTE: Maybe the plan is to be able to leave off the extension. This works on Android, but the image does not show on Windows:

<!-- Doesn't work currently on Windows -->
<Image Source="{AppThemeBinding Light=dotnet_bot, Dark=dotnet_bot}" ... />

Upvotes: 5

Related Questions