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
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
