WPF GridSplitter Example

This WPF article uses the GridSplitter control to split a Grid with rows. The GridSplitter can be resized.

GridSplitter. A Grid may have rows and columns.

We specify these with RowDefinitions and ColumnDefinitions. And with a GridSplitter, a user can drag to resize these rows and columns. We use a GridSplitter.

Example. To begin, please create a WPF program with a Grid in it. Next, edit the XAML and add the Grid.RowDefinition element. Then add two RowDefinition elements—and specify the heights on these.

Grid

Then: Drag a GridSplitter element to the Grid. You will need to adjust some attributes on it.

For the GridSplitter, you will want to change the Height. If you remove the Width and set the HorizontalAlignment to Stretch, it will fill the horizontal width. Also, set the Grid.Row attribute to the index of the row you want to resize.

Tip: Please set the Grid.Row attribute on the other elements of your Grid. The first row is index 0, and the second row is 1.

Example markup: XAML

<Window x:Class="WpfApplication23.MainWindow"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	Title="MainWindow" Height="350" Width="525">
    <Grid>
	<Grid.RowDefinitions>
	    <RowDefinition Height="60"/>
	    <RowDefinition Height="60"/>
	</Grid.RowDefinitions>
	<Button Content="In row 0" HorizontalAlignment="Left" Margin="10"
		VerticalAlignment="Top" Width="75"
		Grid.Row="0"/>
	<Button Content="In row 1" HorizontalAlignment="Left" Margin="10"
		VerticalAlignment="Top" Width="75"
		Grid.Row="1"/>
	<GridSplitter Height="10" HorizontalAlignment="Stretch" Margin="0"
		      VerticalAlignment="Top"
		      ResizeDirection="Rows"
		      ShowsPreview="True"
		      Grid.Row="1"/>
    </Grid>
</Window>

In this example, we can drag the GridSplitter up and down. When the mouse is released, the height of the rows is adjusted. With the ShowsPreview attribute, a "preview" bar is shown as it is dragged.

And: When ShowsPreview is left as False, the grid will resize automatically as the splitter is dragged.

You can specify a RowsDirection attribute on the GridSplitter as well. To resize vertically, specify a value of Rows. Otherwise, to resize horizontally (left and right) please specify Columns.

Tip: When using GridSplitter, many of these elements must be added through the XAML editor. Drag and drop support is not always available.

Summary. With a Grid, complex layouts may be achieved. Rows and columns provide a way to visually group controls. This improves usability. And with GridSplitter, the sizes of these groups can be customized, making programs easier still to use.

Resize Rows: MSDN

.Net

.NET Array Dictionary List String 2D Async DataTable Dates DateTime Enum File For Foreach Format IEnumerable If IndexOf Lambda LINQ Parse Path Process Property Regex Replace Sort Split Static StringBuilder Substring Switch Tuple

Java

Core Array ArrayList HashMap String 2D Cast Character Console Deque Duplicates File For Format HashSet If IndexOf Lambda Math ParseInt Process Random Regex Replace Sort Split StringBuilder Substring Switch Vector While

TheDeveloperBlog.com

WPF GridSplitter Example

GridSplitter. A Grid may have rows and columns.

.Net

Java

Related Links