原文: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. CD Linux U盘启动办法

    1.用ULtraISO打开cdlinux的ISO文件，用USB-HDD+写入到U盘上。 2.下载GRUB4DOS软件，复制grldr和menu.lst到U盘。 3.下载bootice软件，在U盘的分区 ...

  2. minizlib

    ZLIB开源库采用的是DEFLATE压缩算法,已经不支持加密功能,实际上功能还存在于代码中,采用MINIZIP可以支持对ZIP文件的加解密. ZLIB目前最新的是1.2.7,MINIZIP最新的版本是 ...

  3. libiconv库链接问题一则

    https://blog.csdn.net/jeson2090/article/details/54632063 出现过glibc中的iconv_open返回EINVAL,原因猜测是有些字符集转换不支 ...

  4. AHB接口转APB

    AHB接口转APB 情景 有一个以AHB接口时序设计的IP,现在需将其移至APB总线上,即将使用APB接口时序驱动该IP. 基本思路 将APB的接口信号映射到AHB的接口信号 要点 APB挂接在AHB ...

  5. windows 空闲超时 非管理员如何破解

    windows 空闲超时 非管理员如何破解

  6. Linux下图形界面调试工具kdbg安装及測试

    1.Ubuntu系统下安装 Ubuntu系统安装比較方便,直接apt-get即可 apt-get install kdbg 2.centos 安装 首先,在这个地址下下载rpm包.然后使用rpm命令安 ...

  7. JNDI 的理解

    JNDI是 Java 命名与文件夹接口(Java Naming and Directory Interface),在J2EE规范中是重要的规范之中的一个,不少专家觉得,没有透彻理解JNDI的意义和作用 ...

  8. 【codeforces 754A】Lesha and array splitting

    time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...

  9. [React Router v4] Render Nested Routes

    With React Router v4 the entire library is built as a series of React components. That means that cr ...

  10. IT咨询服务-客户案例(四)：根据图片等素材，动态生成个性化图片

    最近,慕名而来一个客户. 客户的目标    网站来一个用户,选择模版,上传图片等素材,生成自定义的图片,或者静态网站,然后分享到社交网站.有点类似于,网上制作名片,选择模版,输入个人信息,生成名片的设 ...