图像不会在嵌套布局中使用 AspectFill 水平填充答案

【问题标题】：Image does not fill horizontally with AspectFill in a nested layout图像不会在嵌套布局中使用 AspectFill 水平填充
【发布时间】：2017-07-14 21:56:24
【问题描述】：

我在 Xamarin Forms 的 Grid 中有一个相对布局。相对布局中有一个图像。图像具有 AspectFill。

Xamarin.Forms.Aspect.AspectFill Field 说：

缩放图像以填充视图。有些部分可能会被剪裁以填充视图。

图像仍然没有水平填充。如何解决。

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>

【问题讨论】：

标签： xamarin xamarin.forms

【解决方案1】：

以下工作

带约束的相对布局

<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>

【讨论】：

【解决方案2】：

您必须为内部相对布局提供 XConstraint 和 YConstraint

下面的链接

https://developer.xamarin.com/guides/xamarin-forms/user-interface/layouts/relative-layout/

【讨论】：