[Windows] Fixes center alignment issue of FontImageSource inside Image control #30068
Conversation
|
Hey there @@Shalini-Ashokan! Thank you so much for your PR! Someone from the team will get assigned to your PR shortly and we'll get it reviewed. |
dotnet-policy-service
bot
added
the
partner/syncfusion
|
/azp run MAUI-UITests-public |
|
Azure Pipelines successfully started running 1 pipeline(s). |
There was a problem hiding this comment.
Pull Request Overview
This PR fixes how FontImageSource glyphs are centered within an Image control on Windows by using the full layout bounds and explicit size when creating the text layout rather than zero dimensions, and updates related padding/offset calculations. It also adds a UI test and host app page to verify the alignment.
- Use
fontSizefor the layout’s width/height instead of zero - Switch from
DrawBoundstoLayoutBoundswhen computing canvas size and offsets - Add shared UI test and host app scenario for Issue 30004
Reviewed Changes
Copilot reviewed 3 out of 5 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| src/Core/src/ImageSources/FontImageSourceService/FontImageSourceService.Windows.cs | Create CanvasTextLayout with full fontSize, use LayoutBounds for size and offset |
| src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue30004.cs | Add UI test that waits for “FontImage” and captures screenshot |
| src/Controls/tests/TestCases.HostApp/Issues/Issue30004.cs | Add host app ContentPage to display centered FontImageSource examples |
Comments suppressed due to low confidence (1)
src/Controls/tests/TestCases.HostApp/Issues/Issue30004.cs:13
- To enable the UI test to target the Image control itself (rather than the Label), add a unique AutomationId to the Image, e.g.
AutomationId = "FontImageIcon".
new Image() { Source = new FontImageSource() { FontFamily = "FA", Glyph = "\xf7a4", Color = Colors.Black, Size = 50}, Margin = 4, Background= Colors.Red, WidthRequest=100, HeightRequest=100, HorizontalOptions = LayoutOptions.Center},
| var canvasWidth = (float)layout.LayoutBounds.Width + 2; | ||
| var canvasHeight = (float)layout.LayoutBounds.Height + 2; | ||
|
|
||
| var canvasImageSource = new CanvasImageSource(device, canvasWidth, canvasHeight, dpi); | ||
| using (var ds = canvasImageSource.CreateDrawingSession(UI.Colors.Transparent)) | ||
| { | ||
| // offset by 1px as we added a 1px padding | ||
| var x = (layout.DrawBounds.X * -1) + 1; | ||
| var y = (layout.DrawBounds.Y * -1) + 1; | ||
| var x = (layout.LayoutBounds.X * -1) + 1; | ||
| var y = (layout.LayoutBounds.Y * -1) + 1; |
There was a problem hiding this comment.
[nitpick] Consider extracting the 1px padding into a named constant (e.g. const float Padding = 1;) to avoid magic numbers and improve readability.
Copilot uses AI. Check for mistakes.
| public void VerifyFontImageAreCenterAlign() | ||
| { | ||
| App.WaitForElement("FontImage"); | ||
| VerifyScreenshot(); |
There was a problem hiding this comment.
Pending snapshots.
Could you commit the images?
There was a problem hiding this comment.
@jsuarezruiz, I have committed the images.
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.
maui/src/Compatibility/Core/src/Windows/FontImageSourceHandler.cs
Line 43 in 59ad299
Validated the behavior in the following platforms
Issues Fixed
Fixes #30004
Output ScreenShot