嵌入式圖像超過佈局的寬度約束（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ć