[Bug] [UWP] Fix FontIcons alignment (#15047)

* Update FontImageSourceHandler.cs

* correction and test

* tidy

* Small nits

Co-authored-by: Gerald Versluis <gerald@verslu.is>
Co-authored-by: Gerald Versluis <gerald.versluis@microsoft.com>

Xamarin.Forms.ControlGallery.WindowsUniversal/Xamarin.Forms.ControlGallery.WindowsUniversal.csproj

@@ -282,6 +282,7 @@
   </ItemGroup>
   <ItemGroup>
     <Content Include="Assets\Fonts\materialdesignicons-webfont.ttf" />
+    <Content Include="Assets\Fonts\MaterialIconsOutlined-Regular.otf" />
     <None Include="Xamarin.Forms.ControlGallery.WindowsUniversal_TemporaryKey.pfx" />
   </ItemGroup>
   <PropertyGroup Condition=" '$(VisualStudioVersion)' == '' or '$(VisualStudioVersion)' &lt; '14.0' ">

Xamarin.Forms.Controls.Issues/Xamarin.Forms.Controls.Issues.Shared/Issue8606.cs

@@ -0,0 +1,73 @@
+using System;
+using System.Collections.Generic;
+using Xamarin.Forms.CustomAttributes;
+using Xamarin.Forms.Internals;
+#if UITEST
+using Xamarin.UITest;
+using NUnit.Framework;
+using Xamarin.Forms.Core.UITests;
+#endif
+
+namespace Xamarin.Forms.Controls.Issues
+{
+	[Preserve(AllMembers = true)]
+	[Issue(IssueTracker.Github, 8606, "[Bug] [UWP] FontIcons are not aligned correctly", PlatformAffected.UWP)]
+#if UITEST
+	[Category(UITestCategories.Github5000)]
+	[Category(UITestCategories.ManualReview)]
+#endif
+	public class Issue8606 : TestContentPage
+	{
+		protected override void Init()
+		{
+			var iconColor = Color.White;
+			List<(string fontFamily,string glyph,string familyShortName)> fontFamilyGlyphs = new List<(string,string,string)>
+			{
+				(GetFontFamily("fa-solid-900.ttf","Font Awesome 5 Free"), GetGlyph("f059"),"FaSolid"),
+				(GetFontFamily("ionicons.ttf","Ionicons"), GetGlyph("f142"),"Ionicons"),
+				(GetFontFamily("materialdesignicons-webfont.ttf","Material Design Icons"),GetGlyph("f625"),"Material old"),
+				(GetFontFamily("MaterialIconsOutlined-Regular.otf","Material Icons Outlined"), GetGlyph("e8fd"),"Material"),
+			};
+
+			List<Func<FontImageSource, View>> affectedViewsCreators = new List<Func<FontImageSource, View>>
+			{
+				(fontImageSource) => new Button { ImageSource = fontImageSource },
+				(fontImageSource) => new ImageButton { WidthRequest=39,HeightRequest=39, Source = fontImageSource, BackgroundColor = Color.FromHex("#333333")},
+				(fontImageSource) => new Frame{Content = new Image {  Source = fontImageSource}, BorderColor=iconColor, Padding=0,  }
+			};
+
+			var content = new StackLayout { };
+			content.Children.Add(new Label { BackgroundColor = Color.Black, Padding = 12, TextColor = iconColor, Text = "Button, ImageButton and Image should use the same FontImageSourceHandler which should render centered." });
+
+			foreach (var (fontFamily, glyph, familyShortName) in fontFamilyGlyphs)
+			{
+				var fontImageSource = new FontImageSource { Size = 24, Color = iconColor, FontFamily = fontFamily, Glyph = glyph };
+				var fontStackLayout = new StackLayout { };
+				fontStackLayout.Children.Add(new Label { FontSize = 24, Text = familyShortName });
+				var fontsStackLayout = new StackLayout { Orientation = StackOrientation.Horizontal, HorizontalOptions = LayoutOptions.Center };
+				fontStackLayout.Children.Add(fontsStackLayout);
+				foreach (var affectedViewCreator in affectedViewsCreators)
+				{
+					var affectedView = affectedViewCreator(fontImageSource);
+					affectedView.VerticalOptions = LayoutOptions.Center;
+					fontsStackLayout.Children.Add(affectedView);
+				}
+				content.Children.Add(fontStackLayout);
+			}
+
+			Content = content;
+
+		}
+
+		private string GetFontFamily(string fileName, string fontName)
+		{
+			return $"Assets/Fonts/{fileName}#{fontName}";
+		}
+
+		private static string GetGlyph(string codePoint)
+		{
+			int p = int.Parse(codePoint, System.Globalization.NumberStyles.HexNumber);
+			return char.ConvertFromUtf32(p);
+		}
+	}
+}

Xamarin.Forms.Controls.Issues/Xamarin.Forms.Controls.Issues.Shared/Xamarin.Forms.Controls.Issues.Shared.projitems

@@ -53,6 +53,7 @@
     <Compile Include="$(MSBuildThisFileDirectory)Issue14801.xaml.cs">
       <DependentUpon>Issue14801.xaml</DependentUpon>
     </Compile>
+    <Compile Include="$(MSBuildThisFileDirectory)Issue8606.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Issue15066.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Issue8804.xaml.cs">
       <DependentUpon>Issue8804.xaml</DependentUpon>

Xamarin.Forms.Platform.UAP/FontImageSourceHandler.cs

@@ -26,7 +26,7 @@ public sealed class FontImageSourceHandler : IImageSourceHandler, IIconElementHa
 			{
 				FontFamily = GetFontSource(fontsource),
 				FontSize = (float)fontsource.Size,
-				HorizontalAlignment = CanvasHorizontalAlignment.Center,
+				HorizontalAlignment = CanvasHorizontalAlignment.Left,
 				VerticalAlignment = CanvasVerticalAlignment.Center,
 				Options = CanvasDrawTextOptions.Default
 			};
@@ -42,9 +42,7 @@ public sealed class FontImageSourceHandler : IImageSourceHandler, IIconElementHa
 					var iconcolor = (fontsource.Color != Color.Default ? fontsource.Color : Color.White).ToWindowsColor();
 
 					// offset by 1 as we added a 1 inset
-					var x = (float)layout.DrawBounds.X * -1;
-
-					ds.DrawTextLayout(layout, x, 1f, iconcolor);
+					ds.DrawTextLayout(layout, 1f, 1f, iconcolor);
 				}
 
 				return Task.FromResult((Windows.UI.Xaml.Media.ImageSource)imageSource);