Image does not fill horizontally with AspectFill in a nested layout

Question

I have a Relative layout inside Grid in Xamarin Forms. There is an image inside the relative layout. The image has AspectFill.

Xamarin.Forms.Aspect.AspectFill Field says:

Scale the image to fill the view. Some parts may be clipped in order to fill the view.

Still the image is not filling horizontally. How to fix it.

XAML

 <Grid x:Name="controlGrid" ColumnSpacing="0" Padding="0">
    <Grid.RowDefinitions>
        <RowDefinition Height="2*" />
        <RowDefinition Height="2*" />
        <RowDefinition Height="8*" />
        <RowDefinition Height="1*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>


    <!--Row 1-->
    <BoxView Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="Red" HeightRequest="1" VerticalOptions="End" HorizontalOptions="FillAndExpand" Margin="0" />
    <BoxView Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="Red" HeightRequest="1" VerticalOptions="Start" HorizontalOptions="FillAndExpand" Margin="0"/>
    <BoxView Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="Red" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End" Margin="0"/>
    <BoxView Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="Red" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="Start" Margin="0"/>

    <RelativeLayout Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" >
        <Image Source="abstracttrianglex.png" Aspect="AspectFill" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Red"/>
    </RelativeLayout>

    <!--Row 2-->
    <RelativeLayout Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="Teal" >
        <Image Source="abstracttrianglex.png"  Aspect="AspectFill" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Blue"/>
    </RelativeLayout>

</Grid>

LCJ LCJ · Accepted Answer · 2017-07-17T17:15:02

Following worked

Relative layout with constraints

<RelativeLayout Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" >
        <Image Source="abstracttriangleg.png" 
               Aspect="AspectFill" HorizontalOptions="FillAndExpand" 
               VerticalOptions="FillAndExpand" BackgroundColor="Red"
               RelativeLayout.WidthConstraint=
                     "{ConstraintExpression Type=RelativeToParent,
                                            Property=Width,
                                            Factor=1}"
                 RelativeLayout.HeightConstraint=
                     "{ConstraintExpression Type=RelativeToParent,
                                            Property=Height,
                            Factor=1}"/>
    </RelativeLayout>

Image does not fill horizontally with AspectFill in a nested layout

2 Answers