StackLayoutはRelativeLayoutの内部には表示されません

Question

私はページにフローティングアクションボタンを追加して、スタックレイアウトを相対レイアウトでラップし、FABを相対レイアウトに追加しようとしています。

<ContentPage.Content> 
    <RelativeLayout BackgroundColor="Transparent"> 
     <fab:FloatingActionButton 
       x:Name="fabBtn" 
       Source="plus.png" 
       Size="Normal" 
       Clicked="Handle_FabClicked" 
       NormalColor="Green" 
     RippleColor="Blue" 
       RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=-75}" 
       RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1, Constant=-75}" /> 
     <StackLayout 
     Spacing="10" 
     Padding="5" 
     VerticalOptions="FillAndExpand" 
     HorizontalOptions="FillAndExpand" 
     RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" 
       RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"> 
     <Label Text="Latest news/activities" FontSize="Medium" VerticalOptions="Start"/> 
     <ScrollView VerticalOptions="CenterAndExpand"> 
      <ListView 
      x:Name="lsvActivities" 
      HasUnevenRows="True"> 
      <ListView.ItemTemplate> 
       <DataTemplate> 
       <ViewCell> 
        <StackLayout Orientation="Horizontal" Padding="3"> 
        <StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand"> 
         <Label Text="{Binding title}" VerticalOptions="StartAndExpand"/> 
         <Label Text="{Binding date}" VerticalOptions="End"/> 
        </StackLayout> 
        <StackLayout HorizontalOptions="End" WidthRequest="100" HeightRequest="100" BackgroundColor="Blue"> 
         <Label Text="image here"/> 
        </StackLayout> 
        </StackLayout> 
       </ViewCell> 
       </DataTemplate> 
      </ListView.ItemTemplate> 
      </ListView> 
     </ScrollView> 
     <Label Text="Good Mording" FontSize="Large" VerticalOptions="End" HorizontalOptions="Center"/> 
     </StackLayout> 
    </RelativeLayout> 
    </ContentPage.Content> 

StackLayoutがレイアウトなどの境界を超えているようにロックされます。

問題は何ですか？ とStackLayoutの両方を表示するにはどうすればいいですか？フローティングアクションボタンは常にStackLayout要素の上に置かなければなりません。

Answer 1

StackLayoutは画面全体を占めようとしていますか？もしそうなら、この部分はそれをするつもりされていません。

画面右下のStackLayoutの左上隅に配置されて

RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" 
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"> 

。 Xamarin docsパー

：

はAbsoluteLayoutとは異なり、RelativeLayoutは 移動アンカーの概念を持っていないと 相対底部またはレイアウトの右端に位置決め要素のための施設を持っていません。

つまり、右下隅に何かを配置すると、AbsoluteLayoutが調整しようとします。 RelativeLayoutは行いません。

はおそらくWidthConstraintとHeightConstraintこと、および0

にXConstraintとYConstraintを設定し、スヴェン・マイケルが言うように、ScrollViewをドロップするStackLayoutに上記の制約をしたいです。

EDIT

XAMLは次のようになります。

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