Breadcrumb arrow Back to Code Examples

How To Change The Grid Splitter Thickness And Visual Style

Sample date Updated on Oct 14, 2026
Browse Code Git logo Download
gridsplitter maui maui-grid-splitter maui-splitter sfgridsplitter

This repository contains a sample demonstrating how to customize the thickness and visual appearance of the .NET MAUI Grid Splitter using the Syncfusion SfGridSplitter control.

The Grid Splitter control provides customization options that allow developers to modify the appearance of the separator displayed between adjacent panes. By adjusting properties such as SeparatorSize and SeparatorBackground, you can create splitters that better align with your application's design language and improve the user experience.

In this example, the splitter thickness is increased to 12 device-independent units using the SeparatorSize property, while the splitter background color is customized using the SeparatorBackground property. The result is a more prominent and visually appealing resize separator between panes.

Sample

XAML

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:gridSplitter="clr-namespace:Syncfusion.Maui.GridSplitter;assembly=Syncfusion.Maui.GridSplitter"
             x:Class="GridSplitter.MainPage">

    <gridSplitter:SfGridSplitter Orientation="Vertical"
                                 SeparatorSize="12"
                                 SeparatorBackground="#0078D7">

        <gridSplitter:SplitterPane>
            <Border Background="#D6EAF8">
                <Label Text="Pane 1"
                       HorizontalOptions="Center"
                       VerticalOptions="Center" />
            </Border>
        </gridSplitter:SplitterPane>

        <gridSplitter:SplitterPane>
            <Border Background="#FADBD8">
                <Label Text="Pane 2"
                       HorizontalOptions="Center"
                       VerticalOptions="Center" />
            </Border>
        </gridSplitter:SplitterPane>

    </gridSplitter:SfGridSplitter>

</ContentPage>

Explanation

The following properties are used to customize the splitter appearance:

SeparatorSize

The SeparatorSize property specifies the thickness of the splitter displayed between panes.

SeparatorSize="12"

In this example, the separator thickness is increased to 12 units, making it easier for users to locate and drag the splitter.

SeparatorBackground

The SeparatorBackground property allows you to define the background color of the splitter.

SeparatorBackground="#0078D7"

This applies a blue color to the separator, making it stand out from the surrounding pane content.

Orientation

The Orientation property determines how the panes are arranged.

Orientation="Vertical"

With a vertical orientation, the panes are displayed side by side, and users can drag the separator horizontally to resize them.

How It Works

In this sample:

  • The Grid Splitter contains two panes.
  • The first pane uses a light blue background.
  • The second pane uses a light red background.
  • The separator between the panes is displayed with a custom blue color.
  • The splitter thickness is increased for better visibility.
  • Users can drag the separator to resize the panes dynamically.
  • The content inside each pane adjusts automatically based on the available space.

Output

When the application runs, the following behavior can be observed:

  • Two panes are displayed side by side.
  • A blue separator appears between the panes.
  • The separator is thicker than the default splitter.
  • Users can easily identify and drag the splitter.
  • Pane sizes update dynamically during resizing.
  • The customized separator improves visual clarity and usability.
  • The layout remains responsive across different screen sizes.

Conclusion

The Syncfusion SfGridSplitter control provides built-in customization options for modifying the separator's thickness and visual style. Using the SeparatorSize and SeparatorBackground properties, developers can create more attractive and user-friendly resizable layouts while maintaining the control's built-in pane resizing functionality.

Up arrow