0

The template is defined as:

<ContentPage.Resources>
    <DataTemplate x:Key="MenuOptionTemplate">
        <controls:MenuButtonControl />
    </DataTemplate>
</ContentPage.Resources>

<ScrollView Orientation="Vertical">
    <FlexLayout
        AlignContent="Start"
        AlignItems="Start"
        BindableLayout.ItemTemplate="{StaticResource MenuOptionTemplate}"
        BindableLayout.ItemsSource="{Binding MenuOptions}"
        JustifyContent="SpaceEvenly"
        VerticalOptions="Start"
        Wrap="Wrap" />
</ScrollView>

The MenuButtonControl is define as:

...
<ImageButton
    Source="{AppThemeBinding Light={Binding LightImageSource},
                             Dark={Binding DarkImageSource}}"/>
...

MenuOptions is is dynamically generated based on the user's role, but basically each menu option is create like so:

new MenuOption {
  Title = "My Title",
  LightImageSource = "sample_light",
  DarkImageSource = "sample_dark"
}

{Binding LightImageSource} does not work.

So what is the correct way to implement this?

Cfun
  • 8,442
  • 4
  • 30
  • 62
KT-Guy
  • 33
  • 4

1 Answers1

0

Because AppThemeBinding.Light is a markup extension (inherit from IMarkupExtension) property and not a BindableProperty you cannot use DynamicResource or Binding with it.

Thus you cannot use AppThemeBinding in this case. But you can use bindings (without AppThemeBinding), converters.. (see answers on the linked question), you just need to add the logic to conditionally set the appropriate image source based on the active theme using:

Application.Current.RequestedTheme;

Binding image source dynamically on xamarin forms

AppThemeBinding source

RequestedTheme

Edit

To react on theme changes use the event rather than testing the property RequestedThemeChanged:

How to detect Xamarin Forms System Theme Change

Cfun
  • 8,442
  • 4
  • 30
  • 62
  • I tried that approach. If the app is running and you switch mode, the image doesn't change. It does when the app is restarted. – KT-Guy Sep 01 '22 at 16:38
  • I was hoping for a way to get the app to update the UI without having to restart the app. Similar to the Label control changing when defined like this: TextColor="{AppThemeBinding Light={StaticResource LightMenuOptionTextColor}, Dark={StaticResource DarkMenuOptionTextColor}}" – KT-Guy Sep 01 '22 at 16:47
  • i see, please check my edit, you don't need to restart the app if you react on the event – Cfun Sep 01 '22 at 16:57
  • I started down that path too. This is my first Xamarin project so I am inexperienced. Anyway, I did create method like so: Application.Current.RequestedThemeChanged += (s, a) => {ThemeChanged();}; I am not sure how to access the active page and the templated controls to make the changes from within the method ThemeChanged(). – KT-Guy Sep 01 '22 at 17:06
  • i can't tell as i don't have enough data on your project, but i believe this should go to separate question – Cfun Sep 01 '22 at 17:08
  • OK, see [How to Change an DataTemplated ImageButton Image when Theme Changed](https://stackoverflow.com/questions/73573553/how-to-change-an-datatemplated-imagebutton-image-when-theme-changed) – KT-Guy Sep 01 '22 at 17:47
  • ok i will check, please mark my answer as accepted if it was helpful as we are going to follow up from your new question – Cfun Sep 01 '22 at 17:50