Question

I want to visually represent my data in columns, rather than the row representation of a DataGrid. You could think of my data as a List<Column> where a Column contains List<Cell>. The reason I do not transpose the data and just use a DataGrid is that I want to have the ability to add/remove columns dynamically, without having to process all of the data.

+--------------------------------------------+  
|            | Col Header | Col Header | ... |
| Row Header |    Cell    |   Cell     | ... |
|   ...      |     ...    |    ...     | ... |
+--------------------------------------------+

I have a sample of xaml that pretty much does what I want:

<StackPanel Orientation="Horizontal">
   <StackPanel Orientation="Vertical" VerticalAlignment="Top">
      <TextBox Text="" IsReadOnly="True" BorderThickness="0" HorizontalAlignment="Stretch"/>
      <TextBox Text="" IsReadOnly="True" BorderThickness="0,0,0,2" BorderBrush="Black" HorizontalAlignment="Stretch"/>
      <ItemsControl ItemsSource="{Binding RowHeaders}">
         <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
               <StackPanel Orientation="Vertical"/>
            </ItemsPanelTemplate>
         </ItemsControl.ItemsPanel>
         <ItemsControl.ItemTemplate>
            <DataTemplate>
               <TextBox Text="{Binding Mode=OneWay}" IsReadOnly="True" BorderThickness="0,0,2,2" BorderBrush="Black" FontWeight="Bold" />
            </DataTemplate>
         </ItemsControl.ItemTemplate>
      </ItemsControl>
   </StackPanel>
   <ItemsControl ItemsSource="{Binding Columns}">
      <ItemsControl.ItemsPanel>
         <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" />
         </ItemsPanelTemplate>
      </ItemsControl.ItemsPanel>
      <ItemsControl.ItemTemplate>
         <DataTemplate>
            <StackPanel Orientation="Vertical" >
               <TextBox Text="{Binding ColHead1, Mode=OneWay}" IsReadOnly="True"  BorderThickness="0" FontWeight="Bold" HorizontalAlignment="Stretch"/>
               <TextBox Text="{Binding ColHead2, Mode=OneWay}" IsReadOnly="True" FontWeight="Bold" BorderThickness="0,0,0,2" BorderBrush="Black" HorizontalAlignment="Stretch"/>
               <ItemsControl ItemsSource="{Binding Cells}">
                  <ItemsControl.ItemsPanel>
                     <ItemsPanelTemplate>
                        <StackPanel Orientation="Vertical" />
                     </ItemsPanelTemplate>
                  </ItemsControl.ItemsPanel>
                  <ItemsControl.ItemTemplate>
                     <DataTemplate>
                        <TextBox x:Name="textBox" Text="{Binding}" IsReadOnly="{Binding IsReadOnly}" BorderThickness="0,0,0,2" BorderBrush="Black" HorizontalAlignment="Stretch"/>
                     </DataTemplate>
                  </ItemsControl.ItemTemplate>
               </ItemsControl>
            </StackPanel>
         </DataTemplate>
      </ItemsControl.ItemTemplate>
   </ItemsControl>
</StackPanel>

However, how can I ensure that my rows are always aligned? The cells within a column are guaranteed to be aligned since they are contained within a single ItemsControl. However, each column is inside its own StackPanel. Is there a way to ensure that all rows are aligned?

Also, does this seem like a good solution for the problem or is there a better alternative?

Answer 1

You should be able to use Grid.IsSharedSizeScope to make your rows share a size.

I’ve used it in the past for making unassociated columns the same size, and there’s no reason it can’t be used for rows as well