dotnet
[Windows] Fixes center alignment issue of FontImageSource inside Image control
[!NOTE] Are you waiting for the changes in this PR to be merged? It would be very helpful if you could test the resulting artifacts from this PR and let us know in a comment if this change resolves your issue. Thank you!
Issue Details
A FontImageSource inside an Image control results in the icon glyph not being properly centered within its bounding box, causing visual misalignment both vertically and horizontally.
Root Cause
Font images were not visually centered due to using the glyph’s tight bounding box and manual offsets for positioning. This ignored layout size and alignment settings.
The CanvasTextLayout was created with zero width and height, so HorizontalAlignment and VerticalAlignment had no effect. As a result, glyphs were only offset, not truly centered, leading to inconsistent appearance for various glyphs.
Description of Change
Creates the CanvasTextLayout using the full image size with both alignments set to Center. Uses LayoutBounds instead of DrawBounds to more accurately calculate layout size and position.
Reference
I resolved the issue by referring to the following code. https://github.com/dotnet/maui/blob/59ad299cdc4fd8c942df971c6186d476d66307be/src/Compatibility/Core/src/Windows/FontImageSourceHandler.cs#L43
Validated the behavior in the following platforms
- [x] Android
- [x] Windows
- [x] iOS
- [x] Mac
Issues Fixed
Fixes #30004
Output ScreenShot
| Before | After |
|---|---|
![azure-pipelines[bot] avatar](https://avatars.githubusercontent.com/in/9426?v=4 "Published by a pub.dev verified publisher"){kind=small}
The test Source_FontImageSource is failing on Windows.
Snapshot different than baseline: ImageUITests_Source_FontImageSource_Ionicons.png (1.71% difference)
Could you review it?
@jsuarezruiz, The test Source_FontImageSource failure has been resolved. New snapshot has been committed.
@Shalini-Ashokan See my simpler fix here that preserves image sizes and matches Label's rendering: https://github.com/dotnet/maui/pull/31412/files
@Shalini-Ashokan See my simpler fix here that preserves image sizes and matches Label's rendering: https://github.com/dotnet/maui/pull/31412/files
@dotMorten, I ensured the font image scenarios with your fix, but it affects the FontAwesome and Ionicons icons. These icons are available in the HostApp.