Xamarin.Forms 上的混合固定和可滚动元素 [英] Mixed fixed and scrollable elements on Xamarin.Forms

问题描述

我刚刚开始在 Xamarin.Forms 中编程，恐怕我需要一点帮助.我对标准 XAML 非常熟悉，但 Xamarin.Forms 有局限性和一些小小的警告.

所以问题是:我将如何在同一个视图中实现混合的固定元素和可滚动元素?就像，我希望下面的按钮固定在底部，然后是内容区域的其余部分，我希望可以滚动.

有没有办法做到这一点?

-- 更新 --

好的……

这是我的代码，顶部和底部部分渲染正确，ScrollView 区域根本没有渲染......完全空白......?

<Grid BackgroundColor="{StaticResource BackgroundGray}"><Grid.RowDefinitions><RowDefinition Height="96"/><RowDefinition Height="*"/><RowDefinition Height="自动"/><RowDefinition Height="自动"/></Grid.RowDefinitions><StackLayout Grid.Row="0" HeightRequest="96" BackgroundColor="White" VerticalOptions="Center"><Image Source="biodatix.jpg" VerticalOptions="Center" HeightRequest="48" Margin="4,8,4,4"/><Label FontFamily="Arial" FontSize="20" TextColor="{StaticResource AppLightOrange}" Horizo​​ntalTextAlignment="Center">BioDatix</Label></StackLayout><ScrollView Grid.Row="1" VerticalOptions="FillAndExpand"><Entry x:Name="Username" Placeholder="Email Address" Text="{Binding User.Email}" FontSize="Small"/><Label x:Name="reqemail" Text="请输入电子邮件地址" IsVisible="False" FontSize="Micro" TextColor="Red"/><Entry x:Name="RetypeUsername" Placeholder="重新输入电子邮件地址" FontSize="Small"/><Label x:Name="reqemailverify" Text="请确认您的电子邮件地址" IsVisible="False" FontSize="Micro" TextColor="Red"/><Entry IsPassword="True" Placeholder="Password" x:Name="Password" Text="{Binding User.Password}" FontSize="Small"/><Label x:Name="reqpass" Text="请输入密码" IsVisible="False" FontSize="Micro" TextColor="Red"/><Entry x:Name="FirstName" Placeholder="First Name" Text="{Binding User.FirstName}" FontSize="Small"/><Label x:Name="reqfirstname" Text="请输入您的名字" IsVisible="False" FontSize="Micro" TextColor="Red"/><Entry x:Name="LastName" Placeholder="Last Name" Text="{Binding User.LastName}" FontSize="Small"/><Label x:Name="reqlastname" Text="请输入您的姓氏" IsVisible="False" FontSize="Micro" TextColor="Red"/><StackLayout Orientation="Horizo​​ntal" Margin="4"><Label x:Name="lblUseMetric" Margin="2">使用公制系统</Label><Switch x:Name="UseMetric" IsToggled="{Binding User.Metric}"></Switch></StackLayout><Entry x:Name="UserHeight" Placeholder="Height" Text="{Binding User.Height}" FontSize="Small"/><Label x:Name="reqheight" Text="请输入您的身高" IsVisible="False" FontSize="Micro" TextColor="Red"/><Entry x:Name="UserWeight" Placeholder="Weight" Text="{Binding User.Weight}" FontSize="Small"/><Label x:Name="reqweight" Text="请输入您的体重" IsVisible="False" FontSize="Micro" TextColor="Red"/><StackLayout Orientation="Horizo​​ntal" Margin="4"><Label x:Name="lblWearSide" Margin="2">Wears Right</Label><Switch x:Name="WearSide" IsToggled="{绑定 User.WearSide}"></Switch></StackLayout><Label x:Name="lblError" Text="" IsVisible="False" FontSize="Default" TextColor="Red"/></ScrollView><Button x:Name="RegisterBtn" Clicked="RegisterBtn_Clicked" WidthRequest="200" Horizo​​ntalOptions="Center" BackgroundColor="{StaticResource AppGreen}" Grid.Row="2" Text="Sign In" Margin="4"/><Button x:Name="CancelBtn" Clicked="CancelBtn_Clicked" WidthRequest="200" Horizo​​ntalOptions="Center" BackgroundColor="{StaticResource AppGreen}" Grid.Row="3" Text="帮助登录" Margin="4"/></网格></ContentPage.Content>

解决方案

是的，可以使用 Layouts 和 ScrollViews.

