Android 嵌入图像超出布局的宽度约束（RelativeLayout）

我有一个问题，图像资源嵌入在相对布局。即使图像很大，图像本身也可以完美缩放，但不知何故，其宽度超过了布局中给定的宽度限制

下面的代码显示了有问题的图像（Koala.jpg）的相对布局：

<RelativeLayout HorizontalOptions="Center"  HeightRequest="100" x:Name="HotelButton"  BackgroundColor="Orange" Opacity="0.5"
                                        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=MenuStack,Property=Width, Factor=0.2}" >

                            <Image Source="{local:ImageResource TestUIPCL.images.Koala.jpg}"  VerticalOptions="Center"
                                   RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=HotelButton Property=Width, Factor=1}" />

                            <Label x:Name="lblTheHotel" TextColor="White" Text="THE HOTEL" HorizontalOptions="Center" Margin="0,0,0,0" YAlign="Start"></Label>
                        </RelativeLayout>

“HotelButton”RelativeLayout堆栈在其定义的宽度约束（到MenuStack布局）上额外扩展，当图像插入其中时。 正如您在背景中看到的用于制作和标记菜单限制的“红色”布局一样，Hotel按钮和Profile按钮应位于背景中的“红色”布局内。但当为酒店按钮插入图像时，它会将配置文件按钮推出“红色”布局的边界

请注意，酒店按钮和个人资料按钮的大小和宽度应相同。酒店按钮用“橙色”标记，以便于澄清

为什么在布局中插入图像时会发生这种情况？ 为什么图像本身不在定义的布局宽度限制范围内缩放（酒店按钮）

在嵌入这样的图像时，我应该使用不同的布局类型或布局组合吗？ 欢迎提出任何建议和更正。 谢谢

完整的XAML代码：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TestUIPCL;assembly=TestUIPCL"
             x:Class="TestUIPCL.Page1">

    <RelativeLayout VerticalOptions="Fill"
                    HorizontalOptions="Fill" x:Name="backrel"
                    RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                    RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
                    RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,Constant=0}"
                    RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,Constant=0}" >

        <RelativeLayout VerticalOptions="Fill"
                        HorizontalOptions="Fill" x:Name="backmenu"
                        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=backrel,Property=Width, Factor=0.5}"
                        RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
                        RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,Constant=0}"
                        RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,Constant=0.4}" BackgroundColor="Black">

            <StackLayout Orientation="Vertical" x:Name="MainStack" Margin="0,0,0,0" HorizontalOptions="Fill"
                         RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0}"
                         RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                         RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0}"
                         RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height,Factor=1}" BackgroundColor="Red">

                <StackLayout VerticalOptions="Center" HorizontalOptions="Center"  HeightRequest="150" Margin="0,20,0,0"  x:Name="LogoStack" BackgroundColor="Black">
                    <Image Source="{local:ImageResource TestUIPCL.images.logo.png}"  Margin="0,0,0,0" VerticalOptions="CenterAndExpand"  />
                </StackLayout>

                <StackLayout Orientation="Horizontal" x:Name="MenuStack"  HeightRequest="150"
                             RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=MainStack, Property=Width, Factor=0.2}">

                    <RelativeLayout HorizontalOptions="Center"  HeightRequest="100" x:Name="HotelButton"  BackgroundColor="Orange" Opacity="0.5"
                                    RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=MenuStack,Property=Width, Factor=0.2}" >

                        <Image Source="{local:ImageResource TestUIPCL.images.Koala.jpg}"  VerticalOptions="Center"
                               RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=HotelButton Property=Width, Factor=1}" />

                        <Label x:Name="lblTheHotel" TextColor="White" Text="THE HOTEL" HorizontalOptions="Center" Margin="0,0,0,0" YAlign="Start"></Label>
                    </RelativeLayout>

                    <StackLayout HorizontalOptions="CenterAndExpand"  HeightRequest="100" x:Name="ProfileButton"  BackgroundColor="Black" Opacity="0.5">
                        <Image Source="{local:ImageResource TestUIPCL.images.logohotel.png}" VerticalOptions="Center" Margin="0,0,0,0"/>
                        <Label x:Name="lblProfile" TextColor="White" Text="PROFILE" HorizontalOptions="Center" Margin="0,2,0,0" YAlign="Start"></Label>
                    </StackLayout>


                </StackLayout>
            </StackLayout>

        </RelativeLayout>
    </RelativeLayout>

</ContentPage>

根据：

StackLayout中视图的大小取决于高度和宽度请求以及布局选项。StackLayout将强制填充

因此，如果使用

StackLayout

作为父布局，

RelativeLayout.WidthConstraint

在StackLayout的子元素中不起作用。（子元素将采用与其父元素相同的宽度）

在xaml代码中，您需要使用其他布局替换

MainStack

和

MenuStack

，这在很大程度上取决于您的需求