Создайте несколько ListViews с полосой прокрутки в C #, внутри другого адаптивного контейнера в UWP

Question

У меня есть контейнер в Xaml (в настоящее время StackPanel, который, я знаю, не самый лучший, но единственное, что работает нормально для меня).Внутри этого контейнера мне нужно создать неопределенное количество списков (максимум 10) в файле cs.Проблема в том, что когда списки длинные, у них нет полосы прокрутки, если я не ограничиваю высоту StackPanel, но это ограничивает отзывчивость приложения.Использование Grid также проблематично, так как мне нужен контейнер для обработки размещения каждого нового созданного ListView.Я также видел похожие решения, но они всегда ссылаются на списки просмотра в Xaml, а не на C #.

Мой код Xaml:

<Grid VerticalAlignment="Stretch">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <StackPanel Name ="sensorDataStackPanel" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Top">
        <ComboBox x:Name="sensorComboBox" PlaceholderText="Pick sensor" ItemsSource="{x:Bind Path=sensors_collection}" 
                      SelectionChanged="SensorComboBox_SelectionChanged"/>
        <StackPanel Name="AxiseslistViewStackPanel" Orientation="Horizontal" MaxHeight="300"/>

    </StackPanel>  
</Grid>

Код C # -> когда пользователь выбирает датчик в ComboBox в спискахсоответственно создаются внутри StackPanel:

public sealed partial class Layout_Tab : Page
{
    public ObservableCollection<Sensor> sensors_collection;
    public ObservableCollection<Axis> axises;

    .......
    private void SensorComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        ComboBox comboBox = sender as ComboBox;
        Sensor chosen_sensor = (Sensor)comboBox.SelectedItem;
        axises = chosen_sensor.axisesList;
        this.AxiseslistViewStackPanel.Children.Clear();

        foreach(var axis in axises)
        {
            ListView listView = new ListView { Header = axis.AxisName, SelectionMode = ListViewSelectionMode.Multiple,
            ShowsScrollingPlaceholders =true, CanBeScrollAnchor = true};
            foreach(var antenna in axis.inUseAntennaList)
            {
                listView.Items.Add(antenna);
            }
            this.AxiseslistViewStackPanel.Children.Add(listView);
        }
    }
}

Это изображение с определенной высотой StackPanel:

Спасибо за все

РЕДАКТИРОВАТЬ: После перехода в GridView все еще получить те же результаты:

<GridView Name="AxiseslistViewStackPanel" ItemsSource="{x:Bind axises}">
    <GridView.ItemTemplate>
        <DataTemplate x:DataType="tests:Axis">
            <StackPanel>
                <TextBlock Text="{x:Bind AxisName}"/>
                <ListView ItemsSource="{x:Bind inUseAntennaList}" ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.IsVerticalRailEnabled="True" ScrollViewer.VerticalScrollBarVisibility="Visible"/>
             </StackPanel>
         </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

Вот как GridView без ограничения высоты:

Answer 1

Таким образом, чтобы решить эту проблему, я использовал Grid в качестве контейнера вместо StackPanel, вот единственное изменение.

XAML:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto" MinHeight="100"/>
    </Grid.RowDefinitions>

    <Grid Name ="sensorDataStackPanel" Grid.Column="0" Grid.Row="0" VerticalAlignment="Stretch">
        <Grid.RowDefinitions>
            <RowDefinition MaxHeight="30"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <ComboBox Grid.Row="0" x:Name="sensorComboBox" PlaceholderText="Pick sensor" ItemsSource="{x:Bind sensorsCollection, Mode=TwoWay}" 
                          SelectionChanged="SensorComboBox_SelectionChanged" HorizontalAlignment="Left"/>
        <StackPanel Grid.Row="1" Name="AxiseslistViewStackPanel" Orientation="Horizontal" HorizontalAlignment="Left"/>
    </Grid>
</Grid>

CS:

private async Task RefreshSensorView()
{
    await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
    {
        AxiseslistViewStackPanel.Children.Clear();

        foreach (var axis in axisesCollection)
        {
            var axisListView = new ListView
            {
                Header = "Axis: " + axis.AxisNumber,
                SelectionMode = ListViewSelectionMode.Multiple,
                ShowsScrollingPlaceholders = true,
            };

            axisListView.ItemsSource = axis.inUseAntennaList;

            AxiseslistViewStackPanel.Children.Add(axisListView);
        }
    });
}

Answer 2

Причина, по которой ListView может прокручиваться, заключается в том, что они имеют ScrollViewer внутреннюю часть.Когда вы размещаете ListView внутри родительского StackPanel, если высота ListView больше, чем область просмотра, родительская панель становится полной высотой ListView.В этом можно убедиться, получив StackPanel и ActualHeight в методе щелчка элемента списка.Вот почему просмотр списка работает, когда зафиксирована высота ListView.

Исправление простое: поместите родительскую панель макета в ScrollViewer.

<ScrollViewer>
    <StackPanel Name="RootLayout" >
        <Button
        VerticalAlignment="Top"
        Click="Button_Click"
        Content="AddListView"
        />
    </StackPanel>
</ScrollViewer>