[Button] Fixed bug where toggling IsVisible would reset icon's tint color.

CHANGELOG.md

@@ -1,3 +1,6 @@
+## [49.7.1] 
+- [Button] Fixed bug where toggling IsVisible would reset icon's tint color.
+
 ## [49.6.0] 
 - Resources was updated from DIPS.Mobile.DesignTokens
 

src/app/Playground/Playground.csproj

@@ -23,7 +23,7 @@
         <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios'">14.1</SupportedOSPlatformVersion>
         <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'">30.0</SupportedOSPlatformVersion>
 
-        <_MauiForceXamlCForDebug>true</_MauiForceXamlCForDebug>
+        <!--<_MauiForceXamlCForDebug>true</_MauiForceXamlCForDebug>-->
         <!--<MauiEnableXamlCBindingWithSourceCompilation>true</MauiEnableXamlCBindingWithSourceCompilation>-->
         <!--<WarningsAsErrors>XC0022;XC0023;XC0045</WarningsAsErrors>-->
         <!--<MauiStrictXamlCompilation>true</MauiStrictXamlCompilation>-->

src/app/Playground/VetleSamples/VetlePage.xaml

@@ -29,10 +29,16 @@
 
     <dui:VerticalStackLayout>
 
-        <Grid HeightRequest="100" WidthRequest="300"
-              BackgroundColor="Red"
-              dui:Touch.Command="{dui:OpenBottomSheetCommand {x:Type vetleSamples:BottomSheetWithToolbar}}">
-
+        <dui:Switch x:Name="Switch" />
+
+
+        <Grid>
+            <Grid >
+            <dui:Button Style="{dui:Styles Button=PrimaryIconButtonLarge}"
+                        ImageSource="{dui:Icons alert_line}"
+                        IsVisible="{Binding Source={x:Reference Switch}, Path=IsToggled}"/>
+
+                </Grid>
         </Grid>
 
     </dui:VerticalStackLayout>

src/library/DIPS.Mobile.UI/Components/Buttons/iOS/ButtonHandler.cs

@@ -1,3 +1,4 @@
+using System.ComponentModel;
 using CoreGraphics;
 using DIPS.Mobile.UI.Platforms.iOS;
 using Microsoft.Maui.Platform;
@@ -13,6 +14,26 @@ protected override UIButton CreatePlatformView()
         return button;
     }
 
+    protected override void ConnectHandler(UIButton platformView)
+    {
+        base.ConnectHandler(platformView);
+
+        (VirtualView as View).PropertyChanged += OnPropertyChanged;
+    }
+
+    /// <summary>
+    /// TODO: Remove when this PR is merged: https://github.com/dotnet/maui/pull/25107
+    /// <remarks>When Button's IsVisible is toggled the Image is reset by .NET MAUI so we need to set the tint color again, but it happens after this method is called, hence the Task.Delay</remarks>
+    /// </summary>
+    private async void OnPropertyChanged(object? sender, PropertyChangedEventArgs e)
+    {
+        if (e.PropertyName == View.IsVisibleProperty.PropertyName)
+        {
+            await Task.Delay(1);
+            MapImageTintColor(this, VirtualView as Button);
+        }
+    }
+
     private partial void AppendPropertyMapper()
     {
     }
@@ -40,13 +61,20 @@ private static partial void MapImageTintColor(ButtonHandler handler, Button butt
         if(handler.PlatformView.ImageView.Image is null)
             return;
 
-        handler.PlatformView.SetImage(handler.PlatformView.ImageView.Image.ImageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate), UIControlState.Normal);
         handler.PlatformView.ImageView.TintColor = button.ImageTintColor.ToPlatform();
+        handler.PlatformView.SetImage(handler.PlatformView.ImageView.Image.ImageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate), UIControlState.Normal);
     }
 
     private static partial void MapAdditionalHitBoxSize(ButtonHandler handler, Button button)
     {
         if (handler.PlatformView is UIButtonWithExtraTappableArea uiButton)
             uiButton.AdditionalHitBoxSize = button.AdditionalHitBoxSize;
     }
