[BUG] IconTintColorBehavior doesn't work as expected on Windows

[alpayclsr1]

Is there an existing issue for this?

• [X] I have searched the existing issues

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

• [X] 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

Icon tint color behavior works fine on Android and iOS, but when I try to use it on Windows it copies the image.

  <StackLayout
     Margin="50"
     Spacing="15"
     VerticalOptions="FillAndExpand">
     <HorizontalStackLayout>
         <Image Aspect="AspectFit" Source="png4xfolder.png">
             <Image.Behaviors>
                 <toolkit:IconTintColorBehavior TintColor="Red" />
             </Image.Behaviors>

         </Image>
         <Image Aspect="AspectFit" Source="png4xfolder.png">
             <Image.Behaviors>
                 <toolkit:IconTintColorBehavior TintColor="Blue" />
             </Image.Behaviors>

         </Image>


         <Image Aspect="AspectFit" Source="png4xfolder.png">
             <Image.Behaviors>
                 <toolkit:IconTintColorBehavior TintColor="Orange" />
             </Image.Behaviors>

         </Image>
     </HorizontalStackLayout>











 </StackLayout>

Expected Behavior

works as expected on android

Steps To Reproduce

1.Run the application with windows and see the bug

Link to public reproduction project repository

https://github.com/alpayclsr1/BugReproductionApp.git

Environment

- .NET MAUI CommunityToolkit:
- OS:
- .NET MAUI:

Anything else?

No response

[vhugogarcia]

Thanks @alpayclsr1 for creating the issue and creating a sample project with the issue you are experiencing. However, could you please share the Environment details where you are facing that issue?

I'm unable to reproduce the issue with the sample project you shared with us. See screenshot below for reference:

I'm running Windows 11 latest version

If you are not using the latest version of Windows 11, could you please apply the latest OS updates, and test again? 😃

[SamuelJames101]

@vhugogarcia @alpayclsr1 I am seeing this issue also, I had to put in the changes recommend in the below PR. It seems as if they have been approved but not sure when they'll actually make it into a release https://github.com/CommunityToolkit/Maui/issues/1212

[vhugogarcia]

Thanks @SamuelJames101 for pointing to the PR. The MCT version 5.3.0+ should contain the fix. I downloaded the sample project provided by @alpayclsr1, and I'm unable to reproduce the issue. If you could please upload a repository with the issue would be awesome.

Also, please provide the exact version of Windows 11 you are using, and if you are using a version behind the version 23H2 (OS build 22631.2792), please apply the latest Windows updates, and let us know the results. 😃

[alpayclsr1]

@vhugogarcia The bug has been resolved because I gave a certain height. Can you download sample project again? Windows version:22H2 OS build 22621.2715

[VladislavAntonyuk]

@alpayclsr1 could you close the issue if byg is resolved?

[alpayclsr1]

@VladislavAntonyuk The bug continues unless we give exact height to the image. Isn't this a bug?I did not use height request in the current sample project and there is a problem.It would be better not to use height request in the scenario I will use

[SamuelJames101]

I see the issue if I get the image to "AspectFit" into an area.

[Bloodyairtimer]

This issue is about to get me go nuts :)

I have attached a sample project where i placed some images in a Grid which are rendered correctly. Adding the same images to a horizontal stacklayout places the tinted image on a strange offset.

When I update the code in the IconTintColorBehavior.Windows.cs file to not have an offset / anchorpoint in the visualsprite element it is rendered correctly in the stacklayout but not in the grid.

MauiApp4.zip

[RuddyOne]

Hey. I have also just ran into this issue on Windows 10. I have no idea what's going on, it was working fine and then I started using the markup toolkit and since then its duplicating the icons.

Only just starting to look into it but it does appear some weird bug is at play.

Note: I can confirm setting a height for some reason "fixes" the issue.

[NoelleRousselle]

I have the same Issue on Windows 11. For me it works when I set minimum and maximum height/width instead of a height and width request.

[vhugogarcia]

@NoelleRousselle @alpayclsr1, we have been running some tests locally on Windows 11 using the MAUI Community Toolkit version 9.0.2 and .NET MAUI 8.0.70 and the issue appears to be fixed. If we don't set a height or width on the image, the tint color is applied correctly as well. Please upgrade and let us know the results.

I'm closing this issue for now. We can re-open it, if needed.

[NoelleRousselle]

@vhugogarcia It works on my side! Thank you for the update!