Creating a Horizontal GridSplitter in WPF – for real

I ran into a number of articles on the web declaring how to create a horizontal grid splitter control in WPF – most of them wrong. There are a couple of “Walkthru” articles on MSDN that show the proper way to do it, but waste time poking around the Properties window (who codes like that anyway?). Besides, they are not all consistent - the first article I found calls for setting properties that are not listed in the second article I found and seem to be extraneous.   


So here is a concise description focusing on the XAML alone - I haven’t found a decent XAML code beautifier on the web yet so bare with me.  I am not inheriting any styles as you can see below.


First,  create a Grid with an additional row to host the horizontal splitter.  Note that in this example I have two columns in my grid to show the spanning function:


<Grid VerticalAlignment=”Stretch” HorizontalAlignment=”Stretch”>
        <Grid.ColumnDefinitions >
            <ColumnDefinition Width=”*” />
            <ColumnDefinition Width=”*”  />       
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height=”*” />
            <RowDefinition Height=”Auto” />
            <RowDefinition Height=”*” />
        </Grid.RowDefinitions>


 Next, create a GridSplitter on row #1 (remember that row indices are 0 based). 


<GridSplitter 
            ResizeDirection=”Rows”
            Grid.Column=”0″
            Grid.ColumnSpan=”2″
            Grid.Row=”1″ 
            Width=”Auto”
            Height=”3″
            HorizontalAlignment=”Stretch”
            VerticalAlignment=”Stretch”
            Margin=”0″/>


And there you have it.

This entry was posted in Uncategorized. Bookmark the permalink. Follow any comments here with the RSS feed for this post.

One Response to Creating a Horizontal GridSplitter in WPF – for real

  1. The ResizeDirection property is not necessarily required. It defaults to Auto. When ResizeDirection is set to Auto, the splitter code looks at the alignment properties to figure out how to resize. If you changed VerticalAlingment to Center, then the default ResizeDirection would know to resize by row. See this MSDN article for details: http://msdn2.microsoft.com/en-us/library/system.windows.controls.gridresizedirection.auto.aspx

Leave a Reply