CODEWITHSUNDEEP
xamarin.formsstacklayout
Grant J
Grant J

Reputation: 1065

Image resizing inside a StackLayout in Xamarin.Forms

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackStuff.MainPage">

    <StackLayout Orientation="Vertical">
        <Image Source="image.jpg" VerticalOptions="Fill" HorizontalOptions="Fill"/>
    </StackLayout>

</ContentPage>

I have a Xamarin.Forms project where I want an image to resize inside a StackLayout. I stripped it down to the minimal code above and if I resize the window, the image will only resize based off the window width. i.e. the image gets clipped off the bottom of the window if I change the height.

If I change the StackLayout's Orientation to Horizontal, I get the opposite - it'll resize based off a changing height, but not width.

If I completely remove the StackLayout and have only the image on the page, then the entire image will always be visible which is the behaviour I expected when it's inside the StackLayout.

Can anyone explain why this is? If I replace the Image with a BoxView, it'll happily resize and stay within the bounds of the StackLayout.

Thanks.

Upvotes: 0

Views: 402

Answers (1)

Grant J
Grant J

Reputation: 1065

I solved this by wrapping the image in a grid:

<StackLayouenter code heret Orientation="Vertical">
    <Grid>        
        <Image Source="image.jpg" VerticalOptions="Fill" HorizontalOptions="Fill"/>
    </Grid>
</StackLayout>

I have no idea why it works but I guess that's Xamarin.Forms for you.

Upvotes: 0

Related Questions