[BUG] IconTintColorBehavior misaligns tinted image on Windows

Is there an existing issue for this?

• I have searched the existing issues

Did you read the “Reporting a bug” section on Contributing file?

• I have read the “Reporting a bug” section on Contributing file: https://github.com/CommunityToolkit/Maui/blob/main/CONTRIBUTING.md#reporting-a-bug

Current Behavior

When applying the IconTintColorBehavior on an image, the tinted image is misaligned on Windows; it’s offset is not correct.

Expected Behavior

Expecting the tinted image to correctly overlay the original image.

Steps To Reproduce

1. New MAUI app
2. Add MAUI Community Toolkit NuGet
3. Add IcontTintColorBehavior to the dotnet_bot on MainPage.xaml
4. Run

Link to public reproduction project repository

https://github.com/PieEatingNinjas/BugRep_MauiToolkit_IconTintWindow

Environment

- .NET MAUI CommunityToolkit: 5.2.0
- OS: Win11
- .NET MAUI: 7.0.100

Anything else?

When looking at the source code, I noticed this: currentSpriteVisual.Offset = offset; (https://github.com/CommunityToolkit/Maui/blob/61a64de37e7dc461cc1ea97db4c941c020a59185/src/CommunityToolkit.Maui/Behaviors/PlatformBehaviors/IconTintColor/IconTintColorBehavior.windows.cs#LL181C3-L181C39) which is calculated using this formula: var offset = new Vector3(-width * .5f, -height * .5f, 0f); (https://github.com/CommunityToolkit/Maui/blob/61a64de37e7dc461cc1ea97db4c941c020a59185/src/CommunityToolkit.Maui/Behaviors/PlatformBehaviors/IconTintColor/IconTintColorBehavior.windows.cs#LL160C3-L160C61)

It seems when I run locally and leave this offset logic out, it does behave as expected:

I don’t know why the above offset-logic is in there, maybe @kperdlich can explain? As said, removing this logic fixes the issue, in my particular use case.

[kperdlich]

@brminnick Yeah I’ll prepare a proposal.

[kperdlich]

Originally the offset was used to align the image correctly. A better way would be to use the AnchorPoint.

In the example it looks like the attribute HeightRequest breaks the position of the tinted image. I found a fix https://github.com/kperdlich/Maui/commit/27010e7f75255ec69ea2eb67dc5eb7aa6c919301 by first using the AnchorPoint instead of the Offset to align the image correctly + applying the offset whenever a specific size is requested. However, I’m still not sure why an additional offset is required. Perhaps its something done in the layout calculation.