+
+    protected override void DisconnectHandler(UIButton platformView)
+    {
+        base.DisconnectHandler(platformView);
+
+        (VirtualView as View).PropertyChanged += OnPropertyChanged;
+    }
 }

src/library/DIPS.Mobile.UI/Components/Images/ImageButton/iOS/IconTintColorHandler.cs

@@ -1,38 +1,44 @@
 using System.ComponentModel;
 using Microsoft.Maui.Platform;
 using UIKit;
+using Button = DIPS.Mobile.UI.Components.Buttons.Button;
 using IImage = Microsoft.Maui.IImage;
 
 namespace DIPS.Mobile.UI.Components.Images;
 
 // Some inspiration from Maui.CommunityToolkit: https://github.com/CommunityToolkit/Maui/blob/main/src/CommunityToolkit.Maui/Behaviors/PlatformBehaviors/IconTintColor/IconTintColorBehavior.macios.cs
-// Attempts to set the Tint Color of an image on iOS, on the following controls: ImageButton, Image
+// Attempts to set the Tint Color of an image on iOS, on the following controls: ImageButton, Image, Button
 internal class IconTintColorHandler : IDisposable
 {
     private readonly View m_view;
 
-    public IconTintColorHandler(IImage image)
+    public IconTintColorHandler(IView view)
     {
-        if (image is not View view)
-            return;
-
-        view.PropertyChanged += ViewOnPropertyChanged;
-        m_view = view;
+        if (view is not View v)
+            throw new ArgumentException($"{view.GetType().Name} is not a View");
+        
+        v.PropertyChanged += ViewOnPropertyChanged;
+        m_view = v;
     }
 
     private static void ViewOnPropertyChanged(object? sender, PropertyChangedEventArgs e)
     {
-        if(e.PropertyName != Microsoft.Maui.Controls.ImageButton.IsLoadingProperty.PropertyName 
-           && e.PropertyName != Microsoft.Maui.Controls.ImageButton.SourceProperty.PropertyName 
-           && e.PropertyName != ImageButton.ImageButton.TintColorProperty.PropertyName 
-           && e.PropertyName != Image.Image.TintColorProperty.PropertyName)
+        if (sender is not View view)
             return;
 
-        if(sender is not IImageElement imageElement)
+        if ((e.PropertyName != Microsoft.Maui.Controls.ImageButton.IsLoadingProperty.PropertyName
+             && e.PropertyName != Microsoft.Maui.Controls.Image.SourceProperty.PropertyName
+             && e.PropertyName != Microsoft.Maui.Controls.ImageButton.SourceProperty.PropertyName
+            && e.PropertyName != Microsoft.Maui.Controls.Button.ImageSourceProperty.PropertyName)
+            || view is not IImageElement element)
+        {
             return;
+        }
 
-        if(!imageElement.IsLoading)
-            TrySetTintColor((sender as View)!);
+        if (!element.IsLoading)
+        {
+            TrySetTintColor(view);
+        }
     }
 
     private static void TrySetTintColor(View view)
@@ -52,12 +58,17 @@ private static void TrySetTintColor(View view)
                 SetUIImageViewTintColor(imageView, image.TintColor);
                 break;
             case UIButton button:
-                if (view is not ImageButton.ImageButton imageButton)
+
+                switch (view)
                 {
-                    break;
+                    case Button buttonView:
+                        SetUIButtonTintColor(button, buttonView.ImageTintColor);
+                        break;
+                    case ImageButton.ImageButton imageButton:
+                        SetUIButtonTintColor(button, imageButton.TintColor);
+                        break;
                 }
-
-                SetUIButtonTintColor(button, imageButton.TintColor);
+
                 break;
         }
     }