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.