dotnet
"FontImageSource not center-aligned inside Image control in .NET MAUI"
When using a FontImageSource inside an Image control in .NET MAUI, the icon glyph is not vertically or horizontally centered within its bounding box. This misalignment is especially noticeable when compared to rendering the same glyph inside a Label using FontFamily, where it aligns correctly with HorizontalTextAlignment and VerticalTextAlignment.
It’s unclear whether this is intended behavior or a platform-specific limitation, but it creates inconsistent UI appearance and requires workarounds. If this is by design, it should be clearly documented. Otherwise, this appears to be a bug or missing feature in layout handling.
Steps to Reproduce:
Create a FontImageSource in XAML
Use it inside an Image control with fixed width/height (e.g., 32x32).
Compare it visually with the same glyph rendered in a Label using the same font.
Observe alignment differences
Expected Behavior: The FontImageSource glyph should be centered within the Image bounds (like Label).
Actual Behavior: The glyph rendered via FontImageSource appears misaligned — often off-centered.
Tested Platforms:
✅ Windows
.NET MAUI Version: (9.0.0)
Screen Shots:
Sample :
Just to metion another problem, FontImageSource seems to be more blur compared with using same font directly in label.
This issue has been verified in Visual Studio 17.14.4 Preview 1.0 on windows. It can be reproduced on the Windows platform using the following versions 9,0.0, 9.0.50, 9.0.70 & 9.0.80.
I'm hitting this as well. Here's a reproducer that'll show all the symbols in a symbol font, first rendered with a Label (centers perfectly), and second with FontImageSource, where numerous icons are not centering correctly (some are though):
I was able to fix the offset by changing these lines: https://github.com/dotnet/maui/blob/0ed82dc23a123738e14d0ff20f8817750270ce3f/src/Core/src/ImageSources/FontImageSourceService/FontImageSourceService.Windows.cs#L89-L91
to
var x = canvasWidth / 2;
var y = canvasHeight / 2 - 2;
(I can't quite explain the -2 but it made it align perfectly with how Label renders it - I'm sure there's more to it, than a hardcoded 2 that I haven't figured out yet.)
Here's an example of the output (first one is Label, next is existing FontImageSource, and 3rd column is my adjusted image rendering based on the above tweak:
Just to metion another problem, FontImageSource seems to be more blur compared with using same font directly in label.
Set Aspect="Center" to fix that.
