Fix MAUI Entry and Editor focused border style

Esri · Nov 19, 2024 · 2b198fe · 2b198fe
1 parent 26fc0ce
commit 2b198fe
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 16 deletions.
diff --git a/src/Esri.Calcite.Maui/AppHostBuilderExtensions.cs b/src/Esri.Calcite.Maui/AppHostBuilderExtensions.cs
@@ -30,9 +30,9 @@ public static MauiAppBuilder UseCalcite(this MauiAppBuilder builder)
                       .AddEmbeddedResourceFont(typeof(AppHostBuilderExtensions).Assembly, "calcite-ui-icons-24.ttf", CalciteUIIconsMediumFontFamily)
                       .AddEmbeddedResourceFont(typeof(AppHostBuilderExtensions).Assembly, "calcite-ui-icons-32.ttf", CalciteUIIconsLargeFontFamily));
 
-            RadioButtonHandler.Mapper.AppendToMapping("RadioButtonStyleOverride", (handler, view) =>
-            {
 #if WINDOWS
+            RadioButtonHandler.Mapper.AppendToMapping("CalciteRadioButtonStyleOverride", (handler, view) =>
+            {
                 // Temporary workaround for radiobutton styling limitation on Windows
                 if (view is BindableObject bo)
                 {
@@ -52,8 +52,42 @@ public static MauiAppBuilder UseCalcite(this MauiAppBuilder builder)
                         handler.PlatformView.Resources["RadioButtonOuterEllipseCheckedStrokePointerOver"] = hoverColor.ToPlatform();
                     }
                 }
-#endif
             });
+            static Microsoft.UI.Xaml.Media.LinearGradientBrush GenerateBrush(Color c) {
+                var brush = new Microsoft.UI.Xaml.Media.LinearGradientBrush()
+                {
+                    MappingMode = Microsoft.UI.Xaml.Media.BrushMappingMode.Absolute,
+                    StartPoint = new Windows.Foundation.Point(0, 0),
+                    EndPoint = new Windows.Foundation.Point(0, 2),
+                    RelativeTransform = new Microsoft.UI.Xaml.Media.ScaleTransform() { ScaleY = -1, CenterY = .5 },
+                };
+                brush.GradientStops.Add(new Microsoft.UI.Xaml.Media.GradientStop() { Offset = 1, Color = Windows.UI.Color.FromArgb((byte)(c.Alpha * 255), (byte)(c.Red * 255), (byte)(c.Green * 255), (byte)(c.Blue * 255)) });
+                brush.GradientStops.Add(new Microsoft.UI.Xaml.Media.GradientStop() { Offset = 1, Color = Microsoft.UI.Colors.Transparent });
+                return brush;
+            };
+            EntryHandler.Mapper.AppendToMapping("CalciteEntryStyleOverride", (handler, view) =>
+            {
+                // Temporary workaround for entry bottom border styling limitation on Windows
+                if (view is BindableObject bo)
+                {
+                    if (CalciteResourceHelper.GetColor(bo) is Color c)
+                    {
+                        handler.PlatformView.Resources["TextControlBorderBrushFocused"] = GenerateBrush(c);
+                    }
+                }
+            });
+            EditorHandler.Mapper.AppendToMapping("CalciteEditorStyleOverride", (handler, view) =>
+            {
+                // Temporary workaround for entry bottom border styling limitation on Windows
+                if (view is BindableObject bo)
+                {
+                    if (CalciteResourceHelper.GetColor(bo) is Color c)
+                    {
+                        handler.PlatformView.Resources["TextControlBorderBrushFocused"] = GenerateBrush(c);
+                    }
+                }
+            });
+#endif
             return builder;
         }
     }

diff --git a/src/Esri.Calcite.Maui/Resources/Styles/ImplicitStyles.xaml b/src/Esri.Calcite.Maui/Resources/Styles/ImplicitStyles.xaml
@@ -18,6 +18,10 @@
 
     <Style TargetType="CheckBox" BasedOn="{StaticResource CalciteCheckBoxStyle}" />
 
+    <Style TargetType="Entry" BasedOn="{StaticResource CalciteEntryStyle}" />
+
+    <Style TargetType="Editor" BasedOn="{StaticResource CalciteEditorStyle}" />
+
     <Style TargetType="RadioButton" BasedOn="{StaticResource CalciteRadioButtonStyle}" />
 
     <Style TargetType="Label" BasedOn="{StaticResource CalciteLabelStyle}" />

diff --git a/src/Esri.Calcite.Maui/Resources/Styles/Styles.xaml b/src/Esri.Calcite.Maui/Resources/Styles/Styles.xaml
@@ -159,12 +159,6 @@
         <Setter Property="Color" Value="{AppThemeBinding Light={x:DynamicResource CalciteUIBrandLightColor}, Dark={x:DynamicResource CalciteUIBrandDarkColor}}" />
     </Style>
 
-    <Style TargetType="RadioButton" x:Key="CalciteRadioButtonStyle">
-        <Setter Property="ca:CalciteResourceHelper.Color" Value="{AppThemeBinding Light={x:DynamicResource CalciteUIBrandLightColor}, Dark={x:DynamicResource CalciteUIBrandDarkColor}}" />
-        <Setter Property="ca:CalciteResourceHelper.HoverColor" Value="{AppThemeBinding Light={x:DynamicResource CalciteUIBrandHoverLightColor}, Dark={x:DynamicResource CalciteUIBrandHoverDarkColor}}" />
-        <Setter Property="ca:CalciteResourceHelper.PressedColor" Value="{AppThemeBinding Light={x:DynamicResource CalciteUIBrandPressLightColor}, Dark={x:DynamicResource CalciteUIBrandPressDarkColor}}" />
-    </Style>
-
     <!--<Style TargetType="DatePicker">
         <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource White}}" />
         <Setter Property="BackgroundColor" Value="Transparent" />
@@ -185,8 +179,10 @@
             </VisualStateGroupList>
         </Setter>
     </Style>
-
-    <Style TargetType="Editor">
+-->
+    <Style TargetType="Editor" x:Key="CalciteEditorStyle">
+         <Setter Property="ca:CalciteResourceHelper.Color" Value="{AppThemeBinding Light={x:DynamicResource CalciteUIBrandLightColor}, Dark={x:DynamicResource CalciteUIBrandDarkColor}}" />
+         <!--
         <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />
         <Setter Property="BackgroundColor" Value="Transparent" />
         <Setter Property="FontFamily" Value="OpenSansRegular"/>
@@ -205,10 +201,12 @@
                     </VisualState>
                 </VisualStateGroup>
             </VisualStateGroupList>
-        </Setter>
+        </Setter>-->
     </Style>
-
-    <Style TargetType="Entry">
+
+    <Style TargetType="Entry" x:Key="CalciteEntryStyle">
+        <Setter Property="ca:CalciteResourceHelper.Color" Value="{AppThemeBinding Light={x:DynamicResource CalciteUIBrandLightColor}, Dark={x:DynamicResource CalciteUIBrandDarkColor}}" />
+        <!--
         <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />
         <Setter Property="BackgroundColor" Value="Transparent" />
         <Setter Property="FontFamily" Value="OpenSansRegular"/>
@@ -228,8 +226,9 @@
                 </VisualStateGroup>
             </VisualStateGroupList>
         </Setter>
+        -->
     </Style>
-
+<!--
     <Style TargetType="Frame">
         <Setter Property="HasShadow" Value="False" />
         <Setter Property="BorderColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray950}}" />
@@ -307,7 +306,14 @@
             </VisualStateGroupList>
         </Setter>-->
     </Style>
-<!--
+
+    <Style TargetType="RadioButton" x:Key="CalciteRadioButtonStyle">
+        <Setter Property="ca:CalciteResourceHelper.Color" Value="{AppThemeBinding Light={x:DynamicResource CalciteUIBrandLightColor}, Dark={x:DynamicResource CalciteUIBrandDarkColor}}" />
+        <Setter Property="ca:CalciteResourceHelper.HoverColor" Value="{AppThemeBinding Light={x:DynamicResource CalciteUIBrandHoverLightColor}, Dark={x:DynamicResource CalciteUIBrandHoverDarkColor}}" />
+        <Setter Property="ca:CalciteResourceHelper.PressedColor" Value="{AppThemeBinding Light={x:DynamicResource CalciteUIBrandPressLightColor}, Dark={x:DynamicResource CalciteUIBrandPressDarkColor}}" />
+    </Style>
+
+    <!--
     <Style TargetType="RadioButton">
         <Setter Property="BackgroundColor" Value="Transparent"/>
         <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />