Support for Setting Switch Off State Color

src/Controls/src/Core/PublicAPI/net-android/PublicAPI.Unshipped.txt

@@ -150,6 +150,9 @@ static readonly Microsoft.Maui.Controls.TitleBar.TitleProperty -> Microsoft.Maui
 static readonly Microsoft.Maui.Controls.TitleBar.TrailingContentProperty -> Microsoft.Maui.Controls.BindableProperty!
 static readonly Microsoft.Maui.Controls.Window.TitleBarProperty -> Microsoft.Maui.Controls.BindableProperty!
 virtual Microsoft.Maui.Controls.Application.ActivateWindow(Microsoft.Maui.Controls.Window! window) -> void
+~static readonly Microsoft.Maui.Controls.Switch.OffColorProperty -> Microsoft.Maui.Controls.BindableProperty
+~Microsoft.Maui.Controls.Switch.OffColor.get -> Microsoft.Maui.Graphics.Color
+~Microsoft.Maui.Controls.Switch.OffColor.set -> void
 ~Microsoft.Maui.Controls.SearchBar.SearchIconColor.get -> Microsoft.Maui.Graphics.Color
 ~Microsoft.Maui.Controls.SearchBar.SearchIconColor.set -> void
 ~static readonly Microsoft.Maui.Controls.SearchBar.SearchIconColorProperty -> Microsoft.Maui.Controls.BindableProperty

src/Controls/src/Core/PublicAPI/net-ios/PublicAPI.Unshipped.txt

@@ -341,6 +341,9 @@ virtual Microsoft.Maui.Controls.Handlers.Items2.ItemsViewController2<TItemsView>
 virtual Microsoft.Maui.Controls.Handlers.Items2.ItemsViewDelegator2<TItemsView, TViewController>.GetVisibleItemsIndex() -> (bool VisibleItems, int First, int Center, int Last)
 virtual Microsoft.Maui.Controls.Handlers.Items2.ItemsViewHandler2<TItemsView>.UpdateLayout() -> void
 override Microsoft.Maui.Controls.Handlers.Compatibility.FrameRenderer.MovedToWindow() -> void
+~static readonly Microsoft.Maui.Controls.Switch.OffColorProperty -> Microsoft.Maui.Controls.BindableProperty
+~Microsoft.Maui.Controls.Switch.OffColor.get -> Microsoft.Maui.Graphics.Color
+~Microsoft.Maui.Controls.Switch.OffColor.set -> void
 ~Microsoft.Maui.Controls.SearchBar.SearchIconColor.get -> Microsoft.Maui.Graphics.Color
 ~Microsoft.Maui.Controls.SearchBar.SearchIconColor.set -> void
 ~static readonly Microsoft.Maui.Controls.SearchBar.SearchIconColorProperty -> Microsoft.Maui.Controls.BindableProperty

src/Controls/src/Core/PublicAPI/net-maccatalyst/PublicAPI.Unshipped.txt

@@ -342,6 +342,9 @@ virtual Microsoft.Maui.Controls.Handlers.Items2.ItemsViewController2<TItemsView>
 virtual Microsoft.Maui.Controls.Handlers.Items2.ItemsViewDelegator2<TItemsView, TViewController>.GetVisibleItemsIndex() -> (bool VisibleItems, int First, int Center, int Last)
 virtual Microsoft.Maui.Controls.Handlers.Items2.ItemsViewHandler2<TItemsView>.UpdateLayout() -> void
 override Microsoft.Maui.Controls.Handlers.Compatibility.FrameRenderer.MovedToWindow() -> void
+~static readonly Microsoft.Maui.Controls.Switch.OffColorProperty -> Microsoft.Maui.Controls.BindableProperty
+~Microsoft.Maui.Controls.Switch.OffColor.get -> Microsoft.Maui.Graphics.Color
+~Microsoft.Maui.Controls.Switch.OffColor.set -> void
 ~Microsoft.Maui.Controls.SearchBar.SearchIconColor.get -> Microsoft.Maui.Graphics.Color
 ~Microsoft.Maui.Controls.SearchBar.SearchIconColor.set -> void
 ~static readonly Microsoft.Maui.Controls.SearchBar.SearchIconColorProperty -> Microsoft.Maui.Controls.BindableProperty

