备案控制台
开发者社区 开发与运维 文章 正文

wpf之自定义滚动条

2018-10-20 1614
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文:wpf之自定义滚动条首先我们添加一个带滚动条的textbox控件： 这里 VerticalScrollBarVisibility="Auto"表示是超出垂直距离自动显示滚动条，当然这个滚动条是win系统自带的效果，我们要修改的就是这部分，需要对滚动区域的模板进行自定义修改。
原文: 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>
View Code

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

<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>

最终效果是这样的：

文章标签：
C#
数据格式
XML
关键词：
wpf自定义
杰克.陈
目录
相关文章
杰克.陈
|
C# 虚拟化 索引
【WPF】UI虚拟化之------自定义VirtualizingWrapPanel
原文:【WPF】UI虚拟化之------自定义VirtualizingWrapPanel 前言 前几天QA报了一个关于OOM的bug，在排查的过程中发现，ListBox控件中被塞入了过多的Item，而ListBox又定义了两种样式的ItemsPanelTemplate。
杰克.陈
2098 0
杰克.陈
|
C# 数据安全/隐私保护
【WPF】右下角弹出自定义通知样式（Notification）——简单教程
原文:【WPF】右下角弹出自定义通知样式（Notification）——简单教程 1.先看效果 2.实现 1.主界面是MainWindow 上面就只摆放一个Button即可。
杰克.陈
2893 0
Wesky
|
前端开发 C# 图形学
【WPF】WPF开发用户控件、用户控件属性依赖DependencyProperty实现双向绑定、以及自定义实现Command双向绑定功能演示
Wpf开发过程中，最经常使用的功能之一，就是用户控件(UserControl)了。用户控件可以用于开发用户自己的控件进行使用，甚至可以用于打造一套属于自己的UI框架。依赖属性(DependencyProperty)是为用户控件提供可支持双向绑定的必备技巧之一，同样用处也非常广泛。
Wesky
835 0
【WPF】WPF开发用户控件、用户控件属性依赖DependencyProperty实现双向绑定、以及自定义实现Command双向绑定功能演示
杰克.陈
|
C#
WPF 4 DataGrid 控件（自定义样式篇）
原文:WPF 4 DataGrid 控件（自定义样式篇）      在《WPF 4 DataGrid 控件（基本功能篇）》中我们已经学习了DataGrid 的基本功能及使用方法。本篇将继续介绍自定义DataGrid 样式的相关内容，其中将涉及到ColumnHeader、RowHeader、Row、Cell 的各种样式设置。
杰克.陈
2549 0
杰克.陈
|
C# C++ 数据可视化
WPF Calendar 日历控件 样式自定义
原文:WPF Calendar 日历控件 样式自定义 粗略的在代码上做了些注释 blend 生成出来的模版 有的时候 会生成 跟 vs ui界面不兼容的代码 会导致可视化设计界面 报错崩溃掉 但是确不影响 程序的编译运行 这个样式表 在vs 里会提示动画不兼容 Foreground属性 报错 ...
杰克.陈
1733 1
nurmemet
|
C#
WPF 控件自定义背景
<!--控件要设置尺寸的话，设置的尺寸必须比下面的图形的尺寸要小，不然显示不开--> <Label Content="直角测试" Width="90" Height="90" HorizontalContentAlignment="Center" Vert...
nurmemet
997 0
nurmemet
|
C#
WPF开发-Label自定义背景-Decorator
首先在App.xaml文件当中添加样式和模板
nurmemet
1989 0
nurmemet
|
C#
wpf 开发 -TextBox背景自定义-Decorator
首先在app.xaml文件的下面添加以下样式
nurmemet
1655 0
杰克.陈
|
C# 开发工具 git
WPF实现选项卡效果（3）——自定义动态添加的AvalonDock选项卡内容
原文:WPF实现选项卡效果（3）——自定义动态添加的AvalonDock选项卡内容 简介 　　在前面一篇文章里面，我们实现了AvalonDock选项卡的动态添加，但是对于选项卡里面的内容，我们并没有实现任何有用的功能。
杰克.陈
1316 0
杰克.陈
|
C#
WPF中自定义的DataTemplate中的控件，在Window_Loaded事件中加载机制初探
原文:WPF中自定义的DataTemplate中的控件，在Window_Loaded事件中加载机制初探         最近因为项目需要，开始学习如何使用WPF开发桌面程序。
杰克.陈
1507 0