在 StackLayout 中显示来自不同来源的 Xamarin 的 CollectionView 项目显示不正确

Question

我正在使用 Xamarin 的 CollectionView 和 Stacklayout，我正在尝试以集合视图的形式显示来自不同来源的项目列表。但是，下面显示的代码的输出是我没有预料到的。第一个集合视图的结果显示在一个小的 window 中，所有剩余的项目都可以通过滚动来阅读。但是，我想在不使用滚动条的情况下全部显示它们，如果在代码中添加更多集合视图，同样应该可以工作。我在这里遗漏了什么吗？

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             Title="Arhoo"
             x:Class="Arhoo.Pages.MainFeedPage">

        <StackLayout>
            <StackLayout VerticalOptions="FillAndExpand">                
                <CollectionView x:Name="ItemsListView" 
                        ItemsSource="{Binding Hotels}" 
                        VerticalOptions="FillAndExpand" Margin="10" Visual="Material">

                    <CollectionView.Header>
                        <StackLayout BackgroundColor="LightGray" HeightRequest="50" >
                            <Label Visual="Material" Text="Hotels" FontSize="Medium" FontAttributes="Bold" />
                        </StackLayout>
                    </CollectionView.Header>
                    <CollectionView.ItemsLayout>
                        <GridItemsLayout Orientation="Vertical"  Span="2"/>
                    </CollectionView.ItemsLayout>
                    <CollectionView.EmptyView>
                        <StackLayout>
                            <Label HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Text="Loading Hotels"/>
                        </StackLayout>
                    </CollectionView.EmptyView>
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <StackLayout Visual="Material">
                                <ContentView Padding="10">
                                    <Frame HasShadow="false" OutlineColor="#2f2f2f" Padding="0" CornerRadius="2">
                                        <Grid BackgroundColor="#f2f2f2" MinimumHeightRequest="400">
                                            <Image Source="{Binding Image}" Aspect="AspectFill"/>
                                            <BoxView BackgroundColor="#000000" Opacity="0.4"/>
                                            <Label Text="{Binding Text}" Margin="15" TextColor="White" VerticalOptions="End"
                                       VerticalTextAlignment="End" LineBreakMode="NoWrap" FontSize="18" />
                                        </Grid>
                                    </Frame>
                                </ContentView>
                            </StackLayout>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>

            </StackLayout>            
            <StackLayout VerticalOptions="FillAndExpand">

                <CollectionView x:Name="TOsListView" 
                        ItemsSource="{Binding TourOperators}" 
                        VerticalOptions="FillAndExpand" >
                    <CollectionView.Header>
                        <StackLayout BackgroundColor="LightGray" HeightRequest="20" >
                            <Label Margin="10,0,0,0" Text="Tour Operators" FontSize="Medium" FontAttributes="Bold" />
                        </StackLayout>
                    </CollectionView.Header>
                    <CollectionView.ItemsLayout>
                        <GridItemsLayout 
                    Orientation="Vertical"
                    Span="2"/>
                    </CollectionView.ItemsLayout>
                    <CollectionView.EmptyView>
                        <StackLayout>
                            <Label 
                        HorizontalOptions="CenterAndExpand"
                        VerticalOptions="CenterAndExpand"
                        Text="Loading TOs"/>
                        </StackLayout>
                    </CollectionView.EmptyView>
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <ContentView Padding="10" >
                                <Frame HasShadow="false"
                               OutlineColor="#2f2f2f"
                               Padding="0"
                               CornerRadius="2">
                                    <Grid BackgroundColor="#f2f2f2">

                                        <Image Source="{Binding Image}"
                                       Aspect="AspectFill"/>

                                        <BoxView BackgroundColor="#000000"
                                         Opacity="0.4"/>

                                        <Label Text="{Binding Text}"
                                       Margin="15"
                                       TextColor="White"
                                       VerticalOptions="End"
                                       VerticalTextAlignment="End"
                                       LineBreakMode="NoWrap" 
                                       FontSize="18" />
                                    </Grid>
                                </Frame>
                            </ContentView>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </StackLayout>
        </StackLayout> 



</ContentPage>

Answer 1

我在我的代码中添加了一个 <ScrollView> 并且 collectionview 项目显示为我想要的。这是为我工作的修改后的代码。

  ?xml version="1.0" encoding="UTF-8"?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 Title="Arhoo" 
                 x:Class="Arhoo.Pages.MainFeedPage">
        <ScrollView>
            <StackLayout>  
           <CollectionView x:Name="HotelsListView" ... </CollcetionView>
</StackLayout>
<StackLayout>  
           <CollectionView x:Name="HotelsListView" ... </CollcetionView>
</StackLayout>
<StackLayout>  
           <CollectionView x:Name="HotelsListView" ... </CollcetionView>
</StackLayout>
</StackLayout>

    </ScrollView>

</ContentPage>

在 StackLayout 中显示来自不同来源的 Xamarin 的 CollectionView 项目显示不正确

Displaying Xamarin's CollectionView Items from different sources inside StackLayout is not displaying properly

collectionview

xamarin

stacklayout