MAUI ImageButton Doesn't Display Images

Viewed 694

The Image tag renders the SVG file properly whereas the ImageButton doesn't. What am I doing wrong?

<ImageButton Margin="0,10,10,10" Padding="0,0,0,0" CornerRadius="0" Source="cart_dark.png"  HeightRequest="24" WidthRequest="24" />
<ImageButton Margin="0,10,10,10" Padding="0,0,0,0" CornerRadius="0" Source="save_dark.png" HeightRequest="24" WidthRequest="24"/>
<ImageButton Margin="0,10,10,10" Padding="0,0,0,0" CornerRadius="0" Source="settings_dark.png" HeightRequest="24" WidthRequest="24"/>

       

 <Image Margin="0,10,10,10" Source="cart_dark.png"  HeightRequest="24" WidthRequest="24"/>
 <Image Margin="0,10,10,10" Source="save_dark.png" HeightRequest="24" WidthRequest="24"/>
 <Image Margin="0,10,50,10" Source="settings_dark.png" HeightRequest="24" WidthRequest="24"/>

enter image description here

2 Answers

I have the same problem. I haven't found a solution yet, but as a temporary workaround you can place an Image behind the ImageButton

<Grid>
  <Image Margin="0,10,10,10" Source="cart_dark.png"  HeightRequest="24" WidthRequest="24"/>
  <ImageButton Margin="0,10,10,10" Padding="0,0,0,0" CornerRadius="0" Source="cart_dark.png"  HeightRequest="24" WidthRequest="24" />
</Grid>

<Grid>
  <Image Margin="0,10,10,10" Source="save_dark.png" HeightRequest="24" WidthRequest="24"/>
  <ImageButton Margin="0,10,10,10" Padding="0,0,0,0" CornerRadius="0" Source="save_dark.png" HeightRequest="24" WidthRequest="24"/>
</Grid>

<Grid>
  <Image Margin="0,10,50,10" Source="settings_dark.png" HeightRequest="24" WidthRequest="24"/>
  <ImageButton Margin="0,10,10,10" Padding="0,0,0,0" CornerRadius="0" Source="settings_dark.png" HeightRequest="24" WidthRequest="24"/>
</Grid>

The Image will be visable behind the ImageButton while the ImageButton remains clickable.

ps: For those wondering about the png ending for the svg files: If you use the svg ending the image will not be displayed, while it will be with the png ending even though its an svg. If you look at a new Maui project you will see that they did the same in the template for the dotnet_bot.svg image.

  • Too big SVG Width/Height (in view box or self size of path)
  • Header problem. Try open in editor and save again (etc Adobe Illustrator, Gravit Designer)
Related