例如，如果你想让你的按钮固定在底部，你可以使用follow组织

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"xmlns:local="clr-namespace:Sample"x:Class="Sample.MainPage"><网格><Grid.RowDefinitions><RowDefinition Height="*"/><RowDefinition Height="自动"/></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="*"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><ScrollView Grid.ColumnSpan="2"><!-- 把所有内容放在这里--></ScrollView><Button Text="Cancel" Grid.Row="1" Grid.Column="0" BackgroundColor="Red"/><Button Text="Ok" Grid.Row="1" Grid.Column="1" BackgroundColor="Green"/></网格></内容页>

<块引用>

请记住，ScrollView 只能包含一个子项，因此您需要将内容包装在布局中.

对于您的具体情况:

<Grid BackgroundColor="{StaticResource BackgroundGray}"><Grid.RowDefinitions><RowDefinition Height="96"/><RowDefinition Height="*"/><RowDefinition Height="自动"/><RowDefinition Height="自动"/></Grid.RowDefinitions><StackLayout Grid.Row="0" HeightRequest="96" BackgroundColor="White" VerticalOptions="Center"><Image Source="biodatix.jpg" VerticalOptions="Center" HeightRequest="48" Margin="4,8,4,4"/><Label FontFamily="Arial" FontSize="20" TextColor="{StaticResource AppLightOrange}" Horizo​​ntalTextAlignment="Center">BioDatix</Label></StackLayout><ScrollView Grid.Row="1" VerticalOptions="FillAndExpand"><堆栈布局><Entry x:Name="Username" Placeholder="Email Address" Text="{Binding User.Email}" FontSize="Small"/><Label x:Name="reqemail" Text="请输入电子邮件地址" IsVisible="False" FontSize="Micro" TextColor="Red"/><Entry x:Name="RetypeUsername" Placeholder="重新输入电子邮件地址" FontSize="Small"/><Label x:Name="reqemailverify" Text="请确认您的电子邮件地址" IsVisible="False" FontSize="Micro" TextColor="Red"/><Entry IsPassword="True" Placeholder="Password" x:Name="Password" Text="{Binding User.Password}" FontSize="Small"/><Label x:Name="reqpass" Text="请输入密码" IsVisible="False" FontSize="Micro" TextColor="Red"/><Entry x:Name="FirstName" Placeholder="First Name" Text="{Binding User.FirstName}" FontSize="Small"/><Label x:Name="reqfirstname" Text="请输入您的名字" IsVisible="False" FontSize="Micro" TextColor="Red"/><Entry x:Name="LastName" Placeholder="Last Name" Text="{Binding User.LastName}" FontSize="Small"/><Label x:Name="reqlastname" Text="请输入您的姓氏" IsVisible="False" FontSize="Micro" TextColor="Red"/><StackLayout Orientation="Horizo​​ntal" Margin="4"><Label x:Name="lblUseMetric" Margin="2">使用公制系统</Label><Switch x:Name="UseMetric" IsToggled="{Binding User.Metric}"></Switch></StackLayout><Entry x:Name="UserHeight" Placeholder="Height" Text="{Binding User.Height}" FontSize="Small"/><Label x:Name="reqheight" Text="请输入您的身高" IsVisible="False" FontSize="Micro" TextColor="Red"/><Entry x:Name="UserWeight" Placeholder="Weight" Text="{Binding User.Weight}" FontSize="Small"/><Label x:Name="reqweight" Text="请输入您的体重" IsVisible="False" FontSize="Micro" TextColor="Red"/><StackLayout Orientation="Horizo​​ntal" Margin="4"><Label x:Name="lblWearSide" Margin="2">Wears Right</Label><Switch x:Name="WearSide" IsToggled="{绑定 User.WearSide}"></Switch></StackLayout><Label x:Name="lblError" Text="" IsVisible="False" FontSize="Default" TextColor="Red"/></StackLayout></ScrollView><Button x:Name="RegisterBtn" Clicked="RegisterBtn_Clicked" WidthRequest="200" Horizo​​ntalOptions="Center" BackgroundColor="{StaticResource AppGreen}" Grid.Row="2" Text="Sign In" Margin="4"/><Button x:Name="CancelBtn" Clicked="CancelBtn_Clicked" WidthRequest="200" Horizo​​ntalOptions="Center" BackgroundColor="{StaticResource AppGreen}" Grid.Row="3" Text="帮助登录" Margin="4"/></网格></内容页>

这是结果:

I'm just getting started programming in Xamarin.Forms, and I'm afraid I might need a little hand-holding. I'm pretty handy with standard XAML, but Xamarin.Forms has limitations and coy little caveats.

So the question is: How would I implement mixed fixed and scrollable elements in the same view? Like, I want the buttons below fixed to the bottom, and then the rest of the content area, I want to be scrollable.

Is there a way to do that?

-- UPDATE --

Okay...

This is my code, and the top and bottom sections render correctly, and the ScrollView area does not render at all ... it's completely blank... ?

<ContentPage.Content>
    <Grid BackgroundColor="{StaticResource BackgroundGray}">
        <Grid.RowDefinitions>
            <RowDefinition Height="96" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <StackLayout Grid.Row="0" HeightRequest="96" BackgroundColor="White" VerticalOptions="Center">
            <Image Source="biodatix.jpg" VerticalOptions="Center" HeightRequest="48" Margin="4,8,4,4" />
            <Label FontFamily="Arial" FontSize="20" TextColor="{StaticResource AppLightOrange}" HorizontalTextAlignment="Center">BioDatix</Label>
        </StackLayout>

        <ScrollView Grid.Row="1" VerticalOptions="FillAndExpand">

            <Entry x:Name="Username" Placeholder="Email Address" Text="{Binding User.Email}" FontSize="Small" />
            <Label x:Name="reqemail" Text="Please enter an email address" IsVisible="False" FontSize="Micro" TextColor="Red"/>

            <Entry x:Name="RetypeUsername" Placeholder="Retype Email Address" FontSize="Small" />
            <Label x:Name="reqemailverify" Text="Please confirm your email address" IsVisible="False" FontSize="Micro" TextColor="Red"/>

            <Entry IsPassword="True" Placeholder="Password" x:Name="Password" Text="{Binding User.Password}" FontSize="Small" />
            <Label x:Name="reqpass" Text="Please enter a password" IsVisible="False" FontSize="Micro" TextColor="Red"/>

            <Entry x:Name="FirstName" Placeholder="First Name" Text="{Binding User.FirstName}" FontSize="Small" />
            <Label x:Name="reqfirstname" Text="Please enter your first name" IsVisible="False" FontSize="Micro" TextColor="Red"/>

            <Entry x:Name="LastName" Placeholder="Last Name" Text="{Binding User.LastName}" FontSize="Small" />
            <Label x:Name="reqlastname" Text="Please enter your last name" IsVisible="False" FontSize="Micro" TextColor="Red"/>

            <StackLayout Orientation="Horizontal" Margin="4">
                <Label x:Name="lblUseMetric" Margin="2">Use Metric System</Label>
                <Switch x:Name="UseMetric" IsToggled="{Binding User.Metric}"></Switch>
            </StackLayout>


            <Entry x:Name="UserHeight" Placeholder="Height" Text="{Binding User.Height}" FontSize="Small" />
            <Label x:Name="reqheight" Text="Please enter your height" IsVisible="False" FontSize="Micro" TextColor="Red"/>

            <Entry x:Name="UserWeight" Placeholder="Weight" Text="{Binding User.Weight}" FontSize="Small" />
            <Label x:Name="reqweight" Text="Please enter your weight" IsVisible="False" FontSize="Micro" TextColor="Red"/>


            <StackLayout Orientation="Horizontal" Margin="4">
                <Label x:Name="lblWearSide" Margin="2">Wears Right</Label>
                <Switch x:Name="WearSide" IsToggled="{Binding User.WearSide}"></Switch>
            </StackLayout>


            <Label x:Name="lblError" Text="" IsVisible="False" FontSize="Default" TextColor="Red"/>


        </ScrollView>

        <Button x:Name="RegisterBtn" Clicked="RegisterBtn_Clicked" WidthRequest="200" HorizontalOptions="Center" BackgroundColor="{StaticResource AppGreen}" Grid.Row="2" Text="Sign In" Margin="4" />

        <Button x:Name="CancelBtn" Clicked="CancelBtn_Clicked"  WidthRequest="200" HorizontalOptions="Center" BackgroundColor="{StaticResource AppGreen}" Grid.Row="3" Text="Help Signing In" Margin="4" />
    </Grid>

</ContentPage.Content>

解决方案

Yes, it's possible using Layouts and ScrollViews.

For example, if you want to keep your buttons fixed at the bottom, you can use the follow organization

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:local="clr-namespace:Sample"
                 x:Class="Sample.MainPage">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>


            <ScrollView Grid.ColumnSpan="2">

                <!-- Put all the content here -->

            </ScrollView>

            <Button Text="Cancel" Grid.Row="1" Grid.Column="0" BackgroundColor="Red"/>
            <Button Text="Ok" Grid.Row="1" Grid.Column="1" BackgroundColor="Green"/>

        </Grid>
    </ContentPage>

Remeber that ScrollView can only contain one children, so you need to wrap your content inside a layout.

For your specific case:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Sample.MixedPage">
    <Grid BackgroundColor="{StaticResource BackgroundGray}">
        <Grid.RowDefinitions>
            <RowDefinition Height="96" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <StackLayout Grid.Row="0" HeightRequest="96" BackgroundColor="White" VerticalOptions="Center">
            <Image Source="biodatix.jpg" VerticalOptions="Center" HeightRequest="48" Margin="4,8,4,4" />
            <Label FontFamily="Arial" FontSize="20" TextColor="{StaticResource AppLightOrange}" HorizontalTextAlignment="Center">BioDatix</Label>
        </StackLayout>

        <ScrollView Grid.Row="1" VerticalOptions="FillAndExpand">
            <StackLayout>
            <Entry x:Name="Username" Placeholder="Email Address" Text="{Binding User.Email}" FontSize="Small" />
            <Label x:Name="reqemail" Text="Please enter an email address" IsVisible="False" FontSize="Micro" TextColor="Red"/>

            <Entry x:Name="RetypeUsername" Placeholder="Retype Email Address" FontSize="Small" />
            <Label x:Name="reqemailverify" Text="Please confirm your email address" IsVisible="False" FontSize="Micro" TextColor="Red"/>

            <Entry IsPassword="True" Placeholder="Password" x:Name="Password" Text="{Binding User.Password}" FontSize="Small" />
            <Label x:Name="reqpass" Text="Please enter a password" IsVisible="False" FontSize="Micro" TextColor="Red"/>

            <Entry x:Name="FirstName" Placeholder="First Name" Text="{Binding User.FirstName}" FontSize="Small" />
            <Label x:Name="reqfirstname" Text="Please enter your first name" IsVisible="False" FontSize="Micro" TextColor="Red"/>

            <Entry x:Name="LastName" Placeholder="Last Name" Text="{Binding User.LastName}" FontSize="Small" />
            <Label x:Name="reqlastname" Text="Please enter your last name" IsVisible="False" FontSize="Micro" TextColor="Red"/>

            <StackLayout Orientation="Horizontal" Margin="4">
                <Label x:Name="lblUseMetric" Margin="2">Use Metric System</Label>
                <Switch x:Name="UseMetric" IsToggled="{Binding User.Metric}"></Switch>
            </StackLayout>


            <Entry x:Name="UserHeight" Placeholder="Height" Text="{Binding User.Height}" FontSize="Small" />
            <Label x:Name="reqheight" Text="Please enter your height" IsVisible="False" FontSize="Micro" TextColor="Red"/>

            <Entry x:Name="UserWeight" Placeholder="Weight" Text="{Binding User.Weight}" FontSize="Small" />
            <Label x:Name="reqweight" Text="Please enter your weight" IsVisible="False" FontSize="Micro" TextColor="Red"/>


            <StackLayout Orientation="Horizontal" Margin="4">
                <Label x:Name="lblWearSide" Margin="2">Wears Right</Label>
                <Switch x:Name="WearSide" IsToggled="{Binding User.WearSide}"></Switch>
            </StackLayout>


            <Label x:Name="lblError" Text="" IsVisible="False" FontSize="Default" TextColor="Red"/>

            </StackLayout>
        </ScrollView>

        <Button x:Name="RegisterBtn" Clicked="RegisterBtn_Clicked" WidthRequest="200" HorizontalOptions="Center" BackgroundColor="{StaticResource AppGreen}" Grid.Row="2" Text="Sign In" Margin="4" />

        <Button x:Name="CancelBtn" Clicked="CancelBtn_Clicked"  WidthRequest="200" HorizontalOptions="Center" BackgroundColor="{StaticResource AppGreen}" Grid.Row="3" Text="Help Signing In" Margin="4" />
    </Grid>
</ContentPage>

And it's the result:

这篇关于Xamarin.Forms 上的混合固定和可滚动元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！