An ImageButton with rounded corners does not display well

Question

I am developing an application in .NET MAUI using Visual Studio 2022. Generally it works fine, but at some point something got corrupted and a particular button on a screen is not displayed correctly. The XAML code would be as follows:

<StackLayout Orientation="Horizontal"
             HorizontalOptions="End">
    <ImageButton Source="Icons/close.png"
                 BackgroundColor="{StaticResource Neutral085}"
                 HeightRequest="36"
                 WidthRequest="36"
                 CornerRadius="18"
                 Padding="6"
                 Margin="0,10,15,10"
                 Command="{Binding CancelCommand}"/>
</StackLayout>

It is an ImageButton with rounded edges. But it is displayed as a square and smaller in size:

This same XAML code on another screen is displayed correctly. If I run the app from Visual Studio and repeat the button with the Hot Reload I see that the new buttons are displayed correctly.

<StackLayout Orientation="Horizontal"
             HorizontalOptions="End">
    <ImageButton Source="Icons/close.png"
                 BackgroundColor="{StaticResource Neutral085}"
                 HeightRequest="36"
                 WidthRequest="36"
                 CornerRadius="18"
                 Padding="6"
                 Margin="0,10,15,10"
                 Command="{Binding CancelCommand}"/>
    <ImageButton Source="Icons/close.png"
                 BackgroundColor="{StaticResource Neutral085}"
                 HeightRequest="36"
                 WidthRequest="36"
                 CornerRadius="18"
                 Padding="6"
                 Margin="0,10,15,10"
                 Command="{Binding CancelCommand}"/>
    <ImageButton Source="Icons/close.png"
                 BackgroundColor="{StaticResource Neutral085}"
                 HeightRequest="36"
                 WidthRequest="36"
                 CornerRadius="18"
                 Padding="6"
                 Margin="0,10,15,10"
                 Command="{Binding CancelCommand}"/>
</StackLayout>

I don't know why this is happening, I guess there is some corrupted intermediate code/object that is cached somewhere and this is used instead of newly generated code. I have tried the following and it hasn't solved the problem:

• Uninstalling the app from the mobile and reinstalling.
• Clean the solution, delete the bin and obj folders and re-generate the solution.

What could be happening?

Answer 1

Hello,

If you want to implement this same result with other controls, you can use Border and Image to implement it. You can set Border.StrokeShape to add the border and add command to TapGestureRecognizer like following code.

<Border  HeightRequest="36"
           WidthRequest="36"
           Margin="0,10,15,10"
           Padding="6"
           BackgroundColor="{StaticResource Neutral085}"
>
<Border.StrokeShape>
          <RoundRectangle CornerRadius="18" />
</Border.StrokeShape>
<Image Source="Icons/close.png">
    <Image.GestureRecognizers>
         <TapGestureRecognizer Command="{Binding CancelCommand}"/>
    </Image.GestureRecognizers>
 
</Image>
</Border>

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.