Is there anyway to set scrollbar thickness in SfTreeGrid or sfDataGrid ? I can't find any property in syncfusion
Is there anyway to set scrollbar thickness in SfTreeGrid or sfDataGrid ? I can't find any property in syncfusion
SfTreeGrid doesn’t have any direct property to change the width of the vertical/horizontal scrollbar. However, you can change it by increasing the width of the ScrollViewer in the SfDataGrid template by creating Style with TargetType as SfTreeGrid. Please refer to the below code snippet,
<Style x:Key="SfTreeGridStyle_ScrollBarWidth" TargetType="syncfusionTreeGrid:SfTreeGrid">
………………
………………
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="syncfusionTreeGrid:SfTreeGrid">
<Grid>
………………………………..
………………………………..
<ScrollViewer x:Name="PART_ScrollViewer"
BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
IsDeferredScrollingEnabled="False"
IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}"
IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
ZoomMode="Disabled">
<!--increasing the width of the ScrollViewer by defining the ScrollBarSize-->
<ScrollViewer.Resources>
<x:Double x:Key="ScrollBarSize">50</x:Double>
</ScrollViewer.Resources>
……………….
………………..
</ScrollViewer>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Grid>
<syncfusionTreeGrid:SfTreeGrid x:Name="TreeGrid"
Grid.Column="1"
Style="{StaticResource SfTreeGridStyle_ScrollBarWidth}"
AutoGenerateColumns="True"
ItemsSource="{Binding OrderList}">
</syncfusionTreeGrid:SfTreeGrid>
</Grid>
SfDataGrid doesn’t have any direct property to change the width of the vertical/horizontal scrollbar. However, you can change it by increasing the width of the ScrollViewer in the SfDataGrid template by creating Style with TargetType as SfDataGrid. Please refer to the below code snippet,
<Style x:Key="SfDataGridStyle_ScrollBarWidth" TargetType="syncfusion:SfDataGrid">
………………
………………
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="syncfusion:SfDataGrid">
<Grid>
………………………………..
………………………………..
<ScrollViewer x:Name="PART_ScrollViewer"
BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
IsDeferredScrollingEnabled="False"
IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}"
IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
ZoomMode="Disabled">
<!--increasing the width of the ScrollViewer by defining the ScrollBarSize-->
<ScrollViewer.Resources>
<x:Double x:Key="ScrollBarSize">50</x:Double>
</ScrollViewer.Resources>
<syncfusion:VisualContainer x:Name="PART_VisualContainer"
Background="Transparent"
HortizontalScrollBarOffset="{Binding Path=HorizontalOffset,
ElementName=PART_ScrollViewer,
Mode=OneWay}"
ManipulationMode="{TemplateBinding ManipulationMode}"
VerticalScrollBarOffset="{Binding Path=VerticalOffset,
ElementName=PART_ScrollViewer,
Mode=OneWay}" >
<Line x:Name="PART_HorizontalLine"/>
<Line x:Name="PART_VerticalLine"/>
</syncfusion:VisualContainer>
</ScrollViewer>
………………
………………
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Grid>
<syncfusion:SfDataGrid x:Name="dataGrid"
Grid.Column="0"
Style="{StaticResource SfDataGridStyle_ScrollBarWidth}
AutoGenerateColumns="True"
ItemsSource="{Binding OrderList}">
</syncfusion:SfDataGrid>
</Grid>
Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample556135710