如何设置滚动视图中滚动条的厚度

huangapple go评论128阅读模式
英文:

How to set thickness of scrollbars in scrollviewer

问题

如何控制DataGrid控件中作为水平或垂直滚动条一部分显示的滚动条的厚度?我希望它们显示得比目前更"粗"。

备注:为了展示一个带有虚拟数据的DataGrid示例应用,以下截图基于"Xaml brewer"示例应用,您可以在这里找到它。

我有一个DataGrid,它始终显示垂直和水平滚动条(我删除了所有非必要的XAML代码):

<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>

这是滚动条通常显示的方式,即DataGrid获得焦点,但鼠标当前没有悬停在其中一个滚动条上。它们显示得很细,以至于我的应用程序用户有时无法注意到它们:

如何设置滚动视图中滚动条的厚度

当鼠标当前悬停在其中一个滚动条上时(在这种情况下是底部的水平滚动条),滚动条的显示方式如下。现在这个滚动条显示得更粗,因此更容易看到:

如何设置滚动视图中滚动条的厚度

是否有办法使滚动条显示得更粗/设置它们的厚度,或者指定它们应始终以在悬停在它们上方时的方式显示(请参见上面的第二个截图,它们在那种情况下显示得更厚)?

英文:

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):

&lt;Page
    xmlns:controls=&quot;using:CommunityToolkit.WinUI.UI.Controls&quot;
    mc:Ignorable=&quot;d&quot;&gt;

    &lt;Grid&gt;

        &lt;controls:DataGrid AutoGenerateColumns=&quot;False&quot; 
                           VerticalScrollBarVisibility=&quot;Visible&quot;
						   HorizontalScrollBarVisibility=&quot;Visible&quot;&gt;

            &lt;controls:DataGrid.Columns&gt;
            &lt;/controls:DataGrid.Columns&gt;

        &lt;/controls:DataGrid&gt;

    &lt;/Grid&gt;

&lt;/Page&gt;

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:

如何设置滚动视图中滚动条的厚度

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:

如何设置滚动视图中滚动条的厚度

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)?

答案1

得分: 2

> Is there are way to display the scrollbars thicker / set their thickness
有没有办法使滚动条更粗/设置它们的厚度

> specify that they should always be displayed in the way they are displayed when hovering over them
指定它们应该始终以悬停在其上时显示的方式显示

英文:

> 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.

&lt;controls:DataGrid&gt;
    &lt;controls:DataGrid.Resources&gt;
        &lt;Style TargetType=&quot;ScrollBar&quot; /&gt;
    &lt;/controls:DataGrid.Resources&gt;
&lt;/controls:DataGrid&gt;

> 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.

&lt;Page
    :
    xmlns:controls=&quot;using:CommunityToolkit.WinUI.UI.Controls&quot;
    xmlns:toolkit=&quot;using:AK.Toolkit.WinUI3&quot; /&gt;

    &lt;controls:DataGrid
        toolkit:ScrollBarExtensions.KeepHorizontalExpanded=&quot;True&quot;
        toolkit:ScrollBarExtensions.KeepVerticalExpanded=&quot;True&quot;
        HorizontalScrollBarVisibility=&quot;Visible&quot;
        VerticalScrollBarVisibility=&quot;Visible&quot; /&gt;

&lt;/Page&gt;

huangapple
  • 本文由 发表于 2023年4月11日 16:23:06
  • 转载请务必保留本文链接:https://go.coder-hub.com/75983819.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定