Facebook Twitter Gplus LinkedIn RSS
formats

Automatic Grid Layout for Silverlight

Download

I always find myself cursing Grids in Silverlight when I have to go back and insert something else into the layout after the fact: I always forget to move somethings Row and end up with a lot of obscured components. To compensate for this I’ve written a Grid subclass that can automatically layout its children and fill out the ColumnDefinition and RowDefinition for missing values when the children refer to rows and columns beyond the specified dimensions. In addition it will auto layout for multiple columns using sequential children, this is good if all you want is a 2 by n grid of label/editor cells.

My AutoGrid will allow you to define Rows and Columns like an ordinary grid, but if you don’t catch all of the cases then it fills out the rest for you. For instance you could just define the columns and it will fill out the rows based on the Grid.Row settings of the children. If you want to go a step further, then don’t specify any Grid.Row or Grid.Column attributes and instead add a Columns=”x” to the AutoGrid and it will sequentially lay out the children in column then row order. 

Normally the rows and columns added are “Auto” sized, you can however set the last row and column to be “*” sized using the properties AutoSizeLastColumn and AutoSizeLastRow.  If you need more complex arrangements than this then you should define the items you need sizing explicity using the ColumnDefinitions and/or RowDefinitions attributes.

It really saves me a lot of time when I’m editing this stuff!

Here is an example in full automatic layout mode:


		<AutoGrid:AutoGrid x:Name="LayoutRoot" Columns="2">
			<TextBlock Text="Name"
					   Margin="2"/>
			<TextBox Components:SelectOnFocus.SelectAll="True" Text="{Binding Name, Mode=TwoWay}"
					 Margin="2"
					 Width="150"
					 />
			<TextBlock Text="Type"
					   Margin="2"
					   />
			<ComboBox
					ItemsSource="{Binding Type, Converter={StaticResource EnumSource}}"
					SelectedItem="{Binding Type, Converter={StaticResource EnumValue}}"
					Margin="2"
					Width="150"
					/>
			<TextBlock Text="Width" Margin="2" />
			<TextBox Text="{Binding Width, Mode=TwoWay}"
				 Components:SelectOnFocus.SelectAll="True"
					 Margin="2"
				 Width="150"/>
			<TextBlock Text="Choice List " VerticalAlignment="Top" Margin="2"/>
			<TextBox Width="150"
					 Height="100"
					 Margin="2"
					 AcceptsReturn="True"
					 Text="{Binding ChoiceList, Converter={StaticResource ListToString}, Mode=TwoWay}"/>
		</AutoGrid:AutoGrid>

Which produces this output:

 

You can download the project from here.

5 Responses

  1. Just what I need on most projects. It should be a standard Silverlight component. Thanks for sharing! +++

  2. [...] might also be interested in Mike Talbot’s AutoGrid which dynamically adds rows / columns based as children are added to the grid. A very neat [...]

  3. [...] Майк Талбот (Mike Talbot) поделился примером хитрой сетки для Silverlight. Идея простая, но интересная: чтобы элементы располагались в ячейках самостоятельно. Стоит поглядеть. [...]

  4. Andrus

    Why not to use wrappanel ? Wrappanel also adds automatic resizing/wrapping of label/field items, no need to hard-code column numbers.

    • I use WrapPanel quite a lot in my projects, but what I need here is multi column (equally sized columns) in a Grid layout, so that all of the labels are in a column of the same width and all of the editors are in a different column of a different width. I don’t need to hard code column numbers either (apart from the number of columns in total – and I want to hard code that).

      I wouldn’t know how to make WrapPanel do that, it would want to fit as many items across or down as possible and then wrap to the next row or column. Or am I missing something?

Home Project With Code Automatic Grid Layout for Silverlight