Color issues

Views/SkiaTabbedPage.cs

@@ -1,6 +1,7 @@
 // Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the MIT license.
 
+using Microsoft.Maui.Graphics;
 using SkiaSharp;
 
 namespace Microsoft.Maui.Platform;
@@ -15,6 +16,18 @@ public class SkiaTabbedPage : SkiaLayoutView
     private float _tabBarHeight = 48f;
     private bool _tabBarOnBottom = false;
 
+    // SKColor fields for rendering
+    private SKColor _tabBarBackgroundColorSK = SkiaTheme.PrimarySK;
+    private SKColor _selectedTabColorSK = SKColors.White;
+    private SKColor _unselectedTabColorSK = SkiaTheme.WhiteSemiTransparentSK;
+    private SKColor _indicatorColorSK = SKColors.White;
+
+    // MAUI Color backing fields
+    private Color _tabBarBackgroundColor = Color.FromRgb(33, 150, 243);
+    private Color _selectedTabColor = Colors.White;
+    private Color _unselectedTabColor = Color.FromRgba(255, 255, 255, 180);
+    private Color _indicatorColor = Colors.White;
+
     /// <summary>
     /// Gets or sets the height of the tab bar.
     /// </summary>
@@ -80,22 +93,58 @@ public class SkiaTabbedPage : SkiaLayoutView
     /// <summary>
     /// Background color for the tab bar.
     /// </summary>
-    public SKColor TabBarBackgroundColor { get; set; } = new SKColor(33, 150, 243); // Material Blue
+    public Color TabBarBackgroundColor
+    {
+        get => _tabBarBackgroundColor;
+        set
+        {
+            _tabBarBackgroundColor = value;
+            _tabBarBackgroundColorSK = value.ToSKColor();
+            Invalidate();
+        }
+    }
 
     /// <summary>
     /// Color for selected tab text/icon.
     /// </summary>
-    public SKColor SelectedTabColor { get; set; } = SKColors.White;
+    public Color SelectedTabColor
+    {
+        get => _selectedTabColor;
+        set
+        {
+            _selectedTabColor = value;
+            _selectedTabColorSK = value.ToSKColor();
+            Invalidate();
+        }
+    }
 
     /// <summary>
     /// Color for unselected tab text/icon.
     /// </summary>
-    public SKColor UnselectedTabColor { get; set; } = new SKColor(255, 255, 255, 180);
+    public Color UnselectedTabColor
+    {
+        get => _unselectedTabColor;
+        set
+        {
+            _unselectedTabColor = value;
+            _unselectedTabColorSK = value.ToSKColor();
+            Invalidate();
+        }
+    }
 
     /// <summary>
     /// Color of the selection indicator.
     /// </summary>
-    public SKColor IndicatorColor { get; set; } = SKColors.White;
+    public Color IndicatorColor
+    {
+        get => _indicatorColor;
+        set
+        {
+            _indicatorColor = value;
+            _indicatorColorSK = value.ToSKColor();
+            Invalidate();
+        }
+    }
 
     /// <summary>
     /// Height of the selection indicator.
@@ -252,7 +301,7 @@ public class SkiaTabbedPage : SkiaLayoutView
         // Draw background
         using var bgPaint = new SKPaint
         {
-            Color = TabBarBackgroundColor,
+            Color = _tabBarBackgroundColorSK,
             Style = SKPaintStyle.Fill,
             IsAntialias = true
         };
@@ -281,7 +330,7 @@ public class SkiaTabbedPage : SkiaLayoutView
                 tabBarBounds.Bottom);
 
             bool isSelected = i == _selectedIndex;
-            textPaint.Color = isSelected ? SelectedTabColor : UnselectedTabColor;
+            textPaint.Color = isSelected ? _selectedTabColorSK : _unselectedTabColorSK;
             textPaint.FakeBoldText = isSelected;
 
             // Draw tab title centered
@@ -299,7 +348,7 @@ public class SkiaTabbedPage : SkiaLayoutView
         {
             using var indicatorPaint = new SKPaint
             {
-                Color = IndicatorColor,
+                Color = _indicatorColorSK,
                 Style = SKPaintStyle.Fill,
                 IsAntialias = true
             };