原文: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. 强力推荐微信小程序之简易计算器，很适合小白程序员

    原文链接:https://mp.weixin.qq.com/s/gYF7GjTRpeZNoKPAPI9aXA 1 概述 前几日QQ群里的朋友问我有没有计算器小程序案例,今天我们说下小程序计算器,然后就 ...

  2. 【Codeforces Round #185 (Div. 2) C】The Closest Pair

    [链接] 链接 [题意] 让你构造n个点,去hack一种求最近点对的算法. [题解] 让x相同. 那么那个剪枝就不会起作用了. [错的次数] 在这里输入错的次数 [反思] 在这里输入反思 [代码] # ...

  3. python implementation for Qt's QDataStream（看一下QDataStream的结构）

    #!/usr/bin/env python # -*- coding: utf- -*- from __future__ import print_function from __future__ i ...

  4. &lt;LeetCode OJ&gt; 62. / 63. Unique Paths（I / II）

    62. Unique Paths My Submissions Question Total Accepted: 75227 Total Submissions: 214539 Difficulty: ...

  5. Android 基于Bmob平台数据管理常用方法整理

    最近想搞一下基于Bmob平台的应用开发,发现确实挺方便的,很好的解决了服务器后台部署的难题, 但是也有一些弊端,数据架构的可扩展性不强,做一些数据结构简单的应用还是可以的. package com.b ...

  6. [NPM] List available npm scripts and support tab completion

    In this lesson we will look at different ways you can list the available npm scripts. Whether we wan ...

  7. Android自定义控件View（一）

    虽然Android API给我们提供了众多控件View来使用,但是鉴于Android的开发性,自然少不了根据需求自定义控件View了.比如说QQ头像是圆形的,但是纵观整个Android控件也找不到一个 ...

  8. 手机端自适应布局demo

    原型如下: 要求如下:适应各种机型 源码如下: <!DOCTYPE html > <html>     <head>         <meta http-e ...

  9. js进阶 10-4 jquery中基础选择器有哪些

    js进阶 10-4 jquery中基础选择器有哪些 一.总结 一句话总结: 1.群组选择器用的符号是什么? 群组选择器,中间是逗号 2.jquery中基础选择器有哪些? 5种,类,id,tag,群组, ...

  10. Scala入门到精通——第二十七节 Scala操纵XML

    本节主要内容 XML 字面量 XML内容提取 XML对象序列化及反序列化 XML文件读取与保存 XML模式匹配 1. XML 字面量 XML是一种很重要的半结构化数据表示方式,眼下大量的应用依赖于XM ...