代码之家  ›  专栏  ›  技术社区  ›  Nathan M

Xamarin上混合了固定和滚动元素。形式

  •  3
  • Nathan M  · 技术社区  · 6 年前

    我刚刚开始在Xamarin编程。表格,我想我可能需要一点人手。我对标准XAML很在行,但Xamarin。表单有局限性,也有一些含糊其辞的小警告。

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

    有没有办法做到这一点?

    --更新--

    可以

    这是我的代码,顶部和底部部分渲染正确,而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>
    
    3 回复  |  直到 4 年前
        1
  •  3
  •   Jesus Angulo    6 年前

    是的,可以使用 Layouts 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>
    

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

    针对您的具体情况:

    <?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>
    

    结果是:

    Result

        2
  •  1
  •   Julius Degutis    6 年前

    这应该会起作用。我用这种方法来实现按钮总是粘在底部。

    <ContentPage.Content>
        <StackLayout >
            <ScrollView>
                <StackLayout>
                    <Label/>
                    <Label/>
                    <Label/>                                
                </StackLayout>
            </ScrollView>           
            <Button VerticalOptions="End"/>
            <Button VerticalOptions="End"/>
        </StackLayout>
    </ContentPage.Content>
    
        3
  •  0
  •   japhwil    6 年前

    您需要将ScrollView的内容放入另一个布局中,如StackLayout或Grid:

    <ScrollView>
        <StackLayout>
    
        <!--some controls-->
    
        </StackLayout>
    </ScrollView>
    

    编辑

    实际上,我建议使用网格而不是堆栈布局,以避免嵌套不同的堆栈布局:

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