[WPF,XAML,ScrollBar,ScrollViewer,Style] 自定义滚动条

最新推荐文章于 2025-07-03 14:13:38 发布
转载 最新推荐文章于 2025-07-03 14:13:38 发布 · 2.2k 阅读 · 0

本文介绍如何自定义WPF中的ScrollViewer滚动条样式，包括设置透明度、背景颜色等，并通过XAML代码实现垂直和水平滚动条的定制。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

自定义 ScrollViewer 的滚动条样式，如下图所示：

ScrollBar 在滚动时会自动显示并隐藏，而且 ScrollBar 存在于 Viewport 的区域中。

ScrollViewer.xaml

[html]  view plain copy
  1. <ResourceDictionary  
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">  
  4.   
  5.     <Style x:Key="ScrollBarThumb"  
  6.            TargetType="{x:Type Thumb}">  
  7.         <Setter Property="OverridesDefaultStyle"  
  8.                 Value="true"/>  
  9.         <Setter Property="IsTabStop"  
  10.                 Value="false"/>  
  11.         <Setter Property="Template">  
  12.             <Setter.Value>  
  13.                 <ControlTemplate TargetType="{x:Type Thumb}">  
  14.                     <Grid>  
  15.                         <Rectangle  
  16.                             Fill="#90000000"  
  17.                             RadiusX="3"  
  18.                             RadiusY="3"/>  
  19.                     </Grid>  
  20.                 </ControlTemplate>  
  21.             </Setter.Value>  
  22.         </Setter>  
  23.     </Style>  
  24.     <Style x:Key="HorizontalScrollBarPageButton"  
  25.            TargetType="{x:Type RepeatButton}">  
  26.         <Setter Property="OverridesDefaultStyle"  
  27.                 Value="true"/>  
  28.         <Setter Property="Background"  
  29.                 Value="Transparent"/>  
  30.         <Setter Property="Focusable"  
  31.                 Value="false"/>  
  32.         <Setter Property="IsTabStop"  
  33.                 Value="false"/>  
  34.         <Setter Property="Opacity"  
  35.                 Value="0"/>  
  36.         <Setter Property="Template">  
  37.             <Setter.Value>  
  38.                 <ControlTemplate TargetType="{x:Type RepeatButton}">  
  39.                     <Rectangle Fill="{TemplateBinding Background}"  
  40.                                Width="{TemplateBinding Width}"  
  41.                                Height="{TemplateBinding Height}"/>  
  42.                 </ControlTemplate>  
  43.             </Setter.Value>  
  44.         </Setter>  
  45.     </Style>  
  46.     <Style x:Key="VerticalScrollBarPageButton"  
  47.            TargetType="{x:Type RepeatButton}">  
  48.         <Setter Property="OverridesDefaultStyle"  
  49.                 Value="true"/>  
  50.         <Setter Property="Background"  
  51.                 Value="Transparent"/>  
  52.         <Setter Property="Focusable"  
  53.                 Value="false"/>  
  54.         <Setter Property="IsTabStop"  
  55.                 Value="false"/>  
  56.         <Setter Property="Opacity"  
  57.                 Value="0"/>  
  58.         <Setter Property="Template">  
  59.             <Setter.Value>  
  60.                 <ControlTemplate TargetType="{x:Type RepeatButton}">  
  61.                     <Rectangle Fill="{TemplateBinding Background}"  
  62.                                Width="{TemplateBinding Width}"  
  63.                                Height="{TemplateBinding Height}"/>  
  64.                 </ControlTemplate>  
  65.             </Setter.Value>  
  66.         </Setter>  
  67.     </Style>  
  68.     <Style x:Key="for_scrollbar"  
  69.            TargetType="{x:Type ScrollBar}">  
  70.         <Setter Property="Stylus.IsPressAndHoldEnabled"  
  71.                 Value="false"/>  
  72.         <Setter Property="Stylus.IsFlicksEnabled"  
  73.                 Value="false"/>  
  74.         <Setter Property="Background"  
  75.                 Value="Transparent"/>  
  76.         <Setter Property="Margin"  
  77.                 Value="0,1,1,6"/>  
  78.         <Setter Property="Width"  
  79.                 Value="5"/>  
  80.         <Setter Property="MinWidth"  
  81.                 Value="5"/>  
  82.         <Setter Property="Opacity"  
  83.                 Value="0"/>  
  84.         <Setter Property="Template">  
  85.             <Setter.Value>  
  86.                 <ControlTemplate TargetType="{x:Type ScrollBar}">  
  87.                     <Grid x:Name="Bg" SnapsToDevicePixels="true">  
  88.                         <Track x:Name="PART_Track"  
  89.                                IsEnabled="{TemplateBinding IsMouseOver}"  
  90.                                IsDirectionReversed="true">  
  91.                             <Track.DecreaseRepeatButton>  
  92.                                 <RepeatButton  
  93.                                     Style="{StaticResource VerticalScrollBarPageButton}"  
  94.                                     Command="{x:Static ScrollBar.PageUpCommand}"/>  
  95.                             </Track.DecreaseRepeatButton>  
  96.                             <Track.IncreaseRepeatButton>  
  97.                                 <RepeatButton  
  98.                                     Style="{StaticResource VerticalScrollBarPageButton}"  
  99.                                     Command="{x:Static ScrollBar.PageDownCommand}"/>  
  100.                             </Track.IncreaseRepeatButton>  
  101.                             <Track.Thumb>  
  102.                                 <Thumb Style="{StaticResource ScrollBarThumb}"/>  
  103.                             </Track.Thumb>  
  104.                         </Track>  
  105.                     </Grid>  
  106.                 </ControlTemplate>  
  107.             </Setter.Value>  
  108.         </Setter>  
  109.         <Style.Triggers>  
  110.             <Trigger Property="Orientation"  
  111.                      Value="Horizontal">  
  112.                 <Setter Property="Background"  
  113.                         Value="Transparent"/>  
  114.                 <Setter Property="Margin"  
  115.                         Value="1,0,6,1"/>  
  116.                 <Setter Property="Height"  
  117.                         Value="5"/>  
  118.                 <Setter Property="MinHeight"  
  119.                         Value="5"/>  
  120.                 <Setter Property="Width"  
  121.                         Value="Auto"/>  
  122.                 <Setter Property="Opacity"  
  123.                         Value="0"/>  
  124.                 <Setter Property="Template">  
  125.                     <Setter.Value>  
  126.                         <ControlTemplate TargetType="{x:Type ScrollBar}">  
  127.                             <Grid x:Name="Bg" SnapsToDevicePixels="true">  
  128.                                 <Track x:Name="PART_Track"  
  129.                                        IsEnabled="{TemplateBinding IsMouseOver}">  
  130.                                     <Track.DecreaseRepeatButton>  
  131.                                         <RepeatButton Style="{StaticResource HorizontalScrollBarPageButton}"  
  132.                                                       Command="{x:Static ScrollBar.PageLeftCommand}"/>  
  133.                                     </Track.DecreaseRepeatButton>  
  134.                                     <Track.IncreaseRepeatButton>  
  135.                                         <RepeatButton Style="{StaticResource HorizontalScrollBarPageButton}"  
  136.                                                       Command="{x:Static ScrollBar.PageRightCommand}"/>  
  137.                                     </Track.IncreaseRepeatButton>  
  138.                                     <Track.Thumb>  
  139.                                         <Thumb Style="{StaticResource ScrollBarThumb}"/>  
  140.                                     </Track.Thumb>  
  141.                                 </Track>  
  142.                             </Grid>  
  143.                         </ControlTemplate>  
  144.                     </Setter.Value>  
  145.                 </Setter>  
  146.             </Trigger>  
  147.         </Style.Triggers>  
  148.     </Style>  
  149.   
  150.     <!-- ScrollViewer -->  
  151.     <Style x:Key="for_scrollviewer"  
  152.            TargetType="{x:Type ScrollViewer}">  
  153.         <Setter Property="BorderBrush"  
  154.                 Value="LightGray"/>  
  155.         <Setter Property="BorderThickness"  
  156.                 Value="0"/>  
  157.         <Setter Property="HorizontalContentAlignment"  
  158.                 Value="Left"/>  
  159.         <Setter Property="HorizontalScrollBarVisibility"  
  160.                 Value="Auto"/>  
  161.         <Setter Property="VerticalContentAlignment"  
  162.                 Value="Top"/>  
  163.         <Setter Property="VerticalScrollBarVisibility"  
  164.                 Value="Auto"/>  
  165.         <Setter Property="Template">  
  166.             <Setter.Value>  
  167.                 <ControlTemplate TargetType="{x:Type ScrollViewer}">  
  168.                     <Border BorderBrush="{TemplateBinding BorderBrush}"  
  169.                             BorderThickness="{TemplateBinding BorderThickness}"  
  170.                             SnapsToDevicePixels="True">  
  171.                         <Grid Background="{TemplateBinding Background}">  
  172.                             <ScrollContentPresenter  
  173.                                 Cursor="{TemplateBinding Cursor}"  
  174.                                 Margin="{TemplateBinding Padding}"  
  175.                                 ContentTemplate="{TemplateBinding ContentTemplate}"/>  
  176.                             <ScrollBar x:Name="PART_VerticalScrollBar"  
  177.                                        HorizontalAlignment="Right"  
  178.                                        Maximum="{TemplateBinding ScrollableHeight}"  
  179.                                        Orientation="Vertical"  
  180.                                        Style="{StaticResource for_scrollbar}"  
  181.                                        ViewportSize="{TemplateBinding ViewportHeight}"  
  182.                                        Value="{TemplateBinding VerticalOffset}"  
  183.                                        Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>  
  184.                             <ScrollBar x:Name="PART_HorizontalScrollBar"  
  185.                                        Maximum="{TemplateBinding ScrollableWidth}"  
  186.                                        Orientation="Horizontal"  
  187.                                        Style="{StaticResource for_scrollbar}"  
  188.                                        VerticalAlignment="Bottom"  
  189.                                        Value="{TemplateBinding HorizontalOffset}"  
  190.                                        ViewportSize="{TemplateBinding ViewportWidth}"  
  191.                                        Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>  
  192.                         </Grid>  
  193.                     </Border>  
  194.                     <ControlTemplate.Triggers>  
  195.                         <EventTrigger RoutedEvent="ScrollChanged">  
  196.                             <BeginStoryboard>  
  197.                                 <Storyboard>  
  198.                                     <DoubleAnimation  
  199.                                         Storyboard.TargetName="PART_VerticalScrollBar"  
  200.                                         Storyboard.TargetProperty="Opacity"  
  201.                                         To="1"  
  202.                                         Duration="0:0:1"/>  
  203.                                     <DoubleAnimation  
  204.                                         Storyboard.TargetName="PART_VerticalScrollBar"  
  205.                                         Storyboard.TargetProperty="Opacity"  
  206.                                         To="0"  
  207.                                         Duration="0:0:1"  
  208.                                         BeginTime="0:0:1"/>  
  209.                                     <DoubleAnimation  
  210.                                         Storyboard.TargetName="PART_HorizontalScrollBar"  
  211.                                         Storyboard.TargetProperty="Opacity"  
  212.                                         To="1"  
  213.                                         Duration="0:0:1"/>  
  214.                                     <DoubleAnimation  
  215.                                         Storyboard.TargetName="PART_HorizontalScrollBar"  
  216.                                         Storyboard.TargetProperty="Opacity"  
  217.                                         To="0"  
  218.                                         Duration="0:0:1"  
  219.                                         BeginTime="0:0:1"/>  
  220.                                 </Storyboard>  
  221.                             </BeginStoryboard>  
  222.                         </EventTrigger>  
  223.                         <EventTrigger RoutedEvent="MouseEnter"  
  224.                                       SourceName="PART_VerticalScrollBar">  
  225.                             <BeginStoryboard>  
  226.                                 <Storyboard>  
  227.                                     <DoubleAnimation  
  228.                                         Storyboard.TargetName="PART_VerticalScrollBar"  
  229.                                         Storyboard.TargetProperty="Opacity"  
  230.                                         To="1"  
  231.                                         Duration="0:0:1"/>  
  232.                                 </Storyboard>  
  233.                             </BeginStoryboard>  
  234.                         </EventTrigger>  
  235.                         <EventTrigger RoutedEvent="MouseLeave"  
  236.                                       SourceName="PART_VerticalScrollBar">  
  237.                             <BeginStoryboard>  
  238.                                 <Storyboard>  
  239.                                     <DoubleAnimation  
  240.                                         Storyboard.TargetName="PART_VerticalScrollBar"  
  241.                                         Storyboard.TargetProperty="Opacity"  
  242.                                         To="0"  
  243.                                         Duration="0:0:1"/>  
  244.                                 </Storyboard>  
  245.                             </BeginStoryboard>  
  246.                         </EventTrigger>  
  247.                         <EventTrigger RoutedEvent="MouseEnter"  
  248.                                       SourceName="PART_HorizontalScrollBar">  
  249.                             <BeginStoryboard>  
  250.                                 <Storyboard>  
  251.                                     <DoubleAnimation  
  252.                                         Storyboard.TargetName="PART_HorizontalScrollBar"  
  253.                                         Storyboard.TargetProperty="Opacity"  
  254.                                         To="1"  
  255.                                         Duration="0:0:1"/>  
  256.                                 </Storyboard>  
  257.                             </BeginStoryboard>  
  258.                         </EventTrigger>  
  259.                         <EventTrigger RoutedEvent="MouseLeave"  
  260.                                       SourceName="PART_HorizontalScrollBar">  
  261.                             <BeginStoryboard>  
  262.                                 <Storyboard>  
  263.                                     <DoubleAnimation  
  264.                                         Storyboard.TargetName="PART_HorizontalScrollBar"  
  265.                                         Storyboard.TargetProperty="Opacity"  
  266.                                         To="0"  
  267.                                         Duration="0:0:1"/>  
  268.                                 </Storyboard>  
  269.                             </BeginStoryboard>  
  270.                         </EventTrigger>  
  271.                     </ControlTemplate.Triggers>  
  272.                 </ControlTemplate>  
  273.             </Setter.Value>  
  274.         </Setter>  
  275.     </Style>  
  276.   
  277. </ResourceDictionary>  

MainWindow.xaml

[html]  view plain copy
  1. <Window x:Class="WpfApplication1.MainWindow"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         Title="MainWindow" Height="300" Width="300">  
  5.     <Window.Resources>  
  6.         <ResourceDictionary>  
  7.             <ResourceDictionary.MergedDictionaries>  
  8.                 <ResourceDictionary Source="resources/scrollviewer.xaml"/>  
  9.             </ResourceDictionary.MergedDictionaries>  
  10.         </ResourceDictionary>  
  11.     </Window.Resources>  
  12.       
  13.     <Grid>  
  14.         <ContentControl Margin="10">  
  15.             <ContentControl.Template>  
  16.                 <ControlTemplate TargetType="{x:Type ContentControl}">  
  17.                     <ScrollViewer Style="{StaticResource for_scrollviewer}">  
  18.                         <ContentPresenter/>  
  19.                     </ScrollViewer>  
  20.                 </ControlTemplate>  
  21.             </ContentControl.Template>  
  22.             <Canvas Height="1600" Width="1600" Background="AliceBlue">  
  23.                   
  24.             </Canvas>  
  25.         </ContentControl>  
  26.     </Grid>  
  27. </Window>  

这个滚动样式同样可以应用到其他控件，例如： ItemsControl，有兴趣的朋友可以试试！
WPF 自定义滚动条（ScrollView、ScrollBar）样式
weixin_34326179的博客
04-07 1266
一、滚动条基本样式 本次修改Scrollview及ScrollBar滚动条样式是通过纯样式实现的。修改的内容包含滚动条的颜色，上下按钮的隐藏。另外添加了鼠标经过滚动条动画。 style样式如下： <!-- ScrollViewer 滚动条 --> <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}"...
wpf ScrollBar自定义样式
qq_69686662的博客
01-23 1562
WPF ScrollBar滚动条样式是通过纯样式实现的。修改的内容包含滚动条的颜色，上下按钮的隐藏。另外添加了鼠标经过滚动条动画。PS:改代码影响全局。
WPF ScrollViewer(滚动条) 自定义样式表制作 图文并茂
weixin_30527551的博客
04-01 639
先上效果图 正常样式 拖动时样式 好下面 开始吧 ================================================================= 打开blend 新建个 WPF应用程序工程 点击左上角 文件 → 新建项目 项目类型WPF→右侧选WPF应用程序→项目名称你随便起一个用输入的ScrollViewerStyle→...
WPF 使用CompositionTarget.Rendering实现平滑流畅滚动的ScrollViewer，支持滚轮、触控板、触摸屏和笔
最新发布
weixin_36032446的博客
07-03 30
为了解决以上问题，本文提出一种新的方案来实现平滑滚动ScrollViewer。该方案在和中直接处理(禁用)了系统的滚动效果，使用事件来驱动滚动动画。并针对滚轮方式和触控“跟手”分别进行优化，使用缓动滚动模型和精确滚动模型来实现平滑滚动。笔的支持得益于库提供的模拟，将笔输入映射为触摸输入。为了最直观和最简单地解决问题，我们将应用场景设置为垂直滚动，水平滚动可以通过类似的方式实现。
WPF ScrollViewer 自定义样式
jtl2004的专栏
12-27 3360
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     xmlns:sys="clr-namespace:System;assembly=mscorlib"     Height="300"
C# wpf ScrollBar自定义样式详解
codeofcc的博客
10-16 9360
滚动条是一个常见控件，很多控件中都包含滚动条，比如ListBox、ComboBox、GridView等。wpf默认的滚动条的样式并不是特别好看，而且经常与UI设计的滚动条不一致，这个时候我们就需要自定义滚动条了。值得一提的是这，wpf的滚动条定制性和拓展性都非常好，这就为我们自定义滚动条提供了非常有利的条件。......
WPF篇（13）-ScrollViewer控件+ScrollBar滚动条+Slider滑动条
一个人的江湖
08-09 3285
如果某个控件的尺寸太大，当前界面无法全部显示，则可以将这个控件包含在ScrollViewer中，因为ScrollViewer控件封装了一个水平滚动条ScrollBar和一个垂直滚动条ScrollBar，所以，ScrollViewer就是一个包含其它可视元素的可滚动区域控件。ScrollViewer继承于ContentControl，所以它也是一个内容控件，只能在Content属性中设置一个子元素，如果要在ScrollViewer中显示多个子元素，请设置一个集合控件。 ScrollViewer 控件既响应鼠标
WPF ScrollViewer(滚动条) 仿苹果样式
08-07
通过自定义ScrollViewer的样式，我们可以让WPF应用程序的滚动条与macOS系统中的样式保持一致。 首先，我们需要了解WPF中自定义控件样式的机制。在WPF中，我们可以使用Styles和ControlTemplates来改变控件的外观和...
XAML设置WPF控件ScrollViewer卷滚条颜色与尺寸
zrfzrf的博客
02-08 880
初用C#与WPF，我对XAML的感觉是灵活但复杂。我只想改变ScrollViewer卷滚条的颜色，但模板案例看得我眼花缭乱。啃了一天，去其繁盛，留其必备，终于调出一个方便修改卷滚条各部分，包括ScrollViewer右下角颜色，的资源。使用时，直接修改前面提取出的参数即可。
WPF的scrollview滚动条设置及上一页下一页设置
10-29
总的来说，理解并掌握WPF中的ScrollViewer控件以及其滚动条的设置是创建可扩展且用户友好的界面的关键。通过自定义滚动条样式和监听滚动事件，你可以创建出满足各种需求的交互式应用。而上一页、下一页的实现则需要...
wpf datagrid滑动条
11-05
可以创建一个资源字典，定义新的`ScrollViewer.Style`和`ScrollBar.Style`，然后将其添加到你的`DataGrid`或者整个应用程序中。 5. **数据绑定** - `DataGrid`通常与数据源进行绑定，使用`ItemsSource`属性指定...
WPF ScrollViewer 样式
11-25 5138
[code=csharp]
C# wpf ScrollBar自定义仿移动端样式滚动条
codeofcc的博客
10-17 2945
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、步骤1.确定参数2.定义style3.定义template二、完整代码二、效果预览1.默认参数2.设置宽度3.设置颜色总结 前言 本篇是《C# wpf ScrollBar自定义详解》的示例。按照文中的方法实现一个移动端的常规滚动条。移动的常规滚动条有3个特点：细长、灰色、圆角，这些在wpf中都很好实现。 一、步骤 1.确定参数 对于一个仿移动端滚动条，可以定义的参数参数是： （1）滚动条宽度 （2）滚动条背景色 （3）滑
WPF ScrollViewer(滚动条) 自定义样式表制作 再发一套样式 细节优化
weixin_34032779的博客
05-26 224
原文:WPF ScrollViewer(滚动条) 自定义样式表制作 再发一套样式 细节优化   艾尼路 出的效果图 本人嵌套  WPF ScrollViewer(滚动条) 自定义样式表制作 图文并茂 WPF ScrollViewer(滚动条) 自定义样式表制作 (改良+美化)  源代码      ...
继续聊WPF——自定义滚动条
kanwoerzi
11-21 204
关键点：Track控件没有默认模板，它包括三个部分 DecreaseRepeatButton——这是一个RepeatButton即滑块左（上）的部分； IncreaseRepeatButton——同上，即滑块右（下）部分； Thumb——很明显了，这是拖动的滑块，请参考前面的文章。 &lt;Window x:Class="WpfApplication1.Window1" ...
uni设置scroll-view滚动条样式
zcy1005的博客
10-12 1379
uni设置scroll-view滚动条样式
自定义ScrollViewer样式
ajian11的专栏
06-30 430
&lt;Grid.Resources&gt;                &lt;SolidColorBrush x:Key="NormalColor"&gt;#898E9A&lt;/SolidColorBrush&gt;                 &lt;SolidColorBrush x:Key="HighlightColor"&gt;#6C7079&lt;/SolidColorBr
WPF 修改控件默认的ScrollView样式
韬光养晦
09-07 1254
WPF 修改控件默认的ScrollView样式 WPF中控件自带的ScrollView样式不太好看，可以用下面方式进行修改，本例以ListBox和TreeView控件为例，因为新的ScrollView需要鼠标停留在上面才会显示，可以看下图右边的TreeView中的ScrollView样式： 首先看一下程序结构： 新建一个ScrollView文件夹，在里面添加一个自定义控件ZScrollView， ZScrollView代码如下： namespace WpfApp11.ScrollView { p
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值