[Windows] Fixed the text and icon color issues in the DatePicker when hovering over it. (#27147)

* Fixed the Hovering issue of text and icon color in the DatePicker in windows.

* Included the UI test sample and test case

* Modified the test

* Added Device Test

---------

Co-authored-by: Javier Suárez <[email protected]>

Author: 2 people

src/Controls/tests/DeviceTests/Elements/DatePicker/DatePickerTests.Windows.cs

@@ -0,0 +1,43 @@
+using System.ComponentModel;
+using System.Threading.Tasks;
+using Microsoft.Maui.Graphics;
+using Microsoft.Maui.Handlers;
+using Microsoft.Maui.Platform;
+using Microsoft.UI.Xaml.Controls;
+using Xunit;
+using WSolidColorBrush = Microsoft.UI.Xaml.Media.SolidColorBrush;
+
+namespace Microsoft.Maui.DeviceTests;
+
+public partial class DatePickerTests
+{
+	[Fact]
+	[Description("The DatePicker Text and Icon Color should work properly on PointerOver")]
+	public async Task DatePickerTextAndIconColorShouldWorkProperlyOnPointerOver()
+	{
+		SetupBuilder();
+
+		var datePicker = new Controls.DatePicker
+		{
+			TextColor = Colors.Red
+		};
+		var expectedValue = datePicker.TextColor;
+
+		var handler = await CreateHandlerAsync<DatePickerHandler>(datePicker);
+		var platformView = GetPlatformControl(handler);
+
+		await InvokeOnMainThreadAsync(() =>
+		{
+			var foregroundPointerOverBrush = platformView.Resources["CalendarDatePickerTextForegroundPointerOver"] as WSolidColorBrush;
+			var foregroundPointerOverColor = foregroundPointerOverBrush.Color.ToColor();
+			Assert.Equal(expectedValue, foregroundPointerOverColor);
+
+			var glyphForegroundPointerOverBrush = platformView.Resources["CalendarDatePickerCalendarGlyphForegroundPointerOver"] as WSolidColorBrush;
+			var glyphForegroundPointerOverColor = glyphForegroundPointerOverBrush.Color.ToColor();
+			Assert.Equal(expectedValue, glyphForegroundPointerOverColor);
+		});
+	}
+
+	static CalendarDatePicker GetPlatformControl(DatePickerHandler handler) =>	
+		handler.PlatformView;
+}

src/Controls/tests/DeviceTests/Elements/DatePicker/DatePickerTests.cs

@@ -0,0 +1,20 @@
+using Microsoft.Maui.Controls;
+using Microsoft.Maui.Handlers;
+using Microsoft.Maui.Hosting;
+
+namespace Microsoft.Maui.DeviceTests;
+
+[Category(TestCategory.DatePicker)]
+public partial class DatePickerTests : ControlsHandlerTestBase
+{
+	void SetupBuilder()
+	{
+		EnsureHandlerCreated(builder =>
+		{
+			builder.ConfigureMauiHandlers(handlers =>
+			{
+				handlers.AddHandler<DatePicker, DatePickerHandler>();
+			});
+		});
+	}
+}

src/Controls/tests/DeviceTests/TestCategory.cs

@@ -13,6 +13,7 @@ public static class TestCategory
 		public const string CollectionView = "CollectionView";
 		public const string Compatibility = "Compatibility";
 		public const string ContentView = "ContentView";
+		public const string DatePicker = nameof(DatePicker);
 		public const string Dispatcher = "Dispatcher";
 		public const string Editor = "Editor";
 		public const string Element = "Element";

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

@@ -0,0 +1,31 @@
+<?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"
+             x:Class="Maui.Controls.Sample.Issues.Issue22987">
+  <ContentPage.Resources>
+    <Style TargetType="DatePicker">
+      <Setter Property="VisualStateManager.VisualStateGroups">
+        <VisualStateGroupList>
+          <VisualStateGroup Name="CommonStates">
+            <VisualState Name="Normal">
+              <VisualState.Setters>
+                <Setter Property="TextColor" Value="white" />
+              </VisualState.Setters>
+            </VisualState>
+
+            <VisualState Name="PointerOver">
+             <VisualState.Setters>
+               <Setter Property="TextColor" Value="yellow" />
+             </VisualState.Setters>
+           </VisualState>
+          </VisualStateGroup>
+        </VisualStateGroupList>
+      </Setter>
+    </Style>
+  </ContentPage.Resources>
+
+  <VerticalStackLayout VerticalOptions="Center" HorizontalOptions="Center">
+    <Label Text="DatePicker" AutomationId="Label"/>
+    <DatePicker BackgroundColor="Black" Date="01/15/2025"  />
+  </VerticalStackLayout>
+</ContentPage>

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

@@ -0,0 +1,10 @@
+namespace Maui.Controls.Sample.Issues;
+
+[Issue(IssueTracker.Github, 22987, "DatePicker Color Icon", PlatformAffected.UWP)]
+public partial class Issue22987 : ContentPage
+{
+	public Issue22987()
+	{
+		InitializeComponent();
+	}
+}

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

@@ -0,0 +1,27 @@
+#if TEST_FAILS_ON_WINDOWS && TEST_FAILS_ON_CATALYST && TEST_FAILS_ON_ANDROID && TEST_FAILS_ON_IOS
+// In MacCatalyst, DatePicker Text color property is not working MacOS https://github.com/dotnet/maui/issues/20904
+// In Windows, Once this PR https://github.com/dotnet/maui/pull/27477 merged, we can implement the MoveCursor and enable the test
+using NUnit.Framework;
+using UITest.Appium;
+using UITest.Core;
+
+namespace Microsoft.Maui.TestCases.Tests.Issues;
+
+public class Issue22987 : _IssuesUITest
+{
+	public Issue22987(TestDevice device) : base(device) { }
+
+	public override string Issue => "DatePicker Color Icon";
+
+	[Test]
+	[Category(UITestCategories.DatePicker)]
+	public void DatePickerTextandIconColorShouldWorkProperlyOnPointerOver()
+	{
+		App.WaitForElement("Label");
+
+		//need to include something like a MovePointer and MovePointerToCoordinate methods for hovering.
+
+		VerifyScreenshot();
+	}
+}
+#endif

src/Core/src/Platform/Windows/DatePickerExtensions.cs

@@ -69,8 +69,16 @@ public static void UpdateTextColor(this CalendarDatePicker platformDatePicker, I
 		static readonly string[] TextColorResourceKeys =
 		{
 			"CalendarDatePickerTextForeground",
+			"CalendarDatePickerTextForegroundPointerOver",
+			"CalendarDatePickerTextForegroundPressed",
 			"CalendarDatePickerTextForegroundDisabled",
-			"CalendarDatePickerTextForegroundSelected"
+			"CalendarDatePickerTextForegroundSelected",
+
+			// below resource keys are used for the calendar icon
+			"CalendarDatePickerCalendarGlyphForeground",
+			"CalendarDatePickerCalendarGlyphForegroundPointerOver",
+			"CalendarDatePickerCalendarGlyphForegroundPressed",
+			"CalendarDatePickerCalendarGlyphForegroundDisabled",
 		};
 
 		// TODO NET8 add to public API