Question

嵌套CollectionView并在其中滚动一个：正式支持吗？
显示这些收藏夹问题

请参见下面的数据模型和XAML代码（我没有网站可以放置生成的屏幕图像）

namespace Notes.Models
{
    public class Note
    {
        public enum NoteStatus { suspended, alive }

        public string       Description { get; set; }
        public NoteStatus   Status { get; set; }
    }

    public class NotesContainer
    {
        public string                       Name { get; set; }
        public DateTime                     LastModified { get; set; }
        public ObservableCollection<Note>   ListOfNotes { get; set; }
    }
}

  <CollectionView x:Name="notesContainers" SelectionMode="Single" EmptyView="No items currently exist !">
    <CollectionView.ItemTemplate>
      <DataTemplate>
        <Frame BorderColor="Red" BackgroundColor="Beige" CornerRadius="3" HasShadow="False" Padding="5">
          <StackLayout BackgroundColor="Aqua" Padding="5">
            <Grid>
              <Grid.RowDefinitions><RowDefinition Height="auto"/><RowDefinition Height="auto"/></Grid.RowDefinitions>
              <Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/></Grid.ColumnDefinitions>
              <Label Grid.RowSpan="2" Text="{Binding Name}" VerticalTextAlignment="Center" FontSize="Large"/>
              <Label Grid.Row="0" Grid.Column="1" Text="{Binding LastModified, StringFormat='\{0:dddd dd}'}" HorizontalTextAlignment="End"/>
              <Label Grid.Row="1" Grid.Column="1" Text="{Binding LastModified, StringFormat='\{0:MMMM yyyy}'}" HorizontalTextAlignment="End"/>
            </Grid>
            <StackLayout BackgroundColor="BlueViolet" Padding="10">
              <CollectionView ItemsSource="{Binding ListOfNotes}" SelectionMode="Single" EmptyView="No items currently exist !">
                <CollectionView.ItemTemplate>
                  <DataTemplate>
            <StackLayout BackgroundColor="Coral" Padding="0,3">
                    <Frame BorderColor="Blue" BackgroundColor="LightBlue" CornerRadius="3" HasShadow="False" Padding="5">
                      <StackLayout Orientation="Horizontal">
                        <Label Text="{Binding Description}" HorizontalOptions="Start" VerticalTextAlignment="Center"/>
                        <Label Text="{Binding Status}" HorizontalOptions="EndAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="End"/>
                      </StackLayout>
                    </Frame>
             </StackLayout>
                 </DataTemplate>
                </CollectionView.ItemTemplate>
              </CollectionView>
            </StackLayout>
          </StackLayout>
        </Frame>
      </DataTemplate>
    </CollectionView.ItemTemplate>
  </CollectionView>

snapshot of outer & inner collectionviews 我强调了颜色以更好地看到布局没有缩小。

问题：（我尝试了多种配置，但没有解决方案）
1.如何将StackLayouts缩小到其内容？
2.为什么StackLayouts会拉长屏幕的尺寸？

Answer 1

您应该将 StackLayout 与 BindableLayout 一起使用，而不是使用 CollectionView。我刚刚遇到了同样的问题，最后我使用 StackLayout 中的 BindableLayout 解决了如下问题：

为了提供更好的想法，我在父对象中有一些对象列表。像这样：

Customers (Items in the code)
--- Products
------- Batches
-----------Series

所以我有一个客户列表，其中包含一个产品列表，其中每个都包含一个批次列表，最后他们有一个序列列表。

           <ScrollView>
                <StackLayout BindableLayout.ItemsSource="{Binding Items}">
                    <BindableLayout.ItemTemplate>
                        <DataTemplate>
                            <StackLayout                                 
                            Orientation="Vertical" 
                            HorizontalOptions="FillAndExpand">

                                <StackLayout x:DataType="ms:Customer" Orientation="Vertical">

                                    <StackLayout BindableLayout.ItemsSource="{Binding Products}">
                                        <BindableLayout.ItemTemplate>
                                            <DataTemplate>

                                                <Frame CornerRadius="10" Margin="5, 5, 5, 5" HasShadow="True" BackgroundColor="#5ac8fa">
                                                    <StackLayout>

                                                        <StackLayout x:DataType="ms:Product" Orientation="Vertical">
                                                            <Label Text="{Binding Name}" FontAttributes="Bold" FontSize="Caption" />
                                                            <Label Text="{Binding ProductCode}" FontAttributes="Italic" FontSize="Micro" />

                                                            <StackLayout BindableLayout.ItemsSource="{Binding Batches}">
                                                                <BindableLayout.ItemTemplate>
                                                                    <DataTemplate>
                                                                        <StackLayout x:DataType="ms:Batch" Orientation="Vertical" HorizontalOptions="FillAndExpand">

                                                                            <Grid Margin="0,10,0,0">
                                                                                <Grid.ColumnDefinitions>
                                                                                    <ColumnDefinition Width="2*" />
                                                                                    <ColumnDefinition Width="1*" />
                                                                                </Grid.ColumnDefinitions>
                                                                                <Label Grid.Column="0" Text="{Binding Code}" FontAttributes="Bold" FontSize="Caption" />
                                                                                <Label Grid.Column="1" Text="{Binding ExpiredDateFormated}" FontAttributes="Italic" HorizontalTextAlignment="End" FontSize="Micro" />
                                                                            </Grid>

                                                                            <StackLayout BindableLayout.ItemsSource="{Binding Serials}">
                                                                                <BindableLayout.ItemTemplate>
                                                                                    <DataTemplate>
                                                                                        <StackLayout x:DataType="ms:Serial" Orientation="Vertical" HorizontalOptions="FillAndExpand">
                                                                                            <Frame CornerRadius="10" HasShadow="True">

                                                                                                <StackLayout>
                                                                                                    <Label Text="{Binding SerialCode}" FontAttributes="Bold" FontSize="Micro" />
                                                                                                </StackLayout>
                                                                                                <Frame.GestureRecognizers>
                                                                                                    <TapGestureRecognizer 
                                                                                                            NumberOfTapsRequired="1" 
                                                                                                            Command="{Binding Source={RelativeSource AncestorType={x:Type vm:SearchSerialsByLocationViewModel}}, Path=SerialTappedCommand}" 
                                                                                                            CommandParameter="{Binding .}" />
                                                                                                </Frame.GestureRecognizers>
                                                                                            </Frame>
                                                                                        </StackLayout>
                                                                                    </DataTemplate>
                                                                                </BindableLayout.ItemTemplate>
                                                                            </StackLayout>

                                                                        </StackLayout>
                                                                    </DataTemplate>
                                                                </BindableLayout.ItemTemplate>
                                                            </StackLayout>

                                                        </StackLayout>

                                                    </StackLayout>
                                                </Frame>

                                            </DataTemplate>
                                        </BindableLayout.ItemTemplate>
                                    </StackLayout>

                                </StackLayout>
                            </StackLayout>
                        </DataTemplate>
                    </BindableLayout.ItemTemplate>
                </StackLayout>
            </ScrollView>

效果非常好。

Answer 2

嵌套CollectionView并在其中滚动一个：正式支持吗？

据我所知，并不是所有平台都支持嵌套CollectionViews，因为它们中都有Scroll，并且嵌套ScrollViews是众所周知的坏习惯。

显示这些收藏夹问题

我无法理解您在这里的确切意思，但是如果您能澄清一下，也许我可以为您提供帮助。

如何缩小StackLayouts的内容？

通过将Spacing设置为0将是一个好的开始！

我希望StackLayouts不超过屏幕的大小，就像上面的代码和一些数据一样

您的StackLayout是否占据了整个屏幕？（位于ItemTemplate中的那个？）

Answer 3

我只是自己处理这个问题，并找到了这个解决方案： https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/grouping

简而言之：这个想法是以这样的方式重构您的数据，即父元素是具有附加属性的 List<child>，在您的 IsGrouping 中打开 CollectionView，构造父元素作为 CollectionView.GroupHeaderTemplate，而孩子作为 CollectionView.ItemTemplate。

嵌套的CollectionViews和显示（使用Visual Studio 2019，Xamarin XPlatform Android）

3 个答案: