Horizontal scrollbar is too wide in Fluent theme

[Kirill]

Good day, I have a GridView with following style and Theme set to Fluent:

<Style x:Key="TelerikGridViewStyle" TargetType="telerik:RadGridView">
        <Setter Property="telerik:StyleManager.Theme" Value="{StaticResource TelerikTheme}"/>
        <Setter Property="RowIndicatorVisibility" Value="Collapsed"/>
        <Setter Property="AutoGenerateColumns" Value="False"/>
        <Setter Property="IsReadOnly" Value="True"/>
        <Setter Property="CanUserFreezeColumns" Value="False"/>
        <Setter Property="FrozenColumnsSplitterVisibility" Value="Collapsed"/>
        <Setter Property="EnableRowVirtualization" Value="True"/>
        <Setter Property="EnableColumnVirtualization" Value="True"/>
        <Setter Property="ScrollMode" Value="RealTime"/>
        <Setter Property="GroupRenderMode" Value="Flat"/>
        <Setter Property="ShowGroupPanel" Value="False"/>
        <Setter Property="SelectionUnit" Value="FullRow"/>
        <Setter Property="FontSize" Value="12"/>
        <Setter Property="RowHeight" Value="15"/>
</Style>

My grid has a lot of columns, so I enabled horizontal scrollbar to fit all the data. The problem is, my grid would frequently contain only one row, and with current style and Fluent theme it looks good in a normal view with a thin scrollbar (see picture 1), but as soon as my mouse hovers over the scrollbar to scroll to another set of columns, scrollbar expands and becomes so wide it covers that only row of data I have (see picture 2).

Is there any way to keep thin scrollbar style from picture 1 even when using it?

[Vicky]

Hi Kirill,

in order to achieve the desired look and feel, i.e. keep the thin scrollbar within the RadGridView, you need to override both horizontal and vertical scrollbar styles. More specifically, you must change their ControlTemplate-s a bit.

Like you probably know, there are two mechanisms that can be used to set a theme – using Implicit Styles or StyleManager. I suggest that you set the desired by you theme using Implicit Styles (NoXaml dlls). You can find more information here.

After you have successfully applied the theme and merged the required by RadGridView dictionaries, you must create new style, based on the GridViewScrollViewerStyle and override its Template property. The GridViewScrollViewerTemplate contains two ScrollBar elements, for which you need to create and set style. To do this, you need to simply create new Style, based on ScrollBarStyle and override its Template.

Please, check the attached sample that demonstrates the described above approach.

Regards,
Viktoria Grozdancheva
Progress Telerik

[Flemming]

Thanks for the workaround, but I would much rather have the scrollbar below the rows like normal. I didn't know about this post when I also contacted Telerik about this issue so I got a link to this post and to the following feature request: https://feedback.telerik.com/Project/143/Feedback/Details/251748-gridview-change-the-position-of-the-scrollviewers-in-fluenttheme

Please vote for it :)

[Flemming]

Sorry, I didn't need to make them smaller, they do that by default and then increase to normal size on mouse over, except when I also had settings from Mahapps metro ui in my app.xaml file. If I remove this line: <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" /> it works as expected.

Hope this helps someone :)

[Vicky]

Hi Flemming,

Thank you for sharing! Hope it helps someone. 

Regards,
Viktoria Grozdancheva
Progress Telerik