Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Image with AspectFill centered instead of left

I have an Image in a Grid, like so:

<Grid VerticalOptions="Fill" HorizontalOptions="Fill">
    <Image Source="" Aspect="AspectFill" HorizontalOptions="Center" VerticalOptions="Fill"/>

Now as an image source I have an image that has a larger width > height ratio then the grid. So what AspectFill does is crop the image on the right side.
But what I want it to do is crop it on both the left and right side, so that it displays the center piece.

Basically the same way as the Windows Desktop wallpaper does in it's "filled" option (see attachment).

How can I do this?
Keep in mind that the images are dynamically loaded and might have different width and height values. So I would like to stay away from fixed numbers.


  • Volodymyr_LeskivVolodymyr_Leskiv USMember ✭✭
    edited June 2016

    Try to set column width to "star", row height to "star" and put your image in first column of grid and first row of grid.
    So your code become like this:

    <Grid VerticalOptions="Fill" HorizontalOptions="Fill"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Image Grid.Column="0" Grid.Row="0" Source="" Aspect="AspectFill" HorizontalOptions="Center" VerticalOptions="Fill"/> </Grid>

Sign In or Register to comment.