.NET MAUI how to make the border same size as the image?

by

Code:

<Grid>
   <Border  BackgroundColor="Aqua">
        <Image 
            x:Name="cardImage"
            Source="test4.png"
            Aspect="AspectFit"
            />
   </Border>
</Grid>

I am expecting this code to generate a border as big as the image, however I get below instead. I am not clear what is the reason for the spaces above and below the image.

How can I make the size of the border as high as the image ?

enter image description here

  • The image is being AspectFit into space available from Grid. Border has no way of knowing image is not using the full space it was given. Add to question the declarations of surrounding layouts, starting from root of xaml (contentpage?)

    – 

Try to reduce the size of the image. MAUI is better on scaling up your image than down in my experience. Once you have it down to say 300 in size you will see that it fit and work better in your Grid.

You can try the following code:

     <Border                   
        Stroke="#C49B33"
        StrokeThickness="6"
        StrokeShape="RoundRectangle 0,0,0,0"
        Background="#2B0B98"
        Padding="0"
         >
        <Image  BackgroundColor="Pink" 
        Source="test.jpg"
        Aspect="AspectFit"
        />
    </Border>

Leave a Comment