Question

我想在xaml中设计一个ui页面，其中我想在页面顶部保留图像 ballotInfo.png ，并在底部保持按钮下一步。用户应该能够滚动其余内容。我尝试使用 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>

如何使表视图在以下xaml代码中可滚动

1 个答案: