Cuadrícula/Visor de desplazamiento- Congelar desplazamiento de la fila de encabezado de la tabla vertical, pero no desplazamiento horizontal

Question

No estoy usando una Cuadrícula de datos o una Vista de lista y estoy usando Visualizador de desplazamiento y Cuadrículas para crear celdas que contienen paneles de elementos para cada columna de celda.

Me gustaría algo con un comportamiento similar a las columnas del encabezado de una cuadrícula de datos o una vista de lista para mantenerlo congelado mientras se desplaza verticalmente por los elementos debajo de él, pero hacer que se desplace horizontalmente.

Actualmente tengo lo siguiente como la raíz de mi ventana principal que funciona, excepto cuando hay una barra de desplazamiento vertical que se muestra la alineación de los elementos está desactivada.

Notas:

• Las cabeceras de las columnas se agregan dinámicamente en el código detrás a la "mainGrid" a continuación con un tamaño "1 *" para cada columna, y son "congelada" por tener la horizontal Barra de desplazamiento permitida pero barra de desplazamiento vertical deshabilitada.
• Luego se agrega un scrollviewer interno que deshabilita el desplazamiento horizontal , pero permite el desplazamiento vertical de la "fila interior agrupaciones".
• ItemTemplate para ItemsControl crea una cuadrícula para cada "agrupación de filas" en las columnas.

Así que cuando "innerScrollViewer" muestra su barra de desplazamiento vertical, los elementos ya no están alineados con los encabezados de las columnas externas y los elementos se desplazan hacia la izquierda debido a la barra de desplazamiento vertical derecha. ¿Cómo lo hago para alinear dinámicamente las cosas con los encabezados de las columnas externas para los dos escenarios de cuando se muestra o no una barra de desplazamiento vertical?

<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

Tiene tres opciones.

1. Hacer barra de desplazamiento vertical visible por defecto tanto para los espectadores de desplazamiento (para la cabecera e interior) de modo que cuando el espectador de desplazamiento interno requiere de desplazamiento vertical, barra de desplazamiento vertical acaba de obtener habilitado, sin tomar más espacio.

2. Propiedad del ancho de enlace de cada columna en el encabezado con las columnas correspondientes en cuadrículas en filas. así que cuando el ancho de una columna de la cuadrícula cambia, también cambiará el ancho de la columna de encabezado correspondiente. esto también lo ayudará a darle una facilidad al usuario para cambiar el tamaño de las columnas arrastrando sus bordes. pero requerirá más códigos.

3. Haga visible la barra vertical del visor de desplazamiento interno y establezca el margen derecho en el encabezado, que es igual al ancho de la barra de desplazamiento vertical.