原文:wpf之自定义滚动条

首先我们添加一个带滚动条的textbox控件:

<ScrollViewer Height="130" Width="620" VerticalScrollBarVisibility="Auto" Style="{StaticResource for_scrollviewer}">
<TextBlock xml:space="preserve" Name="FtpServerConf" HorizontalAlignment="Left" VerticalAlignment="Top" TextWrapping="Wrap"  Width="610"/>
</ScrollViewer>

这里 VerticalScrollBarVisibility="Auto"表示是超出垂直距离自动显示滚动条,当然这个滚动条是win系统自带的效果,我们要修改的就是这部分,需要对滚动区域的模板进行自定义修改。

这里借用网上的两张图,解释一下滚动条的结构:

我们需要给scrollview控件自定义样式:

<Style x:Key="for_scrollviewer"
TargetType="{x:Type ScrollViewer}">
<Setter Property="BorderBrush"
Value="LightGray"/>
<Setter Property="BorderThickness"
Value="0"/>
<Setter Property="HorizontalContentAlignment"
Value="Left"/>
<Setter Property="HorizontalScrollBarVisibility"
Value="Disabled"/>
<Setter Property="VerticalContentAlignment"
Value="Top"/>
<Setter Property="VerticalScrollBarVisibility"
Value="Visible"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollViewer}">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="True">
<Grid Background="{TemplateBinding Background}">
<ScrollContentPresenter
Cursor="{TemplateBinding Cursor}"
Margin="{TemplateBinding Padding}"
ContentTemplate="{TemplateBinding ContentTemplate}"/>
<!--垂直滚动条-->
<ScrollBar x:Name="PART_VerticalScrollBar"
HorizontalAlignment="Right"
Maximum="{TemplateBinding ScrollableHeight}"
Orientation="Vertical"
Style="{StaticResource for_scrollbar}"
ViewportSize="{TemplateBinding ViewportHeight}"
Value="{TemplateBinding VerticalOffset}"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
<!--水平滚动条-->
<ScrollBar x:Name="PART_HorizontalScrollBar"
Maximum="{TemplateBinding ScrollableWidth}"
Orientation="Horizontal"
Style="{StaticResource for_scrollbar}"
VerticalAlignment="Bottom"
Value="{TemplateBinding HorizontalOffset}"
ViewportSize="{TemplateBinding ViewportWidth}"
Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="ScrollChanged">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="PART_VerticalScrollBar"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0:0:1"/>
<!--自动消失-->
<!--<DoubleAnimation
Storyboard.TargetName="PART_VerticalScrollBar"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0:0:1"
BeginTime="0:0:1"/>-->
<DoubleAnimation
Storyboard.TargetName="PART_HorizontalScrollBar"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0:0:1"/>
<DoubleAnimation
Storyboard.TargetName="PART_HorizontalScrollBar"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0:0:1"
BeginTime="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseEnter"
SourceName="PART_VerticalScrollBar">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="PART_VerticalScrollBar"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<!---鼠标离开后渐渐消失-->
<!--
<EventTrigger RoutedEvent="MouseLeave"
SourceName="PART_VerticalScrollBar">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="PART_VerticalScrollBar"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
-->
<EventTrigger RoutedEvent="MouseEnter"
SourceName="PART_HorizontalScrollBar">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="PART_HorizontalScrollBar"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave"
SourceName="PART_HorizontalScrollBar">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="PART_HorizontalScrollBar"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

然后在需要使用的地方进行引用:

<ScrollViewer Height="130" Width="620" VerticalScrollBarVisibility="Auto" Style="{StaticResource for_scrollviewer}">
<TextBlock xml:space="preserve" Name="FtpServerConf" HorizontalAlignment="Left" VerticalAlignment="Top" TextWrapping="Wrap" Style="{StaticResource tab_text}" Width="610"></TextBlock>
</ScrollViewer>

最终效果是这样的:

wpf之自定义滚动条的更多相关文章

  1. WPF 自定义滚动条样式

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

  2. WPF中自定义的DataTemplate中的控件,在Window_Loaded事件中加载机制初探

    原文:WPF中自定义的DataTemplate中的控件,在Window_Loaded事件中加载机制初探         最近因为项目需要,开始学习如何使用WPF开发桌面程序.使用WPF一段时间之后,感 ...

  3. 自定义滚动条(Custom ScrollBar)

    时间如流水,只能流去不流回! 点赞再看,养成习惯,这是您给我创作的动力! 本文 Dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如Winform.W ...

  4. CSS3自定义滚动条样式 -webkit-scrollbar(转)

    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...

  5. jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏

    一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自h ...

  6. 利用JS实现自定义滚动条

    一般默认的滚动条会比较丑,我们可以用简单的js实现自定义滚动条的功能: 代码如下: <!doctype html> <html> <head> <meta c ...

  7. javascript 学习之自定义滚动条加滚轮事件

    要自己写一个自定义滚动条加上滚轮事件,之前的没有滚轮事件不完整,今天整理了一个. 1.滚轮事件是不兼容的,firefox中是必需要用事件绑定的添加,用的DOMMouseScroll,当滚动鼠标的时候, ...

  8. 自定义滚动条 - mCustomScrollbar

    项目中需要使用自定义滚动条,但是试用了很多都功能不够全,今天发现一个比较全而且用法很简单的 -- mCustomScrollbar http://manos.malihu.gr/jquery-cust ...

  9. Flex:自定义滚动条样式/隐藏上下箭头

    Flex组件自定义滚动条的实现 .scrollBar{ downArrowUpSkin:Embed(source="img/mainLeftScrollBar/bar_bottom.png& ...

随机推荐

  1. ios 获取button所在的cell对象, 注意:ios7 =&lt; System Version &lt; ios8 获取cell对象的差别

    ios7 =< System Version< ios8 : ios7 =< System Version < ios8  下 button.superview.supervi ...

  2. 解决maven项目找不到maven依赖的解决办法

    不同的IDE对应的.classpath中的maven声明也不一样,这样就会导致项目找不到maven依赖. 即Java Build Path--->Libraries中找不到Maven Depen ...

  3. 编译Valgrind arm交叉编译

    1. 下载源码: http://valgrind.org/downloads/valgrind-3.9.0.tar.bz2   2. 加压缩: mkdir sw cd sw tar zxf valgr ...

  4. 为什么 qt 成为 c++ 界面编程的第一选择?

    为什么qt成为c++界面编程的第一选择 一.前言 为什么现在QT越来越成为界面编程的第一选择,笔者从事qt界面编程已经有接近8年,在这之前我做C++界面都是基于MFC,也做过5年左右.当时为什么会从M ...

  5. Android JNI编程(四)——C语言多级指针、数组取值、从控制台输入数组

    版权声明:本文出自阿钟的博客,转载请注明出处:http://blog.csdn.net/a_zhon/. 目录(?)[+] 一:前面我们介绍了一级指针的相关概念和用发,今天我们就来说一说多级指针. 1 ...

  6. 网络异常与SQL Server事务

    SQL Server事务遭遇网络异常时的处理机制浅析 SQL Server数据库中,如果应用程序正在执行一个事务的时候突然遭遇了网络异常,例如网络掉包,网络中断等,那么这个事务会怎么样? SQL Se ...

  7. ios UI控件的简单整理

    把该文件拷贝到.m文件中就能够方便的查找 /** 匿名类目:能够声明方法和变量,属性为private(不同意在外部调用,且不能被继承 */ /** 发送数据的托付方,接收数据的时代理发(即代理的反向传 ...

  8. <a href='javacript:' title='{$str}'>是什么意思(多看学习视频)

    <a href='javacript:' title='{$str}'>是什么意思(多看学习视频) 一.总结 一句话总结: 1.javascript:是什么? 伪协议,后面接javascr ...

  9. BigDecimal 舍入模式(Rounding mode)介绍

    BigDecimal 舍入模式(Rounding mode)介绍 什么样的经历,才能领悟成为架构师? >>>   1 RoundingMode介绍 package java.math ...

  10. 在视图上创建ListCtrl的做法

    作者:朱金灿 来源:http://blog.csdn.net/clever101 今天介绍下如何在一个视图上动态创建一个ListCtrl. 1.新建一个MFC的单文档工程,这里暂定名字为ListDem ...