| name | syncfusion-wpf-gridsplitter |
| description | Guide for implementing Syncfusion WPF GridSplitter (SfGridSplitter) control for dynamic layout resizing. Use this skill when implementing WPF GridSplitter, split panels, or resizable grid layouts. Covers splitting grid rows or columns with movable splitters, collapse/expand functionality, resizable panels, drag behavior configuration, and splitter appearance customization in WPF applications. |
| metadata | {"author":"Syncfusion Inc","version":"33.1.44"} |
Implementing Syncfusion WPF GridSplitter
This skill guides you in implementing the Syncfusion® WPF GridSplitter (SfGridSplitter) control, a container control that splits available space horizontally or vertically with a movable splitter to dynamically resize visual elements.
When to Use This Skill
Use this skill when you need to:
- Create resizable layouts with movable splitters between panels
- Implement split panels in WPF applications (horizontal or vertical)
- Add collapse/expand functionality for grid sections
- Enable dynamic resizing of grid rows or columns with user interaction
- Configure drag behavior for splitter movement and preview
- Customize splitter appearance with templates and styles
- Support keyboard-based resizing with increment controls
- Create multi-pane layouts with independent resizable sections
This skill covers complete GridSplitter implementation from basic setup to advanced customization.
Component Overview
SfGridSplitter is a layout control that divides available space in a Grid with an interactive splitter bar. Key capabilities:
- Dynamic Resizing: Movable splitter redistributes space between grid rows/columns on demand
- Orientation Support: Horizontal or vertical splitting based on grid placement
- Collapse/Expand: Built-in buttons to hide/show panels interactively
- Preview Mode: Optional preview of resize operation before applying
- Customizable Templates: Full control over gripper, collapse buttons, and preview appearance
- Keyboard Support: Resize using keyboard with configurable increment values
- Merged Cell Support: Works with merged grid rows and columns
Typical Use Cases:
- Master-detail views with resizable sections
- Code editor with collapsible side panels
- Data explorer with adjustable tree/grid split
- Multi-document interfaces with resizable panes
Documentation and Navigation Guide
Getting Started
📄 Read: references/getting-started.md
Learn the fundamentals of adding and configuring SfGridSplitter:
- Assembly deployment and NuGet package installation
- Adding control in XAML with namespace imports
- Adding control programmatically in C#
- Basic grid splitter setup in row/column layouts
- Initial configuration and alignment requirements
Use this reference when: Setting up GridSplitter for the first time, adding required assemblies, or creating basic split layouts.
Resize and Layout Operations
📄 Read: references/resize-and-layout.md
Master grid resizing capabilities and layout configuration:
- Resizing grid rows with horizontal splitters
- Resizing grid columns with vertical splitters
- ResizeBehavior property (PreviousAndNext, PreviousAndCurrent, etc.)
- DragIncrement and KeyboardIncrement for pixel-precise resizing
- MoveSplitter() method for programmatic resizing
- Working with merged columns and rows
- Orientation handling and alignment strategies
Use this reference when: Configuring resize behavior, implementing programmatic resizing, working with merged cells, or fine-tuning drag/keyboard increments.
Collapse and Expand Features
📄 Read: references/collapse-expand-features.md
Implement interactive collapse/expand functionality:
- EnableCollapseButton property to show/hide buttons
- Collapsing and expanding grid rows and columns
- Custom collapse button templates (Up, Down, Left, Right)
- UpButtonTemplate and DownButtonTemplate for horizontal splitters
- LeftButtonTemplate and RightButtonTemplate for vertical splitters
- User interaction patterns for panel visibility
Use this reference when: Adding collapse/expand buttons, customizing button appearance, or implementing panel hide/show features.
Customization and Styling
📄 Read: references/customization-styling.md
Customize visual appearance and behavior:
- Background property for splitter color
- HorizontalGripperTemplate for horizontal splitter gripper
- VerticalGripperTemplate for vertical splitter gripper
- PreviewStyle for deferred resizing preview
- ShowsPreview property for preview mode
- Custom drag preview UI with templates
- Advanced styling scenarios and theme integration
Use this reference when: Customizing splitter appearance, creating custom gripper designs, implementing preview styles, or matching application themes.
Quick Start
For horizontal splitters: Create Grid with RowDefinitions (*, Auto, ), place SfGridSplitter in middle row with Height="5" and ResizeBehavior="PreviousAndNext". For vertical splitters: Create ColumnDefinitions (, Auto, *) and set Width instead. See Getting Started for complete examples.
Common Patterns
Key patterns include collapse buttons (EnableCollapseButton), preview mode (ShowsPreview), programmatic resizing (MoveSplitter), multi-splitter layouts, and constrained resizing with DragIncrement/KeyboardIncrement. See the reference files for complete implementation examples and when-to-use guidance.
Key Properties
| Property | Type | Purpose | When to Use |
|---|
| ResizeBehavior | ResizeBehavior | Controls which rows/columns are affected by resize | Set to PreviousAndNext (most common), PreviousAndCurrent, or CurrentAndNext based on which panels should resize |
| EnableCollapseButton | bool | Shows/hides collapse/expand buttons | Enable when users need to temporarily hide panels |
| ShowsPreview | bool | Shows resize preview before applying | Enable for heavy layouts or when users need visual confirmation |
| DragIncrement | double | Pixel interval for mouse-based resizing | Set to constrain resize to specific increments (default: 1) |
| KeyboardIncrement | double | Pixel interval for keyboard-based resizing | Set for arrow key resize granularity (default: 20) |
| HorizontalAlignment | HorizontalAlignment | Alignment for horizontal splitters | Use Stretch for row resizing |
| VerticalAlignment | VerticalAlignment | Alignment for vertical splitters | Use Stretch for column resizing |
| Background | Brush | Splitter bar color | Customize to match application theme |
| Height | double | Height of horizontal splitter bar | Set explicit height (e.g., 5-10 pixels) for horizontal splitters |
| Width | double | Width of vertical splitter bar | Set explicit width (e.g., 5-10 pixels) for vertical splitters |
Common Use Cases
- Code Editor: IDE-style layouts with collapsible side panels using EnableCollapseButton and custom button templates.
- Data Explorer: Database tools with adjustable query/result views using ShowsPreview and ResizeBehavior.
- Master-Detail: List-detail interfaces with variable sizing using basic resize and DragIncrement.
- Multi-Document Interface: Multiple resizable document panes using multiple splitters and merged cell support.
- Dashboard Widgets: Analytics dashboards with adjustable widget containers using DragIncrement and preset configurations.
Troubleshooting Quick Reference
Splitter not resizing panels?
- Verify Grid.Row/Grid.Column placement
- Check HorizontalAlignment/VerticalAlignment settings
- Ensure ResizeBehavior is set appropriately
Collapse buttons not showing?
- Set EnableCollapseButton="True"
- Verify splitter has sufficient size for buttons
Preview not displaying?
- Set ShowsPreview="True"
- Check PreviewStyle if using custom styles
Jerky resizing?
- Adjust DragIncrement for smoother movement
- Consider ShowsPreview for heavy layouts
Navigate to the detailed reference files above for comprehensive implementation guidance and advanced scenarios.