Dynamically sizing grid rows/columns

A typical user interface contains multiple parts, each responsible for some UI features. Many times it's useful for the user to manually resize those parts, as she sees fit. It turns out the Grid supports dynamic resizing with the help of a GridSplitter element. Let's see how this can be done.

Getting ready

Make sure Visual Studio is up and running.

How to do it...

We'll create a simple two way splitter, similar to the main view in Windows Explorer, to demonstrate a typical GridSplitter usage:

1. Create a new WPF application named CH03.DynamicGridSizing.

2. Open MainWindow.xaml. Add two columns to the existing Grid as follows:

   <Grid.ColumnDefinitions>
       <ColumnDefinition MinWidth="40"/>
       <ColumnDefinition Width="2*" MinWidth="50" />
   </Grid.ColumnDefinitions>

3. Place two Ellipse elements in the created columns, so we'd have some content to work with:

   <Ellipse Stroke="Black" StrokeThickness="2" Fill="Red" />
   <Ellipse Stroke="Black"...