GridView scrollbar width

[Jhansirani Sarvamohan]

Hi,
I am loading my application on touch screen tablets and scrollbars need to be wider for easy scrolling.  How can I increase width of gridview scrollbars.

Thanks
Jhansi

[Kalin Milanov]

Hi Jhansirani Sarvamohan,

I have prepared a small sample which makes the scroll bars 50 pixels in height and width respectively. It was done entirely in Blend by editing the template of RadGridView. Please browse the sample and tweak it so as to fit your requirements.

Greetings,
Kalin Milanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Jhansirani Sarvamohan]

Hi Kalin,
Thanks for the solution.  It works great.

Thanks
Jhansi

[Simon Flachsbart]

Hi Jhansi,

I had the same requirement as you. I did it by changing default size of the scollbars.
Two simple tutorials:
Windows XP
Windows 7

Now you just have to remove the width and height properties and the ThemeManager in the examplecode of Kalin.
So now it looks like that:

<Style  x:Key="GridViewScrollViewerStyle" TargetType="{x:Type telerik:GridViewScrollViewer}">
 .
 .
 .
    <ScrollBar x:Name="PART_VerticalScrollBar" IsTabStop="False" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Grid.Column="1" Grid.Row="0" Grid.RowSpan="4" Orientation="Vertical" ViewportSize="{TemplateBinding ViewportHeight}" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Value="{TemplateBinding VerticalOffset}" >
        <ScrollBar.Background>
            <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                <GradientStop Color="#FF3D3D3D" Offset="0.75"/>
                <GradientStop Color="#FF545454" Offset="0.93"/>
                <GradientStop Color="#FF2E2E2E" Offset="0.07"/>
                <GradientStop Color="#FF3C3C3C" Offset="0.08"/>
                <GradientStop Color="#FF2E2E2E" Offset="0.94"/>
            </LinearGradientBrush>
        </ScrollBar.Background>
    </ScrollBar>
    <ScrollBar x:Name="PART_HorizontalScrollBar" IsTabStop="False" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Grid.Column="0" Grid.Row="4" Orientation="Horizontal" ViewportSize="{TemplateBinding ViewportWidth}" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Value="{TemplateBinding HorizontalOffset}">
        <ScrollBar.Background>
            <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                <GradientStop Color="#FF3D3D3D" Offset="0.75"/>
                <GradientStop Color="#FF545454" Offset="0.93"/>
                <GradientStop Color="#FF2E2E2E" Offset="0.07"/>
                <GradientStop Color="#FF3C3C3C" Offset="0.08"/>
                <GradientStop Color="#FF2E2E2E" Offset="0.94"/>
            </LinearGradientBrush>
        </ScrollBar.Background>
    </ScrollBar>
 .
 .
 .
</Style>

This works great. And another benefits you have: The scrollbars of windows like explorer etc. are larger too, and you do not have to care about, if the computer works with touchscreen or not...

Greetings
Simon

[David Ocasio]

Is there any newer ways to do this.

I only want to adjust the width and or height of the scrollbars to make it more touch acceptable.

Its a lot of template code to add just to do that.  

And I always worry that incorporating that template from blend makes it breakable if telerik adjusts there templates.

 

[Sia]

Hello,

Two years ago a colleague of mine did a major refactoring of the default ScrollBars' styles that we deliver. Having this in mind the following style should work on your end:

<Style TargetType="{x:Type ScrollBar}" BasedOn="{StaticResource ScrollBarStyle}">
    <Setter Property="MinWidth" Value="30" />
    <Setter Property="MinHeight" Value="30" />
</Style>

In case of using implicit themes and NoXAML binaries, you just need to merge it after the theme resources. If you set the theme through StyleManager and your references are XAML binaries, add the same style without having it based on:

<Style TargetType="{x:Type ScrollBar}">
    <Setter Property="MinWidth" Value="30" />
    <Setter Property="MinHeight" Value="30" />
</Style>

I hope this helps.

Regards,
Sia
Progress Telerik

[Manohar]

In 2017 we bought UI for WPF and used static resources BasedOn="{StaticResource ScrollBarStyle}", and in 2022 we bought DevCraft UI for .net core migration, I see Static resources are not working, your answer helped me to get it done. Thank you.

[David Ocasio]

Prefect. thanks Sia.