How to customize SfGridSplitter?

3 mins read

You can customize the SfGridSplitter to match the theme of your application. SfGridSplitter provides support for properties like “Style”, “UpButtonTemplate”, “DownButtonTemplate”, “PreviewStyle” and “Template” to customize the layout of the control. This article explains how to customize the SfGridSplitter.

To customize the background of the SfGridSplitter, define the Background property as shown in the following code.

XAML

<input:SfGridSplitter Background="#FF1E3241"/>

To customize the collapse buttons, implement the “UpButtonTemplate” and “DownButtonTemplate” as shown in the following code.

XAML

<Page
    x:Class="SfGridSplitter_Customization.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SfGridSplitter_Customization"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:input="using:Syncfusion.UI.Xaml.Controls.Input"
>
<Page.Resources>
        <SolidColorBrush x:Name="HubBackgroundBrush" Color="#FF1E3241"/>
        <ControlTemplate x:Key="SfGridSplitterRightButtonTemplate">
            <Border x:Name="Border">
                <Grid Width="22" Height="22">
                    <Rectangle x:Name="Rectangle" Fill="Transparent" Width="22" Height="22"/>
                    <Path x:Name="right_enabled" Height="13" Width="13" Stretch="Fill" Fill="{StaticResource ControlBackgroundBrush}" Data="F1 M 176.242,169.143L 176.231,169.133L 176.212,169.153L 173.981,171.383L 171.786,171.383L 174.317,168.851L 175.114,168.054L 175.133,168.036L 174.347,167.248L 171.814,164.717L 174.01,164.717L 176.242,166.947L 177.338,168.046L 176.242,169.143 Z " HorizontalAlignment="Center" UseLayoutRounding="False" VerticalAlignment="Center"/>
                </Grid>
            </Border>
        </ControlTemplate>
        <ControlTemplate x:Key="SfGridSplitterLeftButtonTemplate">
            <Border x:Name="Border">
                <Grid  Width="22" Height="22">
                    <Rectangle x:Name="Rectangle" Fill="Transparent" Width="22" Height="22"/>
                    <Path x:Name="left_enabled" Height="13" Width="13" Stretch="Fill" Fill="{StaticResource ControlBackgroundBrush}" Data="F1 M 172.883,159.044L 172.893,159.033L 172.912,159.054L 175.144,161.283L 177.338,161.283L 174.807,158.752L 174.01,157.955L 173.992,157.937L 174.778,157.149L 177.311,154.617L 175.115,154.617L 172.883,156.848L 171.786,157.947L 172.883,159.044 Z " HorizontalAlignment="Center" UseLayoutRounding="False" VerticalAlignment="Center" />
                </Grid>
            </Border>
        </ControlTemplate>
    </Page.Resources>
<input:SfGridSplitter Grid.Column="1" VerticalAlignment="Stretch"                              Background="{StaticResource HubBackgroundBrush}" EnableCollapseButton="True"
                              UpButtonTemplate="{StaticResource SfGridSplitterLeftButtonTemplate}"
                              DownButtonTemplate="{StaticResource SfGridSplitterRightButtonTemplate}"/>

To customize the template, implement the “Template” property as shown in the following code.

XAML

<Page
    x:Class="SfGridSplitter_Customization.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SfGridSplitter_Customization"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:input="using:Syncfusion.UI.Xaml.Controls.Input"
    xmlns:shared="using:Syncfusion.UI.Xaml.Converters"
>
<Page.Resources> 
        <input:VisibilityToBooleanConverter x:Key="VisibilityToBooleanConverter"/>
        <shared:BooleanToVisibilityConverter x:Key="BooleanVisibilityConverter"/>
        <SolidColorBrush x:Name="HubBackgroundBrush" Color="#FF1E3241"/>
        <ControlTemplate x:Key="SfGridSplitterVerticalTemplate">
            <Grid Background="{TemplateBinding Background}">
                <StackPanel Margin="0" Orientation="Vertical" VerticalAlignment="Center">
                    <Ellipse Fill="{StaticResource ControlBackgroundBrush}" HorizontalAlignment="Center" Height="6" VerticalAlignment="Center" Width="6" Opacity="1" Margin="0,3.5,0,0"/>
                    <Ellipse Fill="{StaticResource ControlBackgroundBrush}" HorizontalAlignment="Center" Height="6" VerticalAlignment="Center" Width="6" Opacity="1" Margin="0,3.5,0,0"/>
                    <Ellipse Fill="{StaticResource ControlBackgroundBrush}" HorizontalAlignment="Center" Height="6" VerticalAlignment="Center" Width="6" Opacity="1" Margin="0,3.5,0,0"/>
                </StackPanel>
                <Grid VerticalAlignment="Top" Margin="0 8 0 0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="22"/>
                        <RowDefinition Height="22"/>
                    </Grid.RowDefinitions>
                    <Button x:Name="PART_Left"  BorderThickness="0" Visibility="{Binding EnableCollapseButton,RelativeSource={RelativeSource Mode=TemplatedParent},Converter={StaticResource BooleanVisibilityConverter}}" Template="{Binding UpButtonTemplate,RelativeSource={RelativeSource Mode=TemplatedParent}}" IsEnabled="{Binding Path=ElementBeforeVisibility,RelativeSource={RelativeSource Mode=TemplatedParent},Converter={StaticResource VisibilityToBooleanConverter}}"/>
                    <Button x:Name="PART_Right" Grid.Row="1"  BorderThickness="0" Visibility="{Binding EnableCollapseButton,RelativeSource={RelativeSource Mode=TemplatedParent},Converter={StaticResource BooleanVisibilityConverter}}" Template="{Binding DownButtonTemplate,RelativeSource={RelativeSource Mode=TemplatedParent}}" IsEnabled="{Binding Path=ElementAfterVisibility,RelativeSource={RelativeSource Mode=TemplatedParent},Converter={StaticResource VisibilityToBooleanConverter}}"/>
                </Grid>
            </Grid>            
        </ControlTemplate>
    </Page.Resources>
<input:SfGridSplitter Grid.Column="1" VerticalAlignment="Stretch"
                              Template="{StaticResource SfGridSplitterVerticalTemplate}"
/>

To customize the Preview style, implement the “PreviewStyle” property as shown in the following code.

XAML

<Page
    x:Class=" SfGridSplitter_Customization.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local=" SfGridSplitter_Customization"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:input="using:Syncfusion.UI.Xaml.Controls.Input"
>
<Page.Resources> 
                <SolidColorBrush x:Name="TextForegroundBrush" Color="#FF415462"/> 
        <Style TargetType="Control" x:Name="SfGridSplitterPreviewStyle">
            <Setter Property="Background" Value="{StaticResource TextForegroundBrush}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Control">
                        <Grid x:Name="Root" Opacity="0.5">
                            <Rectangle Fill="{TemplateBinding Background}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>
<input:SfGridSplitter Grid.Column="1" VerticalAlignment="Stretch"
                              ShowsPreview="True" PreviewStyle="{StaticResource SfGridSplitterPreviewStyle}"
/>

The following screenshot displays a customized SfGridSplitter.

Figure 1: Customized SfGridSplitter

Did you find this information helpful?

Yes

Comments (0)

How to customize SfGridSplitter?

Access denied