Xamarin.Forms 上的混合固定元素和可滚动元素
Mixed fixed and scrollable elements on Xamarin.Forms
我刚开始在 Xamarin.Forms 编程，恐怕我可能需要一些帮助。我对标准 XAML 相当得心应手，但 Xamarin.Forms 有局限性和害羞的小警告。
所以问题是：如何在同一个视图中实现混合的固定元素和可滚动元素？比如，我希望下面的按钮固定在底部，然后是内容区域的其余部分，我希望可以滚动。
有办法吗？
-- 更新--
好的...
这是我的代码，顶部和底部部分正确呈现，而 ScrollView 区域根本不呈现...完全空白...?
<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.
例如，如果你想让你的按钮固定在底部，你可以使用跟随组织
<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.
针对您的具体情况：
<?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>
结果是：
这应该可以解决问题。我正在使用这种方式来实现按钮将始终粘在底部。
<ContentPage.Content>
<StackLayout >
<ScrollView>
<StackLayout>
<Label/>
<Label/>
<Label/>
</StackLayout>
</ScrollView>
<Button VerticalOptions="End"/>
<Button VerticalOptions="End"/>
</StackLayout>
</ContentPage.Content>
您需要将 ScrollView 的内容放在另一个布局中，例如 StackLayout 或 Grid：
<ScrollView>
<StackLayout>
<!--some controls-->
</StackLayout>
</ScrollView>
编辑
我实际上建议使用 Grid 而不是 StackLayout，以避免嵌套不同的 StackLayout：
<ScrollView>
<Grid>
<Grid.RowDefinitions>
<!-- a bunch of rows -->
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<!-- *** -->
<!-- labels and entries -->
<!-- *** -->
<!-- first StackLayout -->
<Label Grid.Row=""
x:Name="lblUseMetric"
Margin="2">
Use Metric System
</Label>
<Switch Grid.Row=""
Grid.Column="1"
x:Name="UseMetric"
IsToggled="{Binding User.Metric}"/>
<!-- *** -->
<!-- labels and entries -->
<!-- *** -->
<!-- second StackLayout -->
<Label Grid.Row=""
x:Name="lblWearSide"
Margin="2">
Wears Right
</Label>
<Switch Grid.Row=""
Grid.Column="1"
x:Name="WearSide"
IsToggled="{Binding User.WearSide}"/>
<!-- *** -->
<!-- last label -->
<!-- *** -->
</Grid>
</ScrollView>
我刚开始在 Xamarin.Forms 编程，恐怕我可能需要一些帮助。我对标准 XAML 相当得心应手，但 Xamarin.Forms 有局限性和害羞的小警告。
所以问题是：如何在同一个视图中实现混合的固定元素和可滚动元素？比如，我希望下面的按钮固定在底部，然后是内容区域的其余部分，我希望可以滚动。
有办法吗？
-- 更新--
好的...
这是我的代码，顶部和底部部分正确呈现，而 ScrollView 区域根本不呈现...完全空白...?
<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
LayoutsandScrollViews.
例如，如果你想让你的按钮固定在底部，你可以使用跟随组织
<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.
针对您的具体情况：
<?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>
结果是：
这应该可以解决问题。我正在使用这种方式来实现按钮将始终粘在底部。
<ContentPage.Content>
<StackLayout >
<ScrollView>
<StackLayout>
<Label/>
<Label/>
<Label/>
</StackLayout>
</ScrollView>
<Button VerticalOptions="End"/>
<Button VerticalOptions="End"/>
</StackLayout>
</ContentPage.Content>
您需要将 ScrollView 的内容放在另一个布局中，例如 StackLayout 或 Grid：
<ScrollView>
<StackLayout>
<!--some controls-->
</StackLayout>
</ScrollView>
编辑
我实际上建议使用 Grid 而不是 StackLayout，以避免嵌套不同的 StackLayout：
<ScrollView>
<Grid>
<Grid.RowDefinitions>
<!-- a bunch of rows -->
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<!-- *** -->
<!-- labels and entries -->
<!-- *** -->
<!-- first StackLayout -->
<Label Grid.Row=""
x:Name="lblUseMetric"
Margin="2">
Use Metric System
</Label>
<Switch Grid.Row=""
Grid.Column="1"
x:Name="UseMetric"
IsToggled="{Binding User.Metric}"/>
<!-- *** -->
<!-- labels and entries -->
<!-- *** -->
<!-- second StackLayout -->
<Label Grid.Row=""
x:Name="lblWearSide"
Margin="2">
Wears Right
</Label>
<Switch Grid.Row=""
Grid.Column="1"
x:Name="WearSide"
IsToggled="{Binding User.WearSide}"/>
<!-- *** -->
<!-- last label -->
<!-- *** -->
</Grid>
</ScrollView>