“Moving GridSplitter with code behind” is not the right question

Occasionally I see people searching for how to move the GridSplitter with code behind…
This is not the right question. You can in theory move the GridSplitter itself with code – it is just a control that is hosted in a Grid (if used correctly), so by adjusting the Margins or ~Alignment properties – you can change its position, but what you really want is to resize the associated column/row – which will also incidentally move the GridSplitter.

How to use a GridSplitter?

The GridSplitter in WPF has a few properties the one in Silverlight doesn’t have, but overall the general setup is the same. You can use the splitter to resize a pair of rows or a pair of columns. You can either have a splitter that occupies the entire row/column and resizes the neighboring ones or have one that resizes the row/column it occupies and one of the neighboring ones. The behavior can be forced by the values of the ResizeBehavior or ResizeDirection properties in WPF, but by default it is induced from alignment (VerticalAlignment/HorizontalAlignment) and dimensions (ActualWidth/ActualHeight) of the splitter and it is the better way to use it since that makes it compatible between WPF and Silverlight. MSDN actually has a pretty decent explanation of how to set up a GridSplitter, so I won’t dive into that here. One thing worth noting is – there is no GridSplitter control for Windows Phone. It does not seem like WinRT has one either. It probably just isn’t the most usable paradigm for touch UIs, though my SimpleGridSplitter should be a straightforward port if you really want to use one.

How a GridSplitter works?

GridSplitter is placed in a Grid column or row and resizes two rows or columns when dragged. How does it do that is – it changes the Width or Height property of the respective two RowDefinition or ColumnDefinition objects. Updating these causes invalidation of the layout by the Grid – thus resizing the contents of these columns. These properties are of the GridLength type, that defines the width or height in one of three ways – explicitly defining the value in points/pixels, “Auto” size – that makes the Grid size the row/column to accommodate its contents or star (“*”) size – that gives the row/column a proportional size depending on the available space and the proportions of all star-sized columns.
When you drag the GridSplitter – the Widths of the associated columns or Heights of the associated rows get updated. If the previous value was an explicit pixel-size or Auto – it gets changed to a pixel-sized value to correspond to the user’s action. Star-sizes get new proportion multipliers, but remain star-sized, so resizing the entire grid will make them keep their relative proportions and allow them to keep using all available space to present the data.

How to resize rows/columns with code?

I wrote a sample application that includes a few sliders that resize grid columns in turn moving the GridSplitters inside of the grid. It lets you explore the effects of manipulating the splitters on ColumnDefinitions’ Widths and also shows how they compare with my SimpleGridSplitter implementation. The code for these sliders shows how to move the splitters – simply by setting a column definition’s Width property to a new GridLength value. The source can be downloaded from here.


Tagged , , , , ,

One thought on ““Moving GridSplitter with code behind” is not the right question

  1. […] “Moving GridSplitter with code behind” is not the right question Advertisement LD_AddCustomAttr("AdOpt", "1"); LD_AddCustomAttr("Origin", "other"); LD_AddCustomAttr("theme_bg", "ffffff"); LD_AddCustomAttr("theme_text", "333333"); LD_AddCustomAttr("theme_link", "0066cc"); LD_AddCustomAttr("theme_border", "cccccc"); LD_AddCustomAttr("theme_url", "ff4b33"); LD_AddCustomAttr("LangId", "1"); LD_AddCustomAttr("Autotag", "technology"); LD_AddSlot("wpcom_below_post"); LD_GetBids(); Share this:FacebookTwitterRedditDiggStumbleUponLinkedInTumblrEmailPrintLike this:LikeBe the first to like this post. […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: