[BUG] Image tint color behavior doesn't get applied from DynamicResource or ViewModel

[hemantbeast]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

On setting the IconTintColorBehavior in Image, the TintColor property is working on setting colors directly or by any StaticResource.
But it isn't working when setting the TintColor as DynamicResource or a binding property from ViewModel.

Expected Behavior

<Image HeightRequest="30" WidthRequest="30" Source="ic_notification"> <Image.Behaviors> <toolkit:IconTintColorBehavior TintColor="{Binding ChangedColor}" /> </Image.Behaviors> </Image>

This should also work like it was working in XF with the Effects.

Steps To Reproduce

1. Open and run the solution from reproduction repository
2. Click the change button & see there is no effect.

Link to public reproduction project repository

https://github.com/hemantbeast/StatusBarSample/tree/tint_color

Environment

- .NET MAUI CommunityToolkit: 3.0.0
- OS: Mac OS 13.0.1
- .NET MAUI: 7.0

Anything else?

No response

[njkoopman]

Are there any updates? The problem also seems to exists with an ImageButton.

[pictos]

@hemantbeast in order to make the Binding working from a VM, you need to set the BindingContext on your behavior.

[njkoopman]

@pictos Thank you for your suggestion. I tried it:
<ImageButton.Behaviors> <toolkit:IconTintColorBehavior x:Name="tintColorBehaviour" TintColor="{Binding ActiveColor}" BindingContext="{Binding BindingContext}" /> </ImageButton.Behaviors>
For me it doesn't work or change be behaviour without setting the BindingContext.

I am using .NET6 with version 2.0.0 of the NET MAUI CommunityToolkit. Running it on a Android Emulator with version 27 of the Android API.

PS for now, I have a workaround updating the TintColor from the code behind.

[rjspencer91]

Also getting an issue with tint colour behaviour and not responding to AppThemeBindings

As well as this, if the source is set as a binding, when the image source updates it seems to remove the tint behaviour and defaults back to white

[daDomas]

We're running also into this or similar issue.
Also we're tried to set the BindingContext of the behavior without success.

            var behavior = new IconTintColorBehavior();
            behavior.SetBinding(IconTintColorBehavior.TintColorProperty, new Binding() 
            {
                Source = _vm,
                Path = "OurPrettyColor",
                Mode = BindingMode.Default
            });
            
            behavior.BindingContext = _vm;
            OurPrettyButton.BindingContext = _vm;
            OurPrettyButton.Behaviors.Add(behavior);

By the way:

• CommunityToolkit.Maui 3.1.0
• CommunityToolkit.Maui.Markup 3.1.0
• CommunityToolkit.Mvvm 8.1.0 pv1
• .NET 7 (down to 6 makes no difference)

[hemantbeast]

@pictos the issue is with the current behavior system, as in Xamarin.Forms there isn't any issue using it with the Effects. Whereas in this the property gets registered once & didn't get update on change.

The solution is to set the new behavior on every property change in the page.cs file which is also not a good practice.

[pictos]

@hemantbeast I believe there's a lack of information here... So behaviors works in a different manner, from docs you can see this:

.NET MAUI does not set the BindingContext of a behavior, because behaviors can be shared and applied to multiple controls through styles.

So, you need to pass your BindingContext to the behavior or use a relative Binding in order make it work with your VM or anything bindable (Not sure about the AppThemeBinding). For more info about more complex ways to do Bidings please see this doc and this one

[brminnick]

Thanks @pictos!

Could you do us a favor and update our Community Toolkit docs to add this info? I know it's a bit repetitive since the .NET MAUI docs already document it, but I imagine we'll continue to get Issues + Discussions opened around this topic if we don't.

I think the best way for us to implement this information in every Behavior doc is to add a new file, communitytoolkit-behavior.md, to the includes/ folder, similar to how we created communitytoolkit-converter.md to describe common functionality included in all converters.

Once includes/communitytoolkit-behavior.md is created with this binding information included, then we can add it to each *-behavior.md doc file, similar to how we include the snippet from communitytoolkit-converter.md in each Converter doc.

Once it's documented, let's close this Issue.

[programatix]

I tried this,

<ImageButton Source="...">
  <ImageButton.Behaviors>
    <toolkit:IconTintColorBehavior
      TintColor="{AppThemeBinding Dark=#ff0000, Light=#00FF00}"
      BindingContext="{Binding BindingContext, Source={RelativeSource AncestorType={x:Type ImageButton}}}" />
  </ImageButton.Behaviors>
</ImageButton

and it caused System.InvalidOperationException: 'Operation is not valid due to the current state of the object.'

Perhaps the developer should provide us, the dummies with some sample in the documentation?