WPF 自定义ScrollViwer

ScrollViewer自定义样式

ScrollViewer在各种列表、集合控件中广泛使用的基础组建，先看看效果图：

如上图，ScrollViewer简单来说分两部分，一个横向的滚动条，一个垂直滚动条，两个样式、模板、功能都基本一样，他们都是ScrollBar。以垂直滚动条为例，分解一下，分解图：

1：向上滑动的按钮，用RepeatButton实现功能；
2：上部分滑块，功能同1，也是一个RepeatButton来实现的；
3：中间可拖动滑块，用一个Thumb来实现；
4：下部分滑块，和5功能一样，向下滑动，用一个RepeatButton来实现；
5：向下滑动的按钮，用RepeatButton实现功能；

上面实现的是一个标准的垂直滑动条ScrollBar组成，实际可用根据需求定制，实现不同效果的滑动效果。以上各部分的样式代码：

<Style x:Key="ScrollBarButton" TargetType="{x:Type RepeatButton}">

        <Setter Property="Background" Value="Transparent"></Setter>

        <Setter Property="Foreground" Value="{StaticResource TextForeground}"></Setter>

        <Setter Property="VerticalAlignment" Value="Center"></Setter>

        <Setter Property="HorizontalAlignment" Value="Center"></Setter>

        <Setter Property="Width" Value="auto"></Setter>

        <Setter Property="Height" Value="auto"></Setter>

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="{x:Type RepeatButton}">

                    <TextBlock x:Name="FIcon" FontSize="12" Text="{TemplateBinding local:ControlAttachProperty.FIcon}" Margin="1"

                               Style="{StaticResource FIcon}" />

                    <ControlTemplate.Triggers>

                        <Trigger Property="IsMouseOver" Value="True">

                            <Setter Property="Foreground" Value="{StaticResource MouseOverForeground}" TargetName="FIcon"/>

                        </Trigger>

                        <Trigger Property="IsPressed" Value="True">

                            <Setter Property="Foreground" Value="{StaticResource PressedForeground}" TargetName="FIcon"/>

                        </Trigger>

                        <Trigger Property="IsEnabled" Value="false">

                            <Setter Property="Opacity" Value="0.5" TargetName="FIcon"/>

                        </Trigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

    <!--滚动条滑块两边按钮样式-->

    <Style x:Key="ScrollBarTrackButton" TargetType="{x:Type RepeatButton}">

        <Setter Property="Background" Value="Transparent"></Setter>

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="{x:Type RepeatButton}">

                    <Border Background="Transparent"></Border>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

    <!--滚动条滑块样式-->

    <ControlTemplate x:Key="ThumbTemplate" TargetType="Thumb">

        <Grid>

            <Border  x:Name="Bg" CornerRadius="4" Margin="2" SnapsToDevicePixels="True" Background="{StaticResource ScrollBarForeround}">

                <!--<Border.Background>

                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">

                        <GradientStop Color="#C7C0C0" Offset="0.15"/>

                        <GradientStop Color="#AFA9A9" Offset=".5"/>

                        <GradientStop Color="#989494" Offset=".5"/>

                        <GradientStop Color="#858585" Offset="1"/>

                    </LinearGradientBrush>

                </Border.Background>-->

            </Border>

        </Grid>

        <ControlTemplate.Triggers>

            <Trigger Property="IsMouseOver" Value="True">

                <Setter Property="Background" Value="{StaticResource MouseOverForeground}" TargetName="Bg"></Setter>

            </Trigger>

            <Trigger Property="IsEnabled" Value="False">

                <Setter Property="Opacity" Value="0.5" TargetName="Bg"></Setter>

            </Trigger>

        </ControlTemplate.Triggers>

    </ControlTemplate>

    <!--水平滚滚动条模板-->

    <ControlTemplate x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}">

        <Grid x:Name="HorizontalRoot" Height="{TemplateBinding Height}">

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="Auto" />

                <ColumnDefinition Width="*" />

                <ColumnDefinition Width="Auto" />

            </Grid.ColumnDefinitions>

            <!--外部背景,好像不用更好看-->

            <!--<Border x:Name="Bg" Grid.Column="0" Grid.ColumnSpan="3" CornerRadius="0"  Opacity="0" Background="#858585"/>-->

            <!--内部背景-->

            <Border x:Name="BgInner" Grid.Column="1" Margin="0" SnapsToDevicePixels="True" Opacity="0.3"  CornerRadius="6" Background="{StaticResource ScrollBarBackground}"/>

            <!--左按钮-->

            <Border Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Center">

                <RepeatButton  local:ControlAttachProperty.FIcon=""  Style="{StaticResource ScrollBarButton}" x:Name="HorizontalSmallDecrease"

                                 IsTabStop="False" Interval="50" Margin="0,1,0,0" Command="ScrollBar.LineLeftCommand"/>

            </Border>

            <!--中间滑动区域-->

            <Track x:Name="PART_Track" IsDirectionReversed="False" Grid.Column="1">

                <!--左滑块-->

                <Track.DecreaseRepeatButton>

                    <RepeatButton x:Name="HorizontalLargeDecrease" Command="ScrollBar.PageLeftCommand"

                                      IsTabStop="False" Interval="50" Style="{DynamicResource ScrollBarTrackButton}" />

                </Track.DecreaseRepeatButton>

                <!--中间滑块 Margin="1" VerticalAlignment="Center" VerticalContentAlignment="Center" -->

                <Track.Thumb>

                    <Thumb Template="{StaticResource ThumbTemplate}" />

                </Track.Thumb>

                <!--右滑块-->

                <Track.IncreaseRepeatButton>

                    <RepeatButton x:Name="HorizontalLargeIncrease" Command="ScrollBar.PageRightCommand"

                                      IsTabStop="False"  Interval="50" Style="{DynamicResource ScrollBarTrackButton}" />

                </Track.IncreaseRepeatButton>

            </Track>

            <!--右按钮-->

            <Border Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center">

                <RepeatButton local:ControlAttachProperty.FIcon=""  Style="{StaticResource ScrollBarButton}"

                                 IsTabStop="False" Interval="50" Margin="0,1,0,0" Command="ScrollBar.LineRightCommand"/>

            </Border>

        </Grid>

        <ControlTemplate.Triggers>

            <Trigger Property="IsMouseOver" Value="true">

                <Setter TargetName="BgInner" Property="Opacity" Value="0.5"/>

            </Trigger>

        </ControlTemplate.Triggers>

    </ControlTemplate>

    <!--垂直滚滚动条模板-->

    <ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">

        <Grid x:Name="VerticalRoot" Height="{TemplateBinding Height}">

            <Grid.RowDefinitions>

                <RowDefinition Height="Auto" />

                <RowDefinition Height="*" />

                <RowDefinition Height="Auto" />

            </Grid.RowDefinitions>

            <!--外部背景,好像不用更好看-->

            <!--<Border x:Name="Bg" Grid.Row="0" Grid.RowSpan="3" CornerRadius="0" Opacity="0" Background="#858585"/>-->

            <!--内部背景-->

            <Border x:Name="BgInner" Grid.Row="1" Margin="0" CornerRadius="6" SnapsToDevicePixels ="True" Opacity="0.3"  Background="{StaticResource ScrollBarBackground}"/>

            <!--上按钮-->

            <Border Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Center" x:Name="VerticalSmallDecrease">

                <RepeatButton local:ControlAttachProperty.FIcon=""  Style="{StaticResource ScrollBarButton}"

                                 IsTabStop="False" Interval="50" Margin="0" Command="ScrollBar.LineUpCommand"/>

            </Border>

            <!--中间滑动区域-->

            <Track x:Name="PART_Track" IsDirectionReversed="true" Grid.Row="1">

                <!--上滑块-->

                <Track.DecreaseRepeatButton>

                    <RepeatButton x:Name="HorizontalLargeDecrease" Command="ScrollBar.PageUpCommand"

                                      IsTabStop="False" Interval="50" Style="{DynamicResource ScrollBarTrackButton}" />

                </Track.DecreaseRepeatButton>

                <!--中间滑块-->

                <Track.Thumb>

                    <Thumb Template="{StaticResource ThumbTemplate}" MinHeight="10"/>

                </Track.Thumb>

                <!--下滑块-->

                <Track.IncreaseRepeatButton>

                    <RepeatButton x:Name="HorizontalLargeIncrease" Command="ScrollBar.PageDownCommand"

                                      IsTabStop="False" Interval="50" Style="{DynamicResource ScrollBarTrackButton}" />

                </Track.IncreaseRepeatButton>

            </Track>

            <!--下按钮-->

            <Border Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Center" x:Name="VerticalSmallIncrease">

                <RepeatButton local:ControlAttachProperty.FIcon=""  Style="{StaticResource ScrollBarButton}"

                                 IsTabStop="False" Interval="50" Margin="0" Command="ScrollBar.LineDownCommand"/>

            </Border>

        </Grid>

        <ControlTemplate.Triggers>

            <Trigger Property="IsMouseOver" Value="true">

                <Setter TargetName="BgInner" Property="Opacity" Value="0.5"/>

            </Trigger>

        </ControlTemplate.Triggers>

    </ControlTemplate>

    <!--ScrollBar样式-->

    <Style x:Key="DefaultScrollBar" TargetType="{x:Type ScrollBar}">

        <Setter Property="SnapsToDevicePixels" Value="True" />

        <Setter Property="OverridesDefaultStyle" Value="true" />

        <Style.Triggers>

            <Trigger Property="Orientation" Value="Horizontal">

                <Setter Property="Template" Value="{StaticResource HorizontalScrollBar}" />

                <Setter Property="Height" Value="{StaticResource ScrollBarSize}" />

            </Trigger>

            <Trigger Property="Orientation" Value="Vertical">

                <Setter Property="Template" Value="{StaticResource VerticalScrollBar}" />

                <Setter Property="Width" Value="{StaticResource ScrollBarSize}" />

            </Trigger>

        </Style.Triggers>

    </Style>

<!--ScrollViewer样式-->

    <Style x:Key="DefaultScrollViewer" TargetType="{x:Type ScrollViewer}">

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="{x:Type ScrollViewer}">

                    <Grid x:Name="Grid" Background="{TemplateBinding Background}">

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition Width="*" x:Name="leftColumn" />

                            <ColumnDefinition Width="Auto" x:Name="rightColumn" />

                        </Grid.ColumnDefinitions>

                        <Grid.RowDefinitions>

                            <RowDefinition Height="*" />

                            <RowDefinition Height="Auto" />

                        </Grid.RowDefinitions>

                        <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}"

                                                CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}"

                                                Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}"

                                                Grid.Row="0" Grid.Column="0" />

                        <!--垂直滚动条 -->

                        <ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar"

                                   ViewportSize="{TemplateBinding ViewportHeight}"

                                   Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}"

                                   Minimum="0" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"

                                   Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"/>

                        <!--水平底部滚动条-->

                        <ScrollBar x:Name="PART_HorizontalScrollBar" AutomationProperties.AutomationId="HorizontalScrollBar"

                                   Cursor="Arrow" Grid.Column="0" Maximum="{TemplateBinding ScrollableWidth}"

                                   Minimum="0" Orientation="Horizontal" Grid.Row="1"

                                   Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"

                                   Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"

                                   ViewportSize="{TemplateBinding ViewportWidth}" />

                    </Grid>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

使用很简单，如果想通用，把上面定义的ScrollViewer设置为默认样式即可：

WPF 自定义ScrollViwer的更多相关文章

WPF 自定义柱状图 BarChart
WPF 自定义柱状图当前的Telerik控件.DevExpress控件在图表控件方面做得不错,但是有时项目中需要特定的样式,不是只通过修改图表的模板和样式就能实现的. 或者说,通过修改当前的第三方控 ...
wpf 自定义圆形按钮
wpf 自定义圆形按钮效果图默认样式获取焦点样式点击样式下面是实现代码: 一个是自定义控件类,一个是控件类皮肤 using System; using System.Collections. ...
WPF自定义窗口基类
WPF自定义窗口基类时,窗口基类只定义.cs文件,xaml文件不定义.继承自定义窗口的类xaml文件的根节点就不再是<Window>,而是自定义窗口类名(若自定义窗口与继承者不在同一个命名 ...
WPF 自定义 MessageBox (相对完善版)
WPF 自定义 MessageBox (相对完善版) 基于WPF的自定义 MessageBox. 众所周知WPF界面美观.大多数WPF元素都可以简单的修改其样式,从而达到程序的风格统一.可是当 ...
WPF自定义Window样式（2）
1. 引言在上一篇中,介绍了如何建立自定义窗体.接下来,我们需要考虑将该自定义窗体基类放到类库中去,只有放到类库中,我们才能在其他地方去方便的引用该基类. 2. 创建类库接上一篇的项目,先添加一个 ...
WPF自定义Window样式（1）
1. 引言 WPF是制作界面的一大利器.最近在做一个项目,用的就是WPF.既然使用了WPF了,那么理所当然的,需要自定义窗体样式.所使用的代码是在网上查到的,遗憾的是,整理完毕后,再找那篇帖子却怎么也 ...
WPF自学入门（九）WPF自定义窗口基类
今天简单记录一个知识点:WPF自定义窗口基类,常用winform的人知道,winform的窗体继承是很好用的,写一个基础窗体,直接在后台代码改写继承窗体名.但如果是WPF要继承窗体,我个人感觉没有理解 ...
WPF自定义TabControl样式
WPF自定义TabControl,TabControl美化 XAML代码: <TabControl x:Class="SunCreate.Common.Controls.TabCont ...
WPF 自定义ComboBox样式，自定义多选控件
原文:WPF 自定义ComboBox样式,自定义多选控件一.ComboBox基本样式 ComboBox有两种状态,可编辑和不可编辑状态.通过设置IsEditable属性可以切换控件状态. 先看基本样 ...

随机推荐

转-SourceTree注册atlassian账号SIGUP按钮灰色无法注册的问题
我们第一次安装sourcetree的时候会要求我们登陆一个账号但是,会出现注册按钮变灰的怪现象令人头疼的是,在官网也搞不定. 下面的网址可以顺利注册账号的网址 https://www.atlass ...
jenkins Build Flow job 输入参数获取和传递
jenkins Build Flow job 输入参数获取和传递如果设置Build Flow的job,怎样获取手工输入的参数. 1. 指定构建参数 job配置中,勾选"参数化构建" ...
Eavl（）数据绑定格式化时间
<%#Eval("字段名","{0:yyyy-MM-dd}") %> 或者 <%#((DateTime)Eval("news_tim ...
nginx反向代理后abp的webapi host如何获取客户端ip？
dotnet core 跨平台是微软伟大的创举,脱离iis后服务器成本都降低了. 问题这不,采用abp搞了个小项目,部署到centos后发现审计日志里面的ip信息不对. 解决这个问题在.net 4 ...
Vue 框架笔记
1.兼容 2.性能优化 vuejs ******作者:尤雨溪 *** *******MVVM框架: M:model层数据层数据的增删改查 V:view视图层类似于html的模板 vm:vie ...
js简单正则表达式验证密码
包含3种及以上 var reg = new RegExp("^(?![A-Za-z]+$)(?![A-Z\\d]+$)(?![A-Z\\W]+$)(?![a-z\\d]+$)(?![a-z\ ...
iOS没你想的那么安全？
iOS应用由于直接运行在用户的手机上,而不是运行在后台服务器上,所以更容易被攻击. 任何系统都会有木马病毒的产生,不存在绝对的安全,iOS应用由于直接运行在用户的手机上,而不是运行在后台服务器上,所以 ...
设置跨交换机VLAN
4台计算机,pc1 pc2 连接到交换机1的f1/1和f1/2.Pc3 pc4 连接到交换机2的f1/1和f1/2.pc1设置ip地址192.168.1.10,pc2 pc3 pc4设置ip地址192 ...
mxonline实战7，模板继承和模板标签
对应github地址:https://github.com/pshyms/django/tree/master/mxonline/7_day 一. 定制不同页面中样式相同,内容不同的模 ...
python3的嵌套函数
背景最近在学python3 嵌套函数顾名思义,即使在函数中还有函数,实现了函数的多级嵌套 def test1(): age = 10 print(age) def test2(): te = 5 ...

WPF 自定义ScrollViwer

WPF 自定义ScrollViwer的更多相关文章

随机推荐

热门专题