src/Controls/src/Core/PublicAPI/net-tizen/PublicAPI.Unshipped.txt

@@ -143,6 +143,9 @@ static readonly Microsoft.Maui.Controls.TitleBar.TitleProperty -> Microsoft.Maui
 static readonly Microsoft.Maui.Controls.TitleBar.TrailingContentProperty -> Microsoft.Maui.Controls.BindableProperty!
 static readonly Microsoft.Maui.Controls.Window.TitleBarProperty -> Microsoft.Maui.Controls.BindableProperty!
 virtual Microsoft.Maui.Controls.Application.ActivateWindow(Microsoft.Maui.Controls.Window! window) -> void
+~static readonly Microsoft.Maui.Controls.Switch.OffColorProperty -> Microsoft.Maui.Controls.BindableProperty
+~Microsoft.Maui.Controls.Switch.OffColor.get -> Microsoft.Maui.Graphics.Color
+~Microsoft.Maui.Controls.Switch.OffColor.set -> void
 ~Microsoft.Maui.Controls.SearchBar.SearchIconColor.get -> Microsoft.Maui.Graphics.Color
 ~Microsoft.Maui.Controls.SearchBar.SearchIconColor.set -> void
 ~static readonly Microsoft.Maui.Controls.SearchBar.SearchIconColorProperty -> Microsoft.Maui.Controls.BindableProperty

src/Controls/src/Core/PublicAPI/net-windows/PublicAPI.Unshipped.txt

@@ -149,6 +149,9 @@ static readonly Microsoft.Maui.Controls.TitleBar.TitleProperty -> Microsoft.Maui
 static readonly Microsoft.Maui.Controls.TitleBar.TrailingContentProperty -> Microsoft.Maui.Controls.BindableProperty!
 static readonly Microsoft.Maui.Controls.Window.TitleBarProperty -> Microsoft.Maui.Controls.BindableProperty!
 virtual Microsoft.Maui.Controls.Application.ActivateWindow(Microsoft.Maui.Controls.Window! window) -> void
+~static readonly Microsoft.Maui.Controls.Switch.OffColorProperty -> Microsoft.Maui.Controls.BindableProperty
+~Microsoft.Maui.Controls.Switch.OffColor.get -> Microsoft.Maui.Graphics.Color
+~Microsoft.Maui.Controls.Switch.OffColor.set -> void
 ~Microsoft.Maui.Controls.SearchBar.SearchIconColor.get -> Microsoft.Maui.Graphics.Color
 ~Microsoft.Maui.Controls.SearchBar.SearchIconColor.set -> void
 ~static readonly Microsoft.Maui.Controls.SearchBar.SearchIconColorProperty -> Microsoft.Maui.Controls.BindableProperty

src/Controls/src/Core/PublicAPI/net/PublicAPI.Unshipped.txt

@@ -143,6 +143,9 @@ static readonly Microsoft.Maui.Controls.TitleBar.TitleProperty -> Microsoft.Maui
 static readonly Microsoft.Maui.Controls.TitleBar.TrailingContentProperty -> Microsoft.Maui.Controls.BindableProperty!
 static readonly Microsoft.Maui.Controls.Window.TitleBarProperty -> Microsoft.Maui.Controls.BindableProperty!
 virtual Microsoft.Maui.Controls.Application.ActivateWindow(Microsoft.Maui.Controls.Window! window) -> void
+~static readonly Microsoft.Maui.Controls.Switch.OffColorProperty -> Microsoft.Maui.Controls.BindableProperty
+~Microsoft.Maui.Controls.Switch.OffColor.get -> Microsoft.Maui.Graphics.Color
+~Microsoft.Maui.Controls.Switch.OffColor.set -> void
 ~Microsoft.Maui.Controls.SearchBar.SearchIconColor.get -> Microsoft.Maui.Graphics.Color
 ~Microsoft.Maui.Controls.SearchBar.SearchIconColor.set -> void
 ~static readonly Microsoft.Maui.Controls.SearchBar.SearchIconColorProperty -> Microsoft.Maui.Controls.BindableProperty

src/Controls/src/Core/PublicAPI/netstandard/PublicAPI.Unshipped.txt

@@ -143,6 +143,9 @@ static readonly Microsoft.Maui.Controls.TitleBar.TitleProperty -> Microsoft.Maui
 static readonly Microsoft.Maui.Controls.TitleBar.TrailingContentProperty -> Microsoft.Maui.Controls.BindableProperty!
 static readonly Microsoft.Maui.Controls.Window.TitleBarProperty -> Microsoft.Maui.Controls.BindableProperty!
 virtual Microsoft.Maui.Controls.Application.ActivateWindow(Microsoft.Maui.Controls.Window! window) -> void
+~static readonly Microsoft.Maui.Controls.Switch.OffColorProperty -> Microsoft.Maui.Controls.BindableProperty
+~Microsoft.Maui.Controls.Switch.OffColor.get -> Microsoft.Maui.Graphics.Color
+~Microsoft.Maui.Controls.Switch.OffColor.set -> void
 ~Microsoft.Maui.Controls.SearchBar.SearchIconColor.get -> Microsoft.Maui.Graphics.Color
 ~Microsoft.Maui.Controls.SearchBar.SearchIconColor.set -> void
 ~static readonly Microsoft.Maui.Controls.SearchBar.SearchIconColorProperty -> Microsoft.Maui.Controls.BindableProperty

src/Controls/src/Core/Switch/Switch.cs

@@ -31,6 +31,13 @@ public partial class Switch : View, IElementConfiguration<Switch>, ISwitch
 				((IView)bindable)?.Handler?.UpdateValue(nameof(ISwitch.TrackColor));
 			});
 
+		/// <summary>Bindable property for <see cref="OffColor"/>.</summary>
+		public static readonly BindableProperty OffColorProperty = BindableProperty.Create(nameof(OffColor), typeof(Color), typeof(Switch), null,
+			propertyChanged: (bindable, oldValue, newValue) =>
+            {
+				((IView)bindable)?.Handler?.UpdateValue(nameof(ISwitch.TrackColor));
+			});
+
 		/// <summary>Bindable property for <see cref="ThumbColor"/>.</summary>
 		public static readonly BindableProperty ThumbColorProperty = BindableProperty.Create(nameof(ThumbColor), typeof(Color), typeof(Switch), null);
 
@@ -41,6 +48,17 @@ public Color OnColor
 			set { SetValue(OnColorProperty, value); }
 		}
 
+		/// <summary>
+		/// Gets or sets the color of the toggle switch's track when it is in the off state.
+		/// If not set, the default color will be used for the off-track appearance.
+		/// </summary>
+		public Color OffColor
+		{
+			get { return (Color) GetValue(OffColorProperty); }
+			set { SetValue(OffColorProperty, value); }
+        }
+
+
 		/// <include file="../../docs/Microsoft.Maui.Controls/Switch.xml" path="//Member[@MemberName='ThumbColor']/Docs/*" />
 		public Color ThumbColor
 		{
@@ -93,14 +111,14 @@ Color ISwitch.TrackColor
 		{
 			get
 			{
-#if WINDOWS
-				return OnColor;
-#else
 				if (IsToggled)
+				{
 					return OnColor;
-
-				return null;
-#endif
+				}
+				else
+				{
+					return OffColor;
+				}
 			}
 		}
 

src/Controls/tests/TestCases.HostApp/Issues/Issue15695.xaml

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             BackgroundColor="{AppThemeBinding Light=White,Dark=Black}"
+             x:Class="Maui.Controls.Sample.Issues.Issue15695">
+
+        <StackLayout>
+                <Switch x:Name="mauiSwitch"
+                        Margin="20"
+                        IsToggled="True"
+                        AutomationId="Switch"
+                        OffColor="Red"
+                        OnColor="Green"
+                        HorizontalOptions="Center"
+                        VerticalOptions="Center"/>
+                <Button Text="ToggleSwitch"
+                        AutomationId="ToggleSwitch"
+                        Clicked="OnButtonClicked"/>
+                <Button Text="Reset State"
+                        AutomationId="ResetStateButton"
+                        Clicked="Reset_State_Button_Clicked"/>
+                <Button Text="Set Null Color for off State"
+                        AutomationId="NullOffColorButton"
+                        Clicked="OffNullColorButtonClicked"/>
+                <Button Text="Change Theme"
+                        AutomationId="ChangeThemeButton"
+                        Clicked="ChangeThemeButtonClicked"/>
+
+        </StackLayout>
+</ContentPage>

src/Controls/tests/TestCases.HostApp/Issues/Issue15695.xaml.cs

@@ -0,0 +1,44 @@
+namespace Maui.Controls.Sample.Issues;
+
+[XamlCompilation(XamlCompilationOptions.Compile)]
+[Issue(IssueTracker.Github, 15695, "Support for Switch OFF State color", PlatformAffected.All)]
+public partial class Issue15695 : ContentPage
+{
+	public Issue15695()
+	{
+		InitializeComponent();
+	}
+
+	private void OnButtonClicked(object sender, EventArgs e)
+	{
+		mauiSwitch.IsToggled = !mauiSwitch.IsToggled;
+	}
+
+	private void OffNullColorButtonClicked(object sender, EventArgs e)
+	{
+		mauiSwitch.OffColor = null;
+	}
+
+	private void Reset_State_Button_Clicked(object sender, EventArgs e)
+	{
+		mauiSwitch.OnColor = Colors.Green;
+		mauiSwitch.OffColor = Colors.Red;
+		mauiSwitch.IsToggled = true;
+		Application.Current.UserAppTheme = AppTheme.Light;
+	}
+
+	private void ChangeThemeButtonClicked(object sender, EventArgs e)
+	{
+		if (Application.Current != null)
+		{
+			if (Application.Current.RequestedTheme == AppTheme.Dark)
+			{
+				Application.Current.UserAppTheme = AppTheme.Light;
+			}
+			else
+			{
+				Application.Current.UserAppTheme = AppTheme.Dark;
+			}
+		}
+	}
+}

src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue15695.cs

@@ -0,0 +1,53 @@
+using NUnit.Framework;
+using UITest.Appium;
+using UITest.Core;
+
+namespace Microsoft.Maui.TestCases.Tests.Issues;
+
+public class Issue15695 : _IssuesUITest
+{
+	public override string Issue => "Support for Switch OFF State color";
+
+	public Issue15695(TestDevice device) : base(device)
+	{
+	}
+
+	[Test]
+	[Category(UITestCategories.Switch)]
+	public async Task VerifySwitchOffColorAfterToggling()
+	{
+		App.WaitForElement("Switch");
+		App.Tap("ResetStateButton");
+		App.Tap("ToggleSwitch");
+		// Wait for the switch to animate
+		await Task.Delay(500);
+		VerifyScreenshot();
+	}
+
+	[Test]
+	[Category(UITestCategories.Switch)]
+	public async Task VerifySwitchOffColorAfterTogglingDarkTheme()
+	{
+		App.WaitForElement("Switch");
+		App.Tap("ResetStateButton");
+		App.Tap("ChangeThemeButton");
+		App.Tap("ToggleSwitch");
+		// Wait for the switch to animate
+		await Task.Delay(500);
+		VerifyScreenshot();
+	}
+
+
+	[Test]
+	[Category(UITestCategories.Switch)]
+	public async Task VerifySwitchNullColor()
+	{
+		App.WaitForElement("Switch");
+		App.Tap("ResetStateButton");
+		App.Tap("NullOffColorButton");
+		App.Tap("ToggleSwitch");
+		// Wait for the switch to animate
+		await Task.Delay(500);
+		VerifyScreenshot();
+	}
+}

src/Core/src/Platform/Android/SwitchExtensions.cs

@@ -12,11 +12,8 @@ public static void UpdateTrackColor(this ASwitch aSwitch, ISwitch view)
 		{
 			var trackColor = view.TrackColor;
 
-			if (aSwitch.Checked)
-			{
-				if (trackColor != null)
-					aSwitch.TrackDrawable?.SetColorFilter(trackColor, FilterMode.SrcAtop);
-			}
+			if (trackColor is not null)
+				aSwitch.TrackDrawable?.SetColorFilter(trackColor, FilterMode.SrcAtop);
 			else
 				aSwitch.TrackDrawable?.ClearColorFilter();
 		}

src/Core/src/Platform/Windows/SwitchExtensions.cs

@@ -1,4 +1,6 @@
 using Microsoft.UI.Xaml.Controls;
+using Windows.UI;
+using Microsoft.UI.Xaml.Media;
 
 namespace Microsoft.Maui.Platform
 {
@@ -19,20 +21,18 @@ public static void UpdateTrackColor(this ToggleSwitch toggleSwitch, ISwitch view
 				return;
 			}
 
-			if (view.TrackColor == null)
-			{
-				return;
-			}
+			var trackColor = view.TrackColor?.ToPlatform() ?? new SolidColorBrush(Color.FromArgb(6, 0, 0, 0));
 
-			if (view.TrackColor != null)
-			{
-				toggleSwitch.TryUpdateResource(
-					view.TrackColor.ToPlatform(),
+			toggleSwitch.TryUpdateResource(
+				    trackColor,
 					"ToggleSwitchFillOn",
 					"ToggleSwitchFillOnPointerOver",
 					"ToggleSwitchFillOnPressed",
-					"ToggleSwitchFillOnDisabled");
-			}
+					"ToggleSwitchFillOnDisabled",
+					"ToggleSwitchFillOff",
+					"ToggleSwitchFillOffPointerOver",
+					"ToggleSwitchFillOffPressed",
+					"ToggleSwitchFillOffDisabled");
 		}
 
 		public static void UpdateThumbColor(this ToggleSwitch toggleSwitch, ISwitch view)

src/Core/src/Platform/iOS/SwitchExtensions.cs

@@ -22,16 +22,17 @@ public static void UpdateTrackColor(this UISwitch uiSwitch, ISwitch view)
 			if (uIView is null)
 				return;
 
-			if (!view.IsOn)
+			if (view.TrackColor is not null)
 			{
-				// iOS 13+ uses the UIColor.SecondarySystemFill to support Light and Dark mode
-				// else, use the RGBA equivalent of UIColor.SecondarySystemFill in Light mode
-				uIView.BackgroundColor = OperatingSystem.IsIOSVersionAtLeast(13) ? UIColor.SecondarySystemFill : DefaultBackgroundColor;
+				uiSwitch.OnTintColor = view.TrackColor.ToPlatform();
+				uIView.BackgroundColor = uiSwitch.OnTintColor;
 			}
 
-			else if (view.TrackColor is not null)
+			else
 			{
-				uiSwitch.OnTintColor = view.TrackColor.ToPlatform();
+				// iOS 13+ uses the UIColor.SecondarySystemFill to support Light and Dark mode
+				// else, use the RGBA equivalent of UIColor.SecondarySystemFill in Light mode
+				uiSwitch.OnTintColor = OperatingSystem.IsIOSVersionAtLeast(13) ? UIColor.SecondarySystemFill : DefaultBackgroundColor;
 				uIView.BackgroundColor = uiSwitch.OnTintColor;
 			}
 		}