嵌入式图像超过布局的宽度约束（RelativeLayout）

我在嵌入相对布局中的图像资源时遇到问题。尽管图像尺寸较大，但图像本身仍可完美缩放，但在某种程度上，它的宽度超过了布局内的给定宽度限制嵌入式图像超过布局的宽度约束（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>

image exceeds defined layout width

的 “HotelButton” RelativeLayout的堆栈扩展附加在其限定的宽度约束（至MenuStack布局）当图像被插入时。正如您可以在背景中看到用于制作和标记菜单限制的“红色”布局，酒店按钮和配置文件按钮应位于背景中的“红色”布局内。但是，当为酒店按钮插入图像时，会将“配置式”按钮推出“红色”布局的界限。

注意，酒店按钮和配置文件按钮应该是相同的大小 - 相同的宽度。酒店按钮标有“橙色”颜色，以便更好地进行说明。

为什么图像插入布局时发生这种情况？为什么图像本身没有在布局的定义宽度约束（酒店按钮）中缩放？

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

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

来源

2017-05-30 Bojan Petrović