TheDeveloperBlog.com

Home | Contact Us

C-Sharp | Java | Python | Swift | GO | WPF | Ruby | Scala | F# | JavaScript | SQL | PHP | Angular | HTML

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


Related Links

Adjectives Ado Ai Android Angular Antonyms Apache Articles Asp Autocad Automata Aws Azure Basic Binary Bitcoin Blockchain C Cassandra Change Coa Computer Control Cpp Create Creating C-Sharp Cyber Daa Data Dbms Deletion Devops Difference Discrete Es6 Ethical Examples Features Firebase Flutter Fs Git Go Hbase History Hive Hiveql How Html Idioms Insertion Installing Ios Java Joomla Js Kafka Kali Laravel Logical Machine Matlab Matrix Mongodb Mysql One Opencv Oracle Ordering Os Pandas Php Pig Pl Postgresql Powershell Prepositions Program Python React Ruby Scala Selecting Selenium Sentence Seo Sharepoint Software Spellings Spotting Spring Sql Sqlite Sqoop Svn Swift Synonyms Talend Testng Types Uml Unity Vbnet Verbal Webdriver What Wpf