Maui Community Toolkit Icon Tint Behavior issues

Question

I am trying to color icons at runtime in a collectionview based on Apptheming using Maui Community Toolkit IconTint Behavior. The process in the content page loops through each process which queries a server database, once completed the egg timer icon gets replaced with a tick icon based on the response from the server.

For testing purposes i'm using an Await.Delay(500) to simulate the server trip, this is mostly functioning correctly with the exception that the icon tint behavior does not get applied and retains its original color, this is only happening on IOS, on Android it works perfectly. This has also happened on several other views where i have an Await.Delay(), as soon as i remove this, the behavior gets applied. The data is in an observable collection within a collectionview.

This is the Task that runs the process, for now its just an Await.Delay() used to simulate the delay

  [RelayCommand]
        async Task StartProcess()
        {

            if (await Shell.Current.DisplayAlert("End of Month Report", "Are you sure you want to run the End of Month Report?\n\nThis process will log off all active users.", "Yes", "No"))
            {
                EnableControl = false;

                for (int i = 0; i < Processes.Count; i++)
                {


                    Processes[i] = Process(Processes[i], ProcessResult.Processing, true);

                    await Task.Delay(1500);


                    Processes[i] = Process(Processes[i], ProcessResult.Completed, false);

                }

                await Shell.Current.DisplayAlert("Month End Report", "Month end report completed successfully. ", "Ok");

            }

         }

This is the object that replaces the item in the collection once the process has been completed, i have a converter for which icon to select based on the server response

   MonthEndProcess Process(MonthEndProcess mep, ProcessResult result, bool IsBusy)
        {
            MonthEndProcess process = new MonthEndProcess { completed = result == ProcessResult.Processing ? result.ToString() : result.ToString() + DateTime.Now.ToString(" dd/MM/yyyy hh:mm:ss tt"), description = mep.description, name = mep.name, IsBusy = IsBusy, status = result.ToString() };

            return process;
        }

Here is the image which resides in a template

   <Image Source="{Binding status, Converter={StaticResource MonthEndIconConverter}}"  Grid.Column="0" Grid.RowSpan="2"  HeightRequest="40" WidthRequest="40"  VerticalOptions="Center" HorizontalOptions="Center"  Margin="8"  IsVisible="{Binding IsBusy, Converter={StaticResource InvertedBoolConverter}}">
                <Image.Behaviors>
                    <mct:IconTintColorBehavior TintColor="{AppThemeBinding Dark={StaticResource ListIconColourDark},Light={StaticResource ListIconColour}}" />
                </Image.Behaviors>
            </Image>

Any help would be great.

Answer 1

I have faced with an issue, that it's unable to set IconTintColor from its ViewModel. While it can be accessible from the upper Frame component.

<Frame
        Grid.Column="0"
        BackgroundColor="#F7F7F7"
        BorderColor="#F7F7F7"
        CornerRadius="75"
        HeightRequest="68"
        WidthRequest="68">
        <Image
            HeightRequest="24"
            Source="ic_dialpad"
            WidthRequest="24">
            <Image.Behaviors>
                <toolkit:IconTintColorBehavior TintColor="{Binding KeypadColor, Converter={StaticResource ColorConverter}}" />
            </Image.Behaviors>
            <Image.Triggers>
                <DataTrigger
                    Binding="{Binding IsKeypadUp}"
                    TargetType="Image"
                    Value="true">
                    <Setter Property="BackgroundColor" Value="{StaticResource BtnBase}" />
                </DataTrigger>
            </Image.Triggers>
        </Image>
        <Frame.GestureRecognizers>
            <TapGestureRecognizer Command="{Binding KeypadBtnPressedCommand}" />
        </Frame.GestureRecognizers>
        <Frame.Triggers>
            <DataTrigger
                Binding="{Binding IsKeypadUp}"
                TargetType="Frame"
                Value="true">
                <Setter Property="BackgroundColor" Value="{StaticResource BtnBase}" />
            </DataTrigger>
        </Frame.Triggers>
    </Frame>

Answer 2

This is a known issue that is tracked in Image Loaded Event isn't called under certain conditions on IOS #14622,you can follow up there.

Currently, to fix the issue, you can add the Behavior on the Loaded event on the page as suggested by Pedro like below:

public Test_Image()
{
      InitializeComponent();

      Loaded += (_, __) =>
      {
          this.img.Behaviors.Add(new IconTintColorBehavior()
          {
              TintColor = Colors.Fuchsia
          });
      };
}