Question

我在Xaml中有一个容器（当前是StackPanel，我知道这不是最好的，但对我来说只有OK可以工作）。在该容器内，我需要在cs文件中创建未定义数量的列表（最多10个）。问题是，当列表很长时，它们没有滚动条，除非我限制了StackPanel的Height，但是该限制条件应用的响应能力。使用网格也存在问题，因为我需要容器来处理每个新创建的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

ListView可以滚动的原因是因为它们内部有ScrollViewer。将ListView放置在父StackPanel内时，如果ListView的高度大于视口，则父面板将变为ListView的完整高度。您可以通过在Listview项目click方法中获取StackPanel和ActualHeight来验证这一点。这就是为什么固定固定ListView高度时listview起作用的原因。

解决方法很简单：将父布局面板放在ScrollViewer中。

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

Answer 2

因此，为了解决这个问题，我最终使用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);
        }
    });
}

在UWP的另一个响应容器中，使用C＃中的滚动条创建多个ListViews

2 个答案: