我如何在以Listview和Grid为父级的UWP中滚动整个列表？

Question

我已经在这里多次看到了这个问题，但是我仍然没有找到答案。我已经尝试了所有方法，但是该死的列表不会完全滚动下来。我尝试将其放在堆栈面板中，作为父控件的scrollviewer，将高度设置为*，或者将其设置为自动，或者在网格内部或列表视图内部进行固定。但是似乎没有任何工作。有人可以帮我吗？谢谢。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0">
        <ListBox x:Name="categoryListBox" ItemsSource="{Binding Categories}" HorizontalAlignment="Center">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <Button 
                            Content="{Binding}"
                            Command="{Binding DataContext.GetProductsFromCategoriesCommand, ElementName=pageFoodAndDrinks}"
                            CommandParameter="{Binding}"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </StackPanel>
    <ContentDialog 
                x:Name="ContentDialog"
                PrimaryButtonText="Order"
                CloseButtonText="Cancel">
        <StackPanel>
            <TextBlock Text="Do you wish to order?"></TextBlock>
            <TextBox x:Name="amount"></TextBox>
        </StackPanel>
    </ContentDialog>
    <ScrollViewer Grid.Row="1"  HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch">
        <StackPanel>
            <ListView x:Name="productsListView" ItemsSource="{Binding Products}" SelectionChanged="ProductsListView_SelectionChangedAsync">
                <ListView.HeaderTemplate>
                    <DataTemplate>
                        <Grid Padding="12" Background="{ThemeResource SystemBaseLowColor}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="200"/>
                                <ColumnDefinition Width="900"/>
                                <ColumnDefinition Width="200"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock Grid.Column="0" Text="Product" Style="{ThemeResource CaptionTextBlockStyle}"/>
                            <TextBlock Grid.Column="1" Text="Description" Style="{ThemeResource CaptionTextBlockStyle}"/>
                            <TextBlock Grid.Column="2" Text="Price" Style="{ThemeResource CaptionTextBlockStyle}"/>
                        </Grid>
                    </DataTemplate>
                </ListView.HeaderTemplate>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Grid x:Name="Product">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="200"/>
                                <ColumnDefinition Width="900"/>
                                <ColumnDefinition Width="200"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock Grid.Column="0" Text="{Binding ProductName}" TextWrapping="Wrap" MaxWidth="150"></TextBlock>
                            <TextBlock Grid.Column="1" Text="{Binding ProductDescription}" TextWrapping="Wrap" MaxWidth="800"></TextBlock>
                            <TextBlock Grid.Column="2" Text="{Binding ProductPrice}" TextWrapping="Wrap" MaxWidth="150"></TextBlock>
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackPanel>
    </ScrollViewer>
</Grid>

Answer 1

从您提供的代码中，我看不到什么问题。

1。您不能将ListBox或ListView放在height定义为Auto的Row内。这会使其中的ScrollViewer无效。

2。切勿在ListBox内放置ListView或StackPanel，这将禁用DataVirtualization。如果没有DataVirtualization，则处理更大的数据将变得一团糟。

3。不要在主UI元素之间保留ContentDialog。>

下面是修改后的代码，它将分别滚动ListView和ListBox

    <ContentDialog 
                x:Name="ContentDialog"
                PrimaryButtonText="Order"
                CloseButtonText="Cancel">
        <StackPanel>
            <TextBlock Text="Do you wish to order?"></TextBlock>
            <TextBox x:Name="amount"></TextBox>
        </StackPanel>
    </ContentDialog>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
        <ListBox Grid.Row="0" x:Name="categoryListBox" ItemsSource="{Binding Categories}" HorizontalAlignment="Center">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <Button 
                            Content="{Binding}"
                            Command="{Binding DataContext.GetProductsFromCategoriesCommand, ElementName=pageFoodAndDrinks}"
                            CommandParameter="{Binding}"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

            <ListView x:Name="productsListView" Grid.Row="1" ItemsSource="{Binding Products}" SelectionChanged="ProductsListView_SelectionChangedAsync">
                <ListView.HeaderTemplate>
                    <DataTemplate>
                        <Grid Padding="12" Background="{ThemeResource SystemBaseLowColor}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="200"/>
                                <ColumnDefinition Width="900"/>
                                <ColumnDefinition Width="200"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock Grid.Column="0" Text="Product" Style="{ThemeResource CaptionTextBlockStyle}"/>
                            <TextBlock Grid.Column="1" Text="Description" Style="{ThemeResource CaptionTextBlockStyle}"/>
                            <TextBlock Grid.Column="2" Text="Price" Style="{ThemeResource CaptionTextBlockStyle}"/>
                        </Grid>
                    </DataTemplate>
                </ListView.HeaderTemplate>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Grid x:Name="Product">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="200"/>
                                <ColumnDefinition Width="900"/>
                                <ColumnDefinition Width="200"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock Grid.Column="0" Text="{Binding ProductName}" TextWrapping="Wrap" MaxWidth="150"></TextBlock>
                            <TextBlock Grid.Column="1" Text="{Binding ProductDescription}" TextWrapping="Wrap" MaxWidth="800"></TextBlock>
                            <TextBlock Grid.Column="2" Text="{Binding ProductPrice}" TextWrapping="Wrap" MaxWidth="150"></TextBlock>
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
</Grid>