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

Question

1. 嵌套的 CollectionView 滾動一個內部另一個：它是否得到官方支持？
2. 顯示這些集合問題

請參閱下面我的數據模型和 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>

外部和內部集合視圖的快照：

我強調了顏色，以便更好地看到沒有縮小的布局。

問題：（我嘗試了多種配置但沒有解決方案）

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>具有附加屬性，在你的CollectionView打開IsGrouping ，將父元素構造為CollectionView.GroupHeaderTemplate ，將子元素構造為CollectionView.ItemTemplate 。