Grids are normally used for data visualization in a tabular format, where columns are displayed vertically and rows horizontally. Sometimes, we have a requirement to show data horizontally. Let's look at how we transpose a matrix so that rows become columns, and columns become rows, creating an inverted DataGrid. C1DataGrid

Step 1: Rotate the DataGrid using LayoutTransform


<c1:C1DataGrid.LayoutTransform>
  <TransformGroup>
      <RotateTransform Angle="-90"/>
  </TransformGroup>
</c1:C1DataGrid.LayoutTransform>

Step 2: Rotate the column headers to show their contents horizontally.


<c1:C1DataGrid.ColumnHeaderStyle>
  <Style TargetType="{x:Type c1:DataGridColumnHeaderPresenter}">
  <Setter Property="LayoutTransform">
  <Setter.Value>
  <TransformGroup>
    <RotateTransform Angle="90"/>
  </TransformGroup>
  </Setter.Value>
  </Setter>
  </Style>
</c1:C1DataGrid.ColumnHeaderStyle>

Step 3: Define CellStyles to interchange the row and column data by rotating all cell presenters.


<c1:C1DataGrid.CellStyle>
  <Style TargetType="{x:Type c1:DataGridCellPresenter}">
  <Setter Property="LayoutTransform">
  <Setter.Value>
  <TransformGroup>
  <RotateTransform Angle="90"/>
  </TransformGroup>
  </Setter.Value>
  </Setter>
  </Style>
</c1:C1DataGrid.CellStyle>

Step 4: Finally, put C1DataGrid into a ScrollViewer to finish the inverted DataGrid.


<ScrollViewer x:Name="c_dataGridScrollViewer"_VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
  <c1:C1DataGrid 
      x:Name="c1DataGrid" 
      ItemsSource="{Binding}" 
      HorizontalScrollBarVisibility="Hidden" 
      VerticalScrollBarVisibility="Hidden"
      HeadersVisibility="Column" 
      VerticalAlignment="Top" 
      HorizontalAlignment="Left" 
      CanUserResizeColumns="True" 
      CanUserAddRows="False"
      GridLinesVisibility="All" 
      ColumnWidth="Auto" 
      ColumnHeaderHeight="100"
      RowHeight="Auto">
</c1:C1DataGrid>
</ScrollViewer>

Conclusion: We can show the data horizontally by inverting the DataGrid only by setting and defining some of its properties in XAML itself.

Create an Inverted DataGrid with ComponentOne Studio

Download the latest version of ComponentOne Studio Enterprise

Download Now!