StackGrid

Owned by Geert van Horrik
Last updated: Mar 04, 2013Version comment
2 min read

Although the example looks crappy (I am not a designer), it shows the power of the StackGrid. You don't have to specify the Grid.Row and Grid.Column attached properties. Remember the times that you want to insert a grid and you had to increase all the numbers? From now on, use the StackGrid!

<catel:StackGrid>
    <!-- Row definitions -->
     <catel:StackGrid.RowDefinitions>
           <RowDefinition Height="Auto" />
           <RowDefinition Height="Auto" MinHeight="15" />
           <RowDefinition Height="Auto" />
     </catel:StackGrid.RowDefinitions>
     
     <!-- Column definitions -->
     <catel:StackGrid.ColumnDefinitions>
           <ColumnDefinition Width="Auto" />
           <ColumnDefinition Width="*" />
     </catel:StackGrid.ColumnDefinitions>
     
     <!-- Name, will be set to row 0, column 1 and 2 -->
     <Label Content="Name" />
     <TextBox Text="Geert van Horrik" />
     
     <!-- Empty row -->
     <catel:EmptyRow />
     
     <!-- Wrappanel, will span 2 columns -->
     <WrapPanel Grid.ColumnSpan="2">
           <Button Command="ApplicationCommands.Close" />
     </WrapPanel>
</catel:StackGrid>

 

The Grid is an excellent control to show several controls in a nice layout on the screen. However, it happens a lot that a grid consists of only 2 or 3 columns, and the first column is for all the labels, and the second one is for controls such as textboxes. You correctly implement all the windows and controls of your application based on user requirements, and then the user decides that he/she wants a row inserted into a grid containing about 20 rows. When this happens, you need to re-define all the row attributes of the grid.

With the StackGrid, it is no longer required to define the row and column definitions. The StackGrid can smartly interpret the location of the controls and therefore fill in the Grid.Row and Grid.Column attached properties for you. You need an empty row? No problem, you can use the EmptyRow class to fill up a row for you. You want a column span? No problem, just use the existing Grid.Column attached property and the StackGrid will automatically handle this for you.

 The StackGrid internally uses a Grid to measure the layout. However, it dynamically loops through its children, and then assigns the Grid.Row and Grid.Column attached properties for the user.