TheDeveloperBlog.com
C-Sharp | Java | Python | Swift | GO | WPF | Ruby | Scala | F# | JavaScript | SQL | PHP | Angular | HTML
WPF GridSplitter Example
Use the resizable WPF GridSplitter control to split a Grid with rows.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.
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.
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>
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: Microsoft Docs
© TheDeveloperBlog.com
The Dev Codes
Related Links:
- WPF Controls
- WPF Rectangle: Fill and Stroke
- WPF TabControl Example: TabItem
- WPF HorizontalAlignment and VerticalAlignment
- WPF Grid Use: Margin and Background
- WPF GridSplitter Example
- WPF StackPanel: Arrange Controls
- WPF DataGrid Examples
- WPF DatePicker Example: SelectedDate
- WPF Border Example
- WPF CheckBox Example
- WPF ComboBox Example (ItemsSource)
- WPF Ellipse: Stroke, Fill and MouseEnter
- WPF DockPanel Example
- WPF Expander Control
- WPF DoubleAnimation
- WPF ProgressBar: Value and Maximum
- WPF Button Control Example
- Top 35 WPF Interview Questions (2021)
- WPF Viewbox Example
- WPF WebBrowser Control
- WPF PasswordBox Control: PasswordChanged
- WPF IsEnabled Property (Button Example)
- WPF RadioButton Example (Checked)
- WPF Image Example: PNG, JPG Files
- WPF ToolBar Example: Uses ToolBarTray
- WPF ToolTip Example
- WPF TextBlock Example
- WPF TextBox Example
- WPF TreeView Example: TreeViewItem
- WPF Menu, MenuItem and Separator
- WPF Label Example
- WPF Name Property: Get Controls
- WPF KeyDown Event Handler
- WPF RenderTransform Example: TransformGroup
- WPF ListView Control: Add Items to GridView
- WPF ScrollViewer Control
- WPF GroupBox Example
- WPF WindowsFormsHost Example
- WPF WrapPanel Example
- WPF Slider Example (ValueChanged)
- WPF Calendar Example: SelectedDate
- WPF Canvas Example: SetLeft, SetTop