xamldatagridscrollbarwinui-3winui

How to set thickness of scrollbars in scrollviewer

How can I control the thickness of a horizontal or vertical Scrollbar that gets displayed in a / as part of a DataGrid control? I would like them to be displayed "thicker" than how that are displayed at the moment.

Remark: For the sake of showing an example application with dummy data in a DataGrid the screenshots below are based on the "Xaml brewer" sample application which you can find here.

I have a DataGrid that always shows vertical and horizontal scrollbars (I removed all non-essential XAML code):

<Page
    xmlns:controls="using:CommunityToolkit.WinUI.UI.Controls"
    mc:Ignorable="d">

    <Grid>

        <controls:DataGrid AutoGenerateColumns="False" 
                           VerticalScrollBarVisibility="Visible"
                           HorizontalScrollBarVisibility="Visible">

            <controls:DataGrid.Columns>
            </controls:DataGrid.Columns>

        </controls:DataGrid>

    </Grid>

</Page>

This is how the scrollbars are displayed normally, i.e. the DataGrid has focus, but the mouse is not currently hovering over one of the scrollbars. They are displayed very thin, so that the users of my application sometimes do not recognize them:

enter image description here

This is how a Scrollbar is displayed when the mouse is currently hovering over one of them (in this case the horizontal scrollbar at the bottom). Now this one is displayed a bit thicker and thus easier to see:

enter image description here

Is there are way to display the scrollbars thicker / set their thickness, or specify that they should always be displayed in the way they are displayed when hovering over them (see second screenshot above, they are displayed thicker in that case)?

Solution

  • Is there are way to display the scrollbars thicker / set their thickness

    You might be able to re-style the ScrollBar but an empty ScrollBar style should give you a WPF-like ScrollBar.

    <controls:DataGrid>
    <controls:DataGrid.Resources>
        <Style TargetType="ScrollBar" />
    </controls:DataGrid.Resources>
</controls:DataGrid>

    specify that they should always be displayed in the way they are displayed when hovering over them

    I have published a NuGet package called AK.Toolkit.WinUI3.ScrollBarExtensions for this. Try it out and see if it fits your requirements.

    <Page
    :
    xmlns:controls="using:CommunityToolkit.WinUI.UI.Controls"
    xmlns:toolkit="using:AK.Toolkit.WinUI3" />

    <controls:DataGrid
        toolkit:ScrollBarExtensions.KeepHorizontalExpanded="True"
        toolkit:ScrollBarExtensions.KeepVerticalExpanded="True"
        HorizontalScrollBarVisibility="Visible"
        VerticalScrollBarVisibility="Visible" />

</Page>