如何在Xamarin Forms中使用ListView并防止它变大

ergxz8rk  于 2022-12-20  发布在  其他
关注(0)|答案(1)|浏览(147)

我需要显示一个包含30到40个项目的列表,用户可以从中进行选择,而且我不习惯使用组合框,所以列表视图似乎是一个不错的选择。
然而,一旦我在页面上放置了一个列表视图,列表视图的高度就会增长得太多,以至于它会离开屏幕,我该如何防止呢?
我需要这样的东西

<gttCompound:PageBase   xmlns="http://xamarin.com/schemas/2014/forms"
                   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                   xmlns:gttCompound="clr-namespace:gttCompound.Pages"
                   x:Class="gttCompound.Pages.PageDamageSelectFromList">

    <gttCompound:PageBase.ChildStackLayoutContent>

        <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" Margin="5, 5">
            <StackLayout VerticalOptions="Start" Orientation="Horizontal" HorizontalOptions="Center">
                <Label Text="SELECT THE DAMAGE LOCATION" FontAttributes="Bold" FontSize="{StaticResource FontSizeLabelSmall}" TextColor="{StaticResource TextColor}" ></Label>
            </StackLayout>

            <StackLayout x:Name="entirePage" BackgroundColor="Yellow">
                    <ListView x:Name="listView" ItemsSource="{Binding Items}" Margin="0" BackgroundColor="Red">
                        <!-- ListView Stuff -->
                    </ListView>
            </StackLayout>

            <StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal" VerticalOptions="EndAndExpand">
                <Button x:Name="ButtonDamageBack" WidthRequest="150" FontAttributes="Bold" HorizontalOptions="Start" TextTransform="Uppercase" Text="{Binding Back}" BackgroundColor="{StaticResource ElementBackgroundColor}" TextColor="{StaticResource ElementTextColor}" FontSize="{StaticResource FontSizeButtonLittle}" />
                <Button x:Name="ButtonDamageNext" WidthRequest="150" FontAttributes="Bold" HorizontalOptions="EndAndExpand" TextTransform="Uppercase" IsEnabled="False" Text="{Binding Next}" BackgroundColor="{StaticResource ElementDisabledBackgroundColor}" TextColor="{StaticResource ElementTextColor}" FontSize="{StaticResource FontSizeButtonLittle}" />
            </StackLayout>

        </StackLayout>
        
    </gttCompound:PageBase.ChildStackLayoutContent>

我给了一些元素一个明显的背景色,这样我就可以看到它们占用了多少空间。
可能是因为该页是继承的页吗?
基本页面如下所示

<?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="gttCompound.Pages.PageBase"
             xmlns:helpers="clr-namespace:gttCompound.Pages.Helpers">
    <ContentPage.Resources>    
        <ResourceDictionary>    
            <helpers:StringNewLineConverter x:Key="StringNewLineConverter"/>    
            <helpers:StringToTitleCaseConverter x:Key="StringToTitleCaseConverter"/> 
            <helpers:StringSubstringConverter x:Key="StringSubstringConverter"/> 
        </ResourceDictionary>    
    </ContentPage.Resources>
    
    
    <!-- All the stuff about the AbsoluteLayout is to get a WaitCursor that can show in the center of the screen, see this url
         https://stackoverflow.com/questions/48295792/xamarin-forms-how-to-fix-activity-indicator-in-centre-of-screen-in-scrollview
    -->
    <AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
        <ScrollView  AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <StackLayout>

                <StackLayout x:Name="TopStackLayout" VerticalOptions="Start" BackgroundColor="{StaticResource HeaderColor}" Orientation="Horizontal">
                    <Frame VerticalOptions="Center" Padding="0" BackgroundColor="{StaticResource HeaderColor}" BorderColor="Transparent" WidthRequest="40">
                        <Button x:Name="ButtonBack" VerticalOptions="Start" Text="" Image="Back.png" BackgroundColor="{StaticResource HeaderColor}" TextColor="{StaticResource TextColor}" FontSize="8" HeightRequest="14" />
                    </Frame>
                    <Frame VerticalOptions="CenterAndExpand" Padding="0" BackgroundColor="{StaticResource HeaderColor}" BorderColor="Transparent">
                        <Label Text="{Binding AppName}" HorizontalOptions="Start" HorizontalTextAlignment="Center" TextColor="White" FontSize="{StaticResource FontSizeLabelBig}" Padding="0" x:Name="Page_Title" />
                    </Frame>
                </StackLayout>

                <StackLayout x:Name="ChildStackLayout" VerticalOptions="FillAndExpand" Orientation="Vertical" Margin="0,-6">
                </StackLayout>

                <StackLayout x:Name="BottomStackLayout" VerticalOptions="End" Orientation="Horizontal" BackgroundColor="{StaticResource HeaderColor}">
                    <Label x:Name="LabelUser" Text="" TextColor="White" FontSize="{StaticResource FontSizeLabelTiny}" BackgroundColor="{StaticResource HeaderColor}" Margin="0,0,0,-6" HorizontalTextAlignment="Start" IsVisible= "True" />
                    <Label x:Name="LabelVersion" Text="" HorizontalOptions="CenterAndExpand"  TextColor="White" FontSize="{StaticResource FontSizeLabelTiny}" BackgroundColor="{StaticResource HeaderColor}" Margin="0,0,0,-6" HorizontalTextAlignment="Center" IsVisible= "True" />
                    <Label Text="{Binding CopyRight}" HorizontalOptions="EndAndExpand" BackgroundColor="{StaticResource HeaderColor}" HorizontalTextAlignment="End" TextColor="White" FontSize="{StaticResource FontSizeLabelTiny}" />
                </StackLayout>
            </StackLayout>
        </ScrollView>

        <AbsoluteLayout x:Name="LayoutWaitCursor" BackgroundColor="#22000000" AbsoluteLayout.LayoutBounds="0.5,0.5,1,1" AbsoluteLayout.LayoutFlags="All" IsVisible="false">
            <ActivityIndicator IsVisible="true" IsRunning="True" Color="{StaticResource TextColor}" AbsoluteLayout.LayoutBounds="0.5,0.5,0.1,0.1" AbsoluteLayout.LayoutFlags="All" />
        </AbsoluteLayout>
    </AbsoluteLayout>
</ContentPage>

下面是窗体在运行时的外观

如果没有列表视图,它看起来像这样
我只换了这个

<StackLayout x:Name="entirePage" BackgroundColor="Yellow">
                    <!--
                    <ListView x:Name="listView" ItemsSource="{Binding Items}" Margin="0" BackgroundColor="Red">
                    </ListView>
                -->
            </StackLayout>

我想要的是列表视图是可见和可滚动的,但是2个按钮应该总是可见的。列表视图必须只占据页面顶部的标签和页面底部的2个按钮之间的空间。
我该怎么做呢?

7uhlpewt

7uhlpewt1#

**1)**删除滚动视图。
2)<StackLayout x:Name="ChildStackLayout" VerticalOptions="FillAndExpand" ...。请尝试其他VerticalOptions。请尝试Center。也请尝试CenterAndExpand
**3)**如果仍然错误,将外部StackLayout改为Grid,并使用RowDefinitions="Auto,*,Auto",3个部分标记为Grid.Row="0"/“1”/“2”。

ChildStackLayout为“1”(从0开始编号),因此获取行定义中的*

相关问题