Очень большое нижнее поле во вложенном ListView в формах Xamarin

Question

Я создаю свое первое приложение для форм Xamarin из WPF.Я столкнулся с нежелательным автоматическим макетом ContentPage, который содержит вложенный Listview.Данные в модели представления представляют собой набор Groups, где каждый Group содержит набор Users.

. Представление пользователей одной группы выглядит следующим образом:

Но между первой и второй группой существует огромный разрыв:

XAML:

<ContentPage.Content>
    <ListView ItemsSource="{Binding Groups}" Margin="4"
              x:Name="lstGroups">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid Margin="0,0,0,4">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Grid VerticalOptions="Start" >
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition />
                            </Grid.RowDefinitions>
                            <Label Text="{Binding Name}"  />
                            <ListView Grid.Row="1" ItemsSource="{Binding Users}"
                                      VerticalOptions="Center"
                                      IsVisible="{Binding Source={x:Reference lstGroups},Path=Selected}">
                                <ListView.ItemTemplate>
                                    <DataTemplate>
                                        <ViewCell>
                                            <Grid Margin="0,0,0,2" VerticalOptions="Center">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="*" />
                                                    <ColumnDefinition Width="Auto" />
                                                </Grid.ColumnDefinitions>
                                                <Label Text="{Binding ShortName}"  />
                                                <Switch IsToggled="{Binding IsSelected}" Grid.Column="1" />
                                            </Grid>
                                        </ViewCell>
                                    </DataTemplate>
                                </ListView.ItemTemplate>
                            </ListView>
                        </Grid>
                        <Switch IsToggled="{Binding IsSelected}" Grid.Column="1" />
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
        <ListView.Footer>
            <Button Text="Terug" Command="{Binding BackCommand}" />
        </ListView.Footer>
    </ListView>
</ContentPage.Content>

Я пробовал несколько комбинаций `VerticalOptions ', но разрыв просто не исчезает!

Куда я иду не так?

Answer 1

Итак, действительно, нужно было применить группировку в ListView. Новый xaml:

<ListView ItemsSource="{Binding Groups}" Margin="4"
              x:Name="lstGroups"
              IsGroupingEnabled="True">
        <ListView.GroupHeaderTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Label Text="{Binding Name}"  />
                        <Switch IsToggled="{Binding IsSelected}" Grid.Column="1" Margin="2" />
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.GroupHeaderTemplate>
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid Margin="4,0,20,0" >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Label Text="{Binding ShortName}"  />
                        <Switch IsToggled="{Binding IsSelected}" Grid.Column="1" Margin="2" />
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
        <ListView.Footer>
            <Button Text="Terug" Command="{Binding BackCommand}" />
        </ListView.Footer>
    </ListView>

Что приводит к следующему удовлетворительному результату:

Подробнее здесь