GridView scrollbar width

7 posts, 0 answers
  1. Jhansirani Sarvamohan
    Jhansirani Sarvamohan avatar
    4 posts
    Member since:
    Oct 2009

    Posted 30 Dec 2009 Link to this post

    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
  2. Kalin Milanov
    Admin
    Kalin Milanov avatar
    447 posts

    Posted 04 Jan 2010 Link to this post

    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.
  3. Jhansirani Sarvamohan
    Jhansirani Sarvamohan avatar
    4 posts
    Member since:
    Oct 2009

    Posted 04 Jan 2010 Link to this post

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

    Thanks
    Jhansi
  4. Simon Flachsbart
    Simon Flachsbart avatar
    6 posts
    Member since:
    Sep 2009

    Posted 20 May 2010 Link to this post

    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






  5. David Ocasio
    David Ocasio avatar
    155 posts
    Member since:
    Nov 2009

    Posted 21 Sep Link to this post

    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.

     

  6. Sia
    Admin
    Sia avatar
    685 posts

    Posted 22 Sep Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  7. David Ocasio
    David Ocasio avatar
    155 posts
    Member since:
    Nov 2009

    Posted 22 Sep in reply to Sia Link to this post

    Prefect. thanks Sia.
Back to Top