Grid / ScrollViewer - заморозить вертикальную прокрутку строки заголовка сетки, но не горизонтальную прокрутку - PullRequest
Новая
       28

Grid / ScrollViewer - заморозить вертикальную прокрутку строки заголовка сетки, но не горизонтальную прокрутку

7 голосов
/ 27 ноября 2011

Я не использую DataGrid или ListView и использую ScrollViewer и Grids для создания ячеек, которые содержат панели переноса элементов для каждого столбца ячейки.

Мне бы хотелось, чтобы что-то с поведением, аналогичным столбцам заголовка таблицы данных или списка, сохраняло его замороженным при вертикальной прокрутке элементов под ним, но прокручивало его горизонтально.

В настоящее время у меня есть следующее в качестве корня моего главного окна, которое работает, за исключением случаев, когда есть вертикальная полоса прокрутки, на которой выравнивание элементов отключено.

Примечания:

  • Столбцы заголовка динамически добавляются в код позади "mainGrid" ниже с размером "1 *" для каждого столбца и "заморожены" имея горизонтальную полосу прокрутки, но вертикальную полосу прокрутки отключен.
  • Затем добавляется внутренний прокручиватель, который отключает горизонтальная прокрутка, но допускает вертикальную прокрутку внутреннего "ряда" группировки ".
  • ItemTemplate для ItemsControl создает сетку для каждая «группировка строк» ​​по столбцам.

Поэтому, когда «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>

1 Ответ

1 голос
/ 27 ноября 2011

У вас есть три варианта.

  1. Сделать вертикальную полосу прокрутки видимой по умолчанию для обоих средств просмотра прокрутки (для заголовка и внутреннего), поэтому, когда внутреннему средству просмотра прокрутки требуется вертикальная прокрутка, вертикальная полоса прокрутки просто включается, не занимая больше места.

  2. Свяжите свойство width каждого столбца в заголовке с соответствующими столбцами в сетках в строках. поэтому при изменении ширины столбца сетки строк она также изменит ширину соответствующего столбца заголовка. Это также поможет вам изменить размер столбцов, перетаскивая их границы. но для этого потребуется больше кодов.

  3. Сделать вертикальную полосу внутренней прокрутки видимой и установить правое поле на заголовке, равное ширине вертикальной полосы прокрутки.

...