触摸屏上客户要求滚动条宽度大些，方便手指上下滚动，之前在网上看了个，原文找不到了，代码记录下。

效果如下：

  1. <ControlTemplate x:Key="ScrollViewerControlTemplate1" TargetType="{x:Type ScrollViewer}">
  2.             <Grid x:Name="Grid" Background="{TemplateBinding Background}">
  3.                 <Grid.ColumnDefinitions>
  4.                     <ColumnDefinition Width="*"/>
  5.                     <ColumnDefinition Width="Auto"/>
  6.                 </Grid.ColumnDefinitions>
  7.                 <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Margin="{TemplateBinding Padding}" />
  8.                 <ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0"  Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}" Style="{DynamicResource ScrollBarStyle1}"/>
  9.             </Grid>
  10.         </ControlTemplate>
  11.         <LinearGradientBrush x:Key="VerticalScrollBarBackground" EndPoint="1,0" StartPoint="0,0">
  12.             <GradientStop Color="#E1E1E1" Offset="0"/>
  13.             <GradientStop Color="#EDEDED" Offset="0.20"/>
  14.             <GradientStop Color="#EDEDED" Offset="0.80"/>
  15.             <GradientStop Color="#E3E3E3" Offset="1"/>
  16.         </LinearGradientBrush>
  17.         <SolidColorBrush x:Key="ScrollBarDisabledBackground" Color="#F4F4F4"/>
  18.         <Style x:Key="ScrollBarButton" TargetType="{x:Type RepeatButton}">
  19.             <Setter Property="OverridesDefaultStyle" Value="true"/>
  20.             <Setter Property="Focusable" Value="false"/>
  21.             <Setter Property="IsTabStop" Value="false"/>
  22.             <Setter Property="Template">
  23.                 <Setter.Value>
  24.                     <ControlTemplate TargetType="{x:Type RepeatButton}">
  25.                         <Microsoft_Windows_Themes:ScrollChrome x:Name="Chrome" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" SnapsToDevicePixels="true" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="{TemplateBinding Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph}"/>
  26.                     </ControlTemplate>
  27.                 </Setter.Value>
  28.             </Setter>
  29.         </Style>
  30.         <Style x:Key="VerticalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
  31.             <Setter Property="OverridesDefaultStyle" Value="true"/>
  32.             <Setter Property="Background" Value="Transparent"/>
  33.             <Setter Property="Focusable" Value="false"/>
  34.             <Setter Property="IsTabStop" Value="false"/>
  35.             <Setter Property="Template">
  36.                 <Setter.Value>
  37.                     <ControlTemplate TargetType="{x:Type RepeatButton}">
  38.                         <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
  39.                     </ControlTemplate>
  40.                 </Setter.Value>
  41.             </Setter>
  42.         </Style>
  43.         <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
  44.             <Setter Property="OverridesDefaultStyle" Value="true"/>
  45.             <Setter Property="IsTabStop" Value="false"/>
  46.             <Setter Property="Template">
  47.                 <Setter.Value>
  48.                     <ControlTemplate TargetType="{x:Type Thumb}">
  49.                         <Border x:Name="border" CornerRadius="3" Background="#A5A5A5" BorderBrush="#666666" BorderThickness="1" >
  50.                             <Image x:Name="image" Source="/Images/bar_center.png" VerticalAlignment="Center"></Image>
  51.                         </Border>
  52.                         <ControlTemplate.Triggers>
  53.                             <Trigger Property="IsDragging" Value="True">
  54.                                 <Setter Property="Background" TargetName="border" Value="#7F7F7F"/>
  55.                             </Trigger>
  56.                         </ControlTemplate.Triggers>
  57.                     </ControlTemplate>
  58.                 </Setter.Value>
  59.             </Setter>
  60.         </Style>
  61.         <LinearGradientBrush x:Key="HorizontalScrollBarBackground" EndPoint="0,1" StartPoint="0,0">
  62.             <GradientStop Color="#E1E1E1" Offset="0"/>
  63.             <GradientStop Color="#EDEDED" Offset="0.20"/>
  64.             <GradientStop Color="#EDEDED" Offset="0.80"/>
  65.             <GradientStop Color="#E3E3E3" Offset="1"/>
  66.         </LinearGradientBrush>
  67.         <Style x:Key="HorizontalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
  68.             <Setter Property="OverridesDefaultStyle" Value="true"/>
  69.             <Setter Property="Background" Value="Transparent"/>
  70.             <Setter Property="Focusable" Value="false"/>
  71.             <Setter Property="IsTabStop" Value="false"/>
  72.             <Setter Property="Template">
  73.                 <Setter.Value>
  74.                     <ControlTemplate TargetType="{x:Type RepeatButton}">
  75.                         <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
  76.                     </ControlTemplate>
  77.                 </Setter.Value>
  78.             </Setter>
  79.         </Style>
  80.         <Style x:Key="ScrollBarStyle1" TargetType="{x:Type ScrollBar}">
  81.             <Setter Property="Background" Value="{StaticResource VerticalScrollBarBackground}"/>
  82.             <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
  83.             <Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
  84.             <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
  85.             <Setter Property="Width" Value="40"/>
  86.             <Setter Property="MinWidth" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>
  87.             <Setter Property="Template">
  88.                 <Setter.Value>
  89.                     <ControlTemplate TargetType="{x:Type ScrollBar}">
  90.                         <Grid x:Name="Bg" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
  91.                             <Grid.RowDefinitions>
  92.                                 <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
  93.                                 <RowDefinition Height="0.00001*"/>
  94.                                 <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
  95.                             </Grid.RowDefinitions>
  96.                             <RepeatButton x:Name="UpButton" Command="{x:Static ScrollBar.LineUpCommand}" IsEnabled="{TemplateBinding IsMouseOver}"   >
  97.                                 <RepeatButton.Content>
  98.                                     <Image x:Name="imgUp" Source="/BarUp.png" Stretch="Fill"></Image>
  99.                                 </RepeatButton.Content>
  100.                             </RepeatButton>
  101.                             <Track x:Name="PART_Track" IsDirectionReversed="true" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="1">
  102.                                 <Track.DecreaseRepeatButton>
  103.                                     <RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/>
  104.                                 </Track.DecreaseRepeatButton>
  105.                                 <Track.IncreaseRepeatButton>
  106.                                     <RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/>
  107.                                 </Track.IncreaseRepeatButton>
  108.                                 <Track.Thumb>
  109.                                     <Thumb Style="{StaticResource ScrollBarThumb}"/>
  110.                                 </Track.Thumb>
  111.                             </Track>
  112.                             <RepeatButton Command="{x:Static ScrollBar.LineDownCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="2" >
  113.                                 <RepeatButton.Content>
  114.                                     <Image x:Name="imgDown" Source="/Images/BarDown.png"  Stretch="Fill"></Image>
  115.                                 </RepeatButton.Content>
  116.                             </RepeatButton>
  117.                         </Grid>
  118.                         <ControlTemplate.Triggers>
  119.                             <Trigger Property="IsEnabled" SourceName="UpButton" Value="True">
  120.                                 <Setter Property="Source" TargetName="imgUp" Value="/Images/BarUp_S.png"/>
  121.                                 <Setter Property="Source" TargetName="imgDown" Value="/Images/BarDown_S.png"/>
  122.                             </Trigger>
  123.                             <Trigger Property="IsEnabled" Value="false">
  124.                                 <Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/>
  125.                             </Trigger>
  126.                         </ControlTemplate.Triggers>
  127.                     </ControlTemplate>
  128.                 </Setter.Value>
  129.             </Setter>
  130.             <Style.Triggers>
  131.                 <Trigger Property="Orientation" Value="Horizontal">
  132.                     <Setter Property="Width" Value="Auto"/>
  133.                     <Setter Property="MinWidth" Value="0"/>
  134.                     <Setter Property="Height" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/>
  135.                     <Setter Property="MinHeight" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/>
  136.                     <Setter Property="Background" Value="{StaticResource HorizontalScrollBarBackground}"/>
  137.                     <Setter Property="Template">
  138.                         <Setter.Value>
  139.                             <ControlTemplate TargetType="{x:Type ScrollBar}">
  140.                                 <Grid x:Name="Bg" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
  141.                                     <Grid.ColumnDefinitions>
  142.                                         <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
  143.                                         <ColumnDefinition Width="0.00001*"/>
  144.                                         <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
  145.                                     </Grid.ColumnDefinitions>
  146.                                     <RepeatButton Command="{x:Static ScrollBar.LineLeftCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Style="{StaticResource ScrollBarButton}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="LeftArrow"/>
  147.                                     <Track x:Name="PART_Track" Grid.Column="1" IsEnabled="{TemplateBinding IsMouseOver}">
  148.                                         <Track.DecreaseRepeatButton>
  149.                                             <RepeatButton Command="{x:Static ScrollBar.PageLeftCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/>
  150.                                         </Track.DecreaseRepeatButton>
  151.                                         <Track.IncreaseRepeatButton>
  152.                                             <RepeatButton Command="{x:Static ScrollBar.PageRightCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/>
  153.                                         </Track.IncreaseRepeatButton>
  154.                                         <Track.Thumb>
  155.                                             <Thumb Style="{StaticResource ScrollBarThumb}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="HorizontalGripper"/>
  156.                                         </Track.Thumb>
  157.                                     </Track>
  158.                                     <RepeatButton Grid.Column="2" Command="{x:Static ScrollBar.LineRightCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Style="{StaticResource ScrollBarButton}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="RightArrow"/>
  159.                                 </Grid>
  160.                                 <ControlTemplate.Triggers>
  161.                                     <Trigger Property="IsEnabled" Value="false">
  162.                                         <Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/>
  163.                                     </Trigger>
  164.                                 </ControlTemplate.Triggers>
  165.                             </ControlTemplate>
  166.                         </Setter.Value>
  167.                     </Setter>
  168.                 </Trigger>
  169.             </Style.Triggers>
  170.         </Style>

源码下载：WpfApp1.rar

WPF ScrollViewer滚动条样式，适合触摸屏使用的更多相关文章

  1. WPF ScrollViewer(滚动条) 自定义样式表制作 (改良+美化)

    原文:WPF ScrollViewer(滚动条) 自定义样式表制作 (改良+美化) 注释直接写在代码里了   不太理解意思的 可以先去看看我上一篇  WPF ScrollViewer(滚动条)  自定 ...

  2. WPF ScrollViewer(滚动条) 自定义样式表制作 再发一套样式 细节优化

    艾尼路 出的效果图 本人嵌套 WPF ScrollViewer(滚动条) 自定义样式表制作 图文并茂 WPF ScrollViewer(滚动条) 自定义样式表制作 (改良+美化) 源代码

  3. WPF ScrollViewer(滚动条) 自定义样式表制作 图文并茂

    原文:WPF ScrollViewer(滚动条) 自定义样式表制作 图文并茂 先上效果图 正常样式 拖动时样式 好下面 开始吧 ==================================== ...

  4. WPF 自定义滚动条样式

    先看一下效果: 先分析一下滚动条有哪儿几部分组成: 滚动条总共有五部分组成: 两端的箭头按钮,实际类型为RepeatButton Thumb 两端的空白,实际也是RepeatButton 最后就是Th ...

  5. WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式

    一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Scr ...

  6. 【转】WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式

    一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等. 本文主要内容: ScrollViewer的样式拆解及基本样式定义: ListBox集合 ...

  7. WPF 自定义滚动条（ScrollView、ScrollBar）样式

    一.滚动条基本样式 本次修改Scrollview及ScrollBar滚动条样式是通过纯样式实现的.修改的内容包含滚动条的颜色,上下按钮的隐藏.另外添加了鼠标经过滚动条动画. style样式如下: &l ...

  8. 滚动条——WPF ScrollViewer的应用

    WPF ScrollViewer的应用   我们知道在一个限定高的窗体和容器中,想要把内容显示完是有些问题的,这个时候我们就要使用类似于浏览器的那个滚动条的效果了,在wpf中也同样如此,最近就碰到了这 ...

  9. WPf 带滚动条WrapPanel 自动换行 和控件右键菜单

    原文:WPf 带滚动条WrapPanel 自动换行 和控件右键菜单 技能点包括 WPf 样式的引用 数据的验证和绑定 比较适合初学者 前台: <Window.Resources> < ...

随机推荐

  1. swift 设置图片动画组 iOS11之前 默认图片 设置不成功

    在iOS 11 上, 1.先执行动画组 在设置图片执行帧动画,2.先设置图片在设置帧动画,执行帧动画  没有任何问题 在iOS 10和iOS9上,必须 执行 方法二(先设置图片在设置帧动画,执行帧动画 ...

  2. php 的 PHPExcel1.8.0 使用教程

    PHPExcel是用来操作Office Excel文档的一个PHP类库,它基于微软的OpenXML标准和PHP语言.可以使用它来读取.写入不同格式的电子表格.   一.下载PHPExcel http: ...

  3. 接触mybatis使用

    1.mybatis mybatis是一个自定义sql.存储过程和高级映射的持久层框架,是Apache下的顶级项目. mybatis可以让程序员将主要精力放在sql上,通过mybatis提供的映射方式. ...

  4. Spring框架的事务管理之基于AspectJ的XML方式（重点掌握）

    1. 步骤一:恢复转账开发环境(转账开发环境见“https://www.cnblogs.com/wyhluckdog/p/10137283.html”) 2.步骤二:引入AOP的开发包3.步骤三:引入 ...

  5. python性能测试大致计划

      hi guy: 如果注意到创建时间,那就对了.这份文章,是我学习Python一个月以后动手写的.   写下这份计划以后,只完成了第一步,其中磕磕绊绊编写代码的过程,很大一部分时间是完全用txt写的 ...

  6. [SoapUI] 重载JSONComparator比对JSON Response，忽略小数点后几位，将科学计数法转换为普通数字进行比对，在错误信息中打印当前循环的case number及其他附加信息

    重载JSONComparator比对JSON Response,忽略小数点后几位,将科学计数法转换为普通数字进行比对,在错误信息中打印当前循环的case number及其他附加信息 package d ...

  7. Netty系列（四）TCP拆包和粘包

    Netty系列(四)TCP拆包和粘包 一.拆包和粘包问题 (1) 一个小的Socket Buffer问题 在基于流的传输里比如 TCP/IP,接收到的数据会先被存储到一个 socket 接收缓冲里.不 ...

  8. how to enable the Accessibility in the app

    第一部分 先要装一个accchecker,全称是 UI Accessibility Checker .下载地址: http://acccheck.codeplex.com/ 装了之后 用这个工具可以 ...

  9. 2018.09.23 atcoder Boxes and Candies（贪心）

    传送门 一道挺有意思的贪心. 从1到n依次满足条件. 注意要特判第一个数已经大于x的情况. 但是如何贪心吃呢? 如果靠左的数没有越界,我们吃靠右的数. 原因是下一次靠右的数就会成为靠左的数,相当于多贡 ...

  10. 一个 图片 滚动 飞入的css特效

    @keyframes bounceInLeft { from, 60%, 75%, 90%, to {animation-timing-function: cubic-bezier(0.215, 0. ...