How to Use Name Based Grid?

Using NameBasedGrid in XAML

Before you start, make sure the NameBasedGrid namespace is imported into your XAML file. In this documentation, the prefix grid is generally used for that namespace, though you are free to choose any other Xml namespace prefix you prefer.

You can add a NameBasedGrid like any other WPF panel, as a XAML element that may contain one or more child elements:

<grid:NameBasedGrid>
  <Button Content="A"/>
  <CheckBox Content="B"/>
  <Slider/>
</grid:NameBasedGrid>

Like in a Grid, you need to add some ColumnDefinitions and RowDefinitions to define columns and rows, respectively. For NameBasedGrid, you can use instances of the ColumnOrRow class to define both columns and rows:

<grid:NameBasedGrid>
  <grid:NameBasedGrid.ColumnDefinitions>
	<ColumnOrRow Name="a" Size="Auto"/>
	<ColumnOrRow Name="b" Size="Auto"/>
	<ColumnOrRow Name="c" Size="Auto"/>
  </grid:NameBasedGrid.ColumnDefinitions>
  <grid:NameBasedGrid.RowDefinitions>
	<ColumnOrRow Name="a" Size="Auto"/>
	<ColumnOrRow Name="b" Size="Auto"/>
  </grid:NameBasedGrid.RowDefinitions>
  
  <Button Content="A"/>
  <CheckBox Content="B"/>
  <Slider/>
</grid:NameBasedGrid>

Then, use the attached properties from NameBasedGrid to place the controls in the defined columns and rows:

<grid:NameBasedGrid>
  <grid:NameBasedGrid.ColumnDefinitions>
	<ColumnOrRow Name="a" Size="Auto"/>
	<ColumnOrRow Name="b" Size="Auto"/>
	<ColumnOrRow Name="c" Size="Auto"/>
  </grid:NameBasedGrid.ColumnDefinitions>
  <grid:NameBasedGrid.RowDefinitions>
	<ColumnOrRow Name="a" Size="Auto"/>
	<ColumnOrRow Name="b" Size="Auto"/>
  </grid:NameBasedGrid.RowDefinitions>
  
  <Button Content="A" grid:NameBasedGrid.Column="a" grid:NameBasedGrid.Row="b"/>
  <CheckBox Content="B" grid:NameBasedGrid.Column="b" grid:NameBasedGrid.Row="a"/>
  <Slider grid:NameBasedGrid.Column="c" grid:NameBasedGrid.Row="b"/>
</grid:NameBasedGrid>

To have a control cover several cells, use the ExtendToColumn and ExtendToRow attached properties:

<Slider grid:NameBasedGrid.Column="c" grid:NameBasedGrid.Row="b" grid:NameBasedGrid.ExtendToRow="a"/>

Using NameBasedGrid from code-behind

In code-behind, add ColumnOrRow instances to the collections returned from the ColumnDefinitions and RowDefinitions properties of the NameBasedGrid instance.

Use the static methods SetColumn, SetRow, SetExtendToColumn, and SetExtendToRow of NameBasedGrid to position UIElement instances in the grid.