私は、ページの上部に画像<strong>ballotInfo.png</strong>を維持したい特徴XAMLでUIページをデザインするコード

Question

次のXAMLでスクロール可能なテーブルビューとボタンで次にする方法下。ユーザーは残りのコンテンツをスクロールすることができます。 テーブルビューをscrollviewを使用してスクロール可能にしようとしましたが、期待どおりに動作しません。親切に助けてください。 以下は、作業中のXAMLコードです。

<AbsoluteLayout> 
<RelativeLayout> 
    <Image Source = "ballotInfo.png" Aspect="Fill" x:Name="headerImage" 
     RelativeLayout.WidthConstraint = "{ConstraintExpression 
      Type=RelativeToParent, 
      Property=Width, 
      Factor = 1}" 

     RelativeLayout.HeightConstraint = "{ConstraintExpression 
      Type = RelativeToParent, 
      Property=Height, 
      Factor=0.35}"/> 

<StackLayout x:Name="entryLayout" VerticalOptions="FillAndExpand" Padding="0" 
      RelativeLayout.YConstraint = "{ConstraintExpression 
       Type=RelativeToView, 
       ElementName=headerImage, 
       Property=Height, 
       Factor=1}"> 

     <TableView Intent="Form" HasUnevenRows = "true" > 
      <TableView.Root> 
       <TableSection Title="Local Admin: Ajay" > 
        <ViewCell> 
         <StackLayout Orientation="Horizontal" Padding="10,0,10,0" > 
          <Label Text="Ballot Title" VerticalOptions="Center" TextColor="#a2a1b8" /> 
          <Entry HorizontalOptions="FillAndExpand" FontAttributes="Bold" HorizontalTextAlignment="End" TextColor="#151431" /> 
         </StackLayout> 
        </ViewCell> 
        <ViewCell Height="200" > 
         <StackLayout Orientation="Horizontal" Padding="10,0,10,0"> 
          <Label Text="Ballot Description" VerticalOptions="Center" TextColor="#a2a1b8"/> 
          <Editor VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" FontSize="Small" TextColor="#151431" /> 
         </StackLayout> 
        </ViewCell> 
        <ViewCell> 
         <StackLayout Orientation="Horizontal" Padding="10,0,10,0"> 
          <Label Text = "Ballot End Date" HorizontalOptions="Center" VerticalOptions="Center" TextColor="#a2a1b8" /> 
         <StackLayout HorizontalOptions="EndAndExpand" > 
          <DatePicker Date="{x:Static sys:DateTime.Today}" TextColor="#151431" /> 
         </StackLayout> 
        </StackLayout> 
        </ViewCell> 
        <ViewCell > 
         <StackLayout Orientation="Horizontal" VerticalOptions="Fill" Padding="10,0,10,0" > 
          <Label Text="No. of Candidates" VerticalOptions="Center" TextColor="#a2a1b8" /> 
          <Entry HorizontalOptions="FillAndExpand" Keyboard="Numeric" HorizontalTextAlignment="End" TextColor="#151431" /> 
         </StackLayout> 
        </ViewCell> 
       </TableSection> 
      </TableView.Root> 
     </TableView> 

</StackLayout> 

</RelativeLayout> 
    <Grid 
     AbsoluteLayout.LayoutBounds="0.5, 1, 1,AutoSize" 
     AbsoluteLayout.LayoutFlags="PositionProportional,WidthProportional"> 
     <Button Text="Next" 
     VerticalOptions="End" 
     TextColor="White" 
     FontSize="15" 
     BackgroundColor="#ff2d55"/> 
    </Grid> 
    </AbsoluteLayout> 

Answer 1

グリッドのAbsoluteLayout/RelativeLayoutを置き換えることがよりクリーンなソリューションです。あなたのテンプレートは次のとおりです。

<Grid 
     ColumnSpacing="0" 
     RowSpacing="0"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto" /> 
     <RowDefinition Height="*" /> 
     <RowDefinition Height="Auto" /> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*" /> 
    </Grid.ColumnDefinitions> 
    <Image Grid.Row="0" /> 
    <ScrollView Grid.Row="1"> 
     <StackLayout 
       Padding="0" 
       x:Name="entryLayout"> 
     </StackLayout> 
    </ScrollView> 
    <Button 
      Grid.Row="2" 
      HorizontalOptions="Center" 
      Text="Next" 
     /> 
</Grid>