原文: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. 解读AFNetworking中Demo的MVC

    Demo的下载地址:AFNetworking下载 打开Demo: 现实的功能.就是一个简易的微博timeline界面: 项目预览: 用到的第三方:AFNetworking 和 UIKit+AFNetw ...

  2. 关于stm32的RAM大小

  3. RSA DH

    https://www.cnblogs.com/hiflora/archive/2013/07/04/3171775.html http://www.ruanyifeng.com/blog/2013/ ...

  4. [Angular Testing] Unit Testing -- Test component and service.

    Recommend to use angular-cli to generate component and service, so we can get testing templates. ng ...

  5. （一一六）新浪微博client的离线缓存实现思路

    上一节(一一五)利用NSKeyedArchiver实现随意对象转为二进制介绍了将随意对象转化为二进制数据和还原的方法.可用于实现本节介绍的微博数据离线缓存. 通过新浪官方的API能够发现,返回的微博数 ...

  6. php实现 求int型数据在内存中存储时1的个数（函数都可自己实现）

    php实现 求int型数据在内存中存储时1的个数(函数都可自己实现) 一.总结 一句话总结:函数我们自己都可以实现,尤其是很多基础函数,没有工具的时候自己写. 1.php进制转换函数? base_co ...

  7. Django之富文本编辑器kindeditor 及上传

    1.什么是富文本编辑器 百度百科(https://baike.baidu.com/item/%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8 ...

  8. Android 长按事件和短按事件同时响应

    在长按事件中的return false 改为return true就可以解决这个问题

  9. css 弹性盒模型Flex 布局

    参考文章:http://www.runoob.com/w3cnote/flex-grammar.html Flex 布局是什么:采用Flex布局的元素,称为Flex容器(flex container) ...

  10. 【u206】最大赢家

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] Nic和Susan在玩一个有趣的游戏:在游戏开始前,他们先约定一个正整数n,同时令m=1.游戏过程中, ...