Grid/ScrollViewer-冻结网格标题行垂直滚动,但不是水平滚动

Question

我没有使用DataGrid或ListView,而是使用ScrollViewer和Grids来创建包含每个单元格列的项目包装面板的单元格.

我想要一个与datagrid或listview的标题列类似的行为,以便在垂直滚动它下面的项目时保持冻结,但让它水平滚动.

我目前有以下作为我的主窗口的根目录,除了当显示垂直滚动条时,项目的对齐关闭.

笔记:

• 标题列在后面的代码中动态添加到"mainGrid"中,每列的"1*"大小,并且通过允许水平滚动条但禁用垂直滚动条来"冻结".
• 然后添加内部滚动查看器,禁用水平滚动,但允许垂直滚动内部"行分组".
• ItemsControl的ItemTemplate为列中的每个"行分组"创建一个网格.

因此,当"innerScrollViewer"显示其垂直滚动条时,项目不再与外部列标题对齐,并且由于右侧垂直滚动条,项目将向左移动.如何在显示垂直滚动条的两种情况下使用外部列标题动态排列内容？

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
        <Grid x:Name="mainGrid"
              Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollViewer}}, Path=ViewportWidth}">
    <RowDefinitions>
        <RowDefinition Height="Auto" />     <!-- Contains Header columns dynamically added to be "frozen" -->
        <RowDefinition Height="*" />        <!-- "row groupings" -->
    </RowDefinitions>

            <ScrollViewer x:Name="innerScrollViewer"
                          HorizontalScrollBarVisibility="Disabled"
                          VerticalScrollBarVisibility="Auto"                          
                          Grid.Row="1"
                          Grid.ColumnSpan="{Binding Path=NumColumns}">

        <ItemsControl Name="mainWorkItemsItemsControl"
                  Width="{Binding ActualWidth, ElementName=mainGrid}"
                                  ItemsSource="{Binding MyGroups}"
                                  ItemTemplate="{StaticResource groupedTemplate}" />                    

            </ScrollViewer>
    </Grid>
</ScrollViewer>


<DataTemplate x:Key="groupedTemplate">

    <ItemsControl ItemsSource="{Binding GroupItems}">

                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <!-- Creates a grid with one row and the same number of columns as "mainGrid" above with a star sizing for each column  -->
                            <SimpleGrid Rows="Auto" 
                                        Columns="{p:PyBinding CommaDelimit($[.NumColumns]\, \'*\')}" />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>

                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                <ItemsControl ItemsSource="{Binding Path=GroupedColumnItems}">                                    
                                    <ItemsControl.ItemTemplate>
                                        <DataTemplate>
                        <MyControl />                                              
                                        </DataTemplate>
                                    </ItemsControl.ItemTemplate>
                                </ItemsControl>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>

                    <ItemsControl.ItemContainerStyle>
                        <Style>
                            <Setter Property="Grid.Column"
                                    Value="{Binding Path=Index}" />
                        </Style>
                    </ItemsControl.ItemContainerStyle>

    </ItemsControl>

</DataTemplate>

Answer 1

你有三个选择。

1. 默认情况下，垂直滚动条对于滚动查看器（对于标题和内部）都可见，因此当内部滚动查看器需要垂直滚动时，垂直滚动条将启用，而无需占用任何更多空间。

2. 将标题中每列的宽度属性与行中网格中的相应列绑定。因此，当行网格的列宽度发生变化时，标题相应列的宽度也会发生变化。这也将帮助您为用户提供一种通过拖动边框来调整列大小的工具。但它需要更多代码。

3. 使内部滚动查看器的垂直条可见，并在标题上设置等于垂直滚动条宽度的右边距。