SfDataGrid - Change scrollbar colors?

[Martin]

Hello!

Is it possible to change the default (gray) colors of the scrollbars of a SfDataGrid?

Thanks,
martin

[Riyaj Ahamed I]

Hi Martin,

 

Thanks for contacting Syncfusion support.

 

Yes, you can change the default color of scrollbar in SfDataGrid by apply custom style for the scrollbar.

 

Please let us know if you have any concern.

 

Regards,

Riyaj Ahamed I

[Martin]

Which property do i have to style? If i make the background or foreground of the scrollbar red, nothing happens.

[Jai Ganesh S]

Hi Martin,

Thanks for your update.

We have analyzed your query. By setting the default ScrollBar’s background property value doesn’t make any changes in ScrollBar user interface.  To change the background color of Scrollbar you have to set  the background value for Grid named as “Root” in ScrollBar ControlTemplate.

Please refer below code snippet illustration for more details.

CodeSnippet (Xaml):

<Style TargetType="ScrollBar">

            <Setter Property="MinWidth" Value="17"/>

            <Setter Property="MinHeight" Value="17"/>

            <Setter Property="Background" Value="Transparent"/>

            <Setter Property="Foreground" Value="Transparent"/>

            <Setter Property="BorderBrush" Value="Transparent"/>

            <Setter Property="IsTabStop" Value="False"/>

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="ScrollBar">

                        <Grid x:Name="Root" Background="#FF27A0C3">

                            <Grid.Resources>

                                <ControlTemplate x:Key="RepeatButtonTemplate" TargetType="RepeatButton">

                                    <Grid x:Name="Root" Background="Transparent">

                                        <VisualStateManager.VisualStateGroups>

                                            <VisualStateGroup x:Name="CommonStates">

                                                <VisualState x:Name="Normal"/>

                                            </VisualStateGroup>

                                        </VisualStateManager.VisualStateGroups>

                                    </Grid>

                                </ControlTemplate>

                                <ControlTemplate x:Key="HorizontalIncrementTemplate" TargetType="RepeatButton">

                                    <Grid x:Name="Root">

                                        <VisualStateManager.VisualStateGroups>

                                            <VisualStateGroup x:Name="CommonStates">

                                                <VisualState x:Name="Normal"/>

                                                <VisualState x:Name="PointerOver">

                                                    <Storyboard>

                                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundPointerOver"/>

                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ArrowPointerOver">

                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ScrollBarButtonPointerOverForegroundThemeBrush}"/>

                                                        </ObjectAnimationUsingKeyFrames>

                                                    </Storyboard>

                                                </VisualState>

                                                <VisualState x:Name="Pressed">

                                                    <Storyboard>

                                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundPressed"/>

                                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ArrowPressed"/>

                                                    </Storyboard>

                                                </VisualState>

                                                <VisualState x:Name="Disabled"/>

                                            </VisualStateGroup>

                                        </VisualStateManager.VisualStateGroups>

                                        <Rectangle x:Name="BackgroundPointerOver" Fill="{StaticResource ScrollBarButtonPointerOverBackgroundThemeBrush}" Opacity="0" Stroke="{StaticResource ScrollBarButtonPointerOverBorderThemeBrush}" StrokeThickness="1"/>

                                        <Path x:Name="ArrowPointerOver" Data="M4.1183305,0 L9.6730003,5.4663525 L4.1183305,10.944 L0,10.881266 L5.5553346,5.4719901 L0,0.062734604 z" Fill="{StaticResource ScrollBarButtonForegroundThemeBrush}" HorizontalAlignment="Left" Height="10.944" Margin="7,0,0,0" Stretch="Fill" StrokeThickness="0" UseLayoutRounding="False" VerticalAlignment="Center" Width="9.673"/>

                                        <Rectangle x:Name="BackgroundPressed" Fill="{StaticResource ScrollBarButtonPressedBackgroundThemeBrush}" Opacity="0" Stroke="{StaticResource ScrollBarButtonPressedBorderThemeBrush}" StrokeThickness="1"/>

                                        <Path x:Name="ArrowPressed" Data="M4.1183305,0 L9.6730003,5.4663525 L4.1183305,10.944 L0,10.881266 L5.5553346,5.4719901 L0,0.062734604 z" Fill="{StaticResource ScrollBarButtonPressedForegroundThemeBrush}" HorizontalAlignment="Left" Height="10.944" Margin="7,0,0,0" Opacity="0" Stretch="Fill" StrokeThickness="0" UseLayoutRounding="False" VerticalAlignment="Center" Width="9.673"/>

                                    </Grid>

                                </ControlTemplate>

                                <ControlTemplate x:Key="HorizontalDecrementTemplate" TargetType="RepeatButton">

                                    <Grid x:Name="Root">

                                        <VisualStateManager.VisualStateGroups>

                                            <VisualStateGroup x:Name="CommonStates">

                                                <VisualState x:Name="Normal"/>

                                                <VisualState x:Name="PointerOver">

                                                    <Storyboard>

                                                        <DoubleAnimation Duration="0:0:0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundPointerOver"/>

                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ArrowPointerOver">

                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ScrollBarButtonPointerOverForegroundThemeBrush}"/>

                                                        </ObjectAnimationUsingKeyFrames>

                                                    </Storyboard>

                                                </VisualState>

                                                <VisualState x:Name="Pressed">

                                                    <Storyboard>

                                                        <DoubleAnimation Duration="0:0:0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundPressed"/>

                                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ArrowPressed"/>

                                                    </Storyboard>

                                                </VisualState>

                                                <VisualState x:Name="Disabled"/>

                                            </VisualStateGroup>

                                        </VisualStateManager.VisualStateGroups>

                                        <Rectangle x:Name="BackgroundPointerOver" Fill="{StaticResource ScrollBarButtonPointerOverBackgroundThemeBrush}" Opacity="0" Stroke="{StaticResource ScrollBarButtonPointerOverBorderThemeBrush}" StrokeThickness="1"/>

                                        <Path x:Name="ArrowPointerOver" Data="M5.5546699,0 L9.6730003,0.062734604 L4.1176658,5.4720101 L9.6730003,10.881266 L5.5546699,10.944 L0,5.4776478 z" Fill="{StaticResource ScrollBarButtonForegroundThemeBrush}" HorizontalAlignment="Right" Height="10.944" Margin="0,0,7,0" Stretch="Fill" StrokeThickness="0" UseLayoutRounding="False" VerticalAlignment="Center" Width="9.673"/>

                                        <Rectangle x:Name="BackgroundPressed" Fill="{StaticResource ScrollBarButtonPressedBackgroundThemeBrush}" Opacity="0" Stroke="{StaticResource ScrollBarButtonPressedBorderThemeBrush}" StrokeThickness="1"/>

                                        <Path x:Name="ArrowPressed" Data="M5.5546699,0 L9.6730003,0.062734604 L4.1176658,5.4720101 L9.6730003,10.881266 L5.5546699,10.944 L0,5.4776478 z" Fill="{StaticResource ScrollBarButtonPressedForegroundThemeBrush}" HorizontalAlignment="Right" Height="10.944" Margin="0,0,7,0" Opacity="0" Stretch="Fill" StrokeThickness="0" UseLayoutRounding="False" VerticalAlignment="Center" Width="9.673"/>

                                    </Grid>

                                </ControlTemplate>

                            </Grid.Resources>

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

 

Please let us know if you need further assistance.

Thank you,

Jai Ganesh S