WPF自定义控件之仿Win8滚动条--ScrollViewer

1.说明

自己学习WPF不是很久，现将自己做的一些小项目中用到的自定义控件整理出来，方便以后使用，不尽人意之处，还请多多批评与指导，现在就来实现自定义ScrollViewer仿Win8滚动条

2.效果预览

1）横纵预览 2）MouseOver 3）拖动中

3.XAML代码

    <!--x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}"-->

     <SolidColorBrush x:Key="ThumbBorderBackground" Color="#FFCDCDCD"/>

     <SolidColorBrush x:Key="ThumbMouseOverBackground" Color="#FF959393"/>

     <SolidColorBrush x:Key="ThumbDraggingBackground" Color="#FF505050"/>

    <!--x:Key="ScrollBarStyle1" TargetType="{x:Type ScrollBar}"-->

     <!--1,垂直与水平值相反-->

     <sys:Double x:Key="PepeatButtonPathWidth">8</sys:Double>

     <sys:Double x:Key="PepeatButtonPathHeight">6</sys:Double>

     <!--2,垂直与水平值一样-->

     <SolidColorBrush x:Key="PepeatButtonPathFill" Color="#FF444F4F"/>

     <SolidColorBrush x:Key="PepeatButtonPathMouseOverFill" Color="Black"/>

     <SolidColorBrush x:Key="PepeatButtonMouseOverBackground" Color="#FFDEDCDC"/>

     <SolidColorBrush x:Key="ScrollBarDisabledBackground" Color="#F4F4F4"/>

     <SolidColorBrush x:Key="ScrollBarBackground" Color="#F4F4F4"/>

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

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

         <Setter Property="Focusable" Value="false"/>

         <Setter Property="IsTabStop" Value="false"/>

         <Setter Property="Template">

             <Setter.Value>

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

                     <Themes:ScrollChrome x:Name="Chrome" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" SnapsToDevicePixels="true" Themes:ScrollChrome.ScrollGlyph="{TemplateBinding Themes:ScrollChrome.ScrollGlyph}"/>

                 </ControlTemplate>

             </Setter.Value>

         </Setter>

     </Style>

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

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

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

         <Setter Property="Focusable" Value="false"/>

         <Setter Property="IsTabStop" Value="false"/>

         <Setter Property="Template">

             <Setter.Value>

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

                     <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>

                 </ControlTemplate>

             </Setter.Value>

         </Setter>

     </Style>

     <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">

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

         <Setter Property="IsTabStop" Value="false"/>

         <Setter Property="Template">

             <Setter.Value>

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

                     <Border x:Name="border" Background="{StaticResource ThumbBorderBackground}" />

                     <ControlTemplate.Triggers>

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

                             <Setter Property="Background" TargetName="border" Value="{StaticResource ThumbMouseOverBackground}" />

                         </Trigger>

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

                             <Setter Property="Background" TargetName="border" Value="{StaticResource ThumbDraggingBackground}"/>

                         </Trigger>

                     </ControlTemplate.Triggers>

                 </ControlTemplate>

             </Setter.Value>

         </Setter>

     </Style>

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

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

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

         <Setter Property="Focusable" Value="false"/>

         <Setter Property="IsTabStop" Value="false"/>

         <Setter Property="Template">

             <Setter.Value>

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

                     <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>

                 </ControlTemplate>

             </Setter.Value>

         </Setter>

     </Style>

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

         <Setter Property="Background" Value="{StaticResource ScrollBarBackground}"/>

         <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>

         <Setter Property="Stylus.IsFlicksEnabled" Value="false"/>

         <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>

         <Setter Property="Width" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>

         <Setter Property="MinWidth" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>

         <Setter Property="Template">

             <Setter.Value>

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

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

                         <Grid.RowDefinitions>

                             <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>

                             <RowDefinition Height="0.00001*"/>

                             <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>

                         </Grid.RowDefinitions>

                         <RepeatButton x:Name="upButton" Command="{x:Static ScrollBar.LineUpCommand}" IsEnabled="{TemplateBinding IsMouseOver}" BorderBrush="{x:Null}" Foreground="{x:Null}" BorderThickness="0">

                             <Path x:Name="upPath" Height="{StaticResource PepeatButtonPathHeight}" Width="{StaticResource PepeatButtonPathWidth}" Stretch="Fill" Fill="{StaticResource PepeatButtonPathFill}" Data="F1 M 37.8516,35.625L 34.6849,38.7917L 23.6016,50.2708L 23.6016,39.9792L 37.8516,24.9375L 52.1016,39.9792L 52.1016,50.2708L 41.0182,38.7917L 37.8516,35.625 Z "/>

                         </RepeatButton>

                         <Track x:Name="PART_Track" IsDirectionReversed="true" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="1">

                             <Track.DecreaseRepeatButton>

                                 <RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/>

                             </Track.DecreaseRepeatButton>

                             <Track.IncreaseRepeatButton>

                                 <RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/>

                             </Track.IncreaseRepeatButton>

                             <Track.Thumb>

                                 <Thumb Style="{StaticResource ScrollBarThumb}" Themes:ScrollChrome.ScrollGlyph="VerticalGripper"/>

                             </Track.Thumb>

                         </Track>

                         <RepeatButton x:Name="downButton" Command="{x:Static ScrollBar.LineDownCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="2" Foreground="{x:Null}" BorderBrush="{x:Null}" BorderThickness="0">

                             <Path x:Name="downPath" Height="{StaticResource PepeatButtonPathHeight}" Width="{StaticResource PepeatButtonPathWidth}" Stretch="Fill" Fill="{StaticResource PepeatButtonPathFill}" Data="F1 M 37.8516,39.5833L 52.1016,24.9375L 52.1016,35.2292L 37.8516,50.2708L 23.6016,35.2292L 23.6016,24.9375L 37.8516,39.5833 Z "/>

                         </RepeatButton>

                     </Grid>

                     <ControlTemplate.Triggers>

                         <Trigger Property="IsEnabled" Value="True" SourceName="upButton">

                             <Setter Property="Fill" TargetName="upPath" Value="{StaticResource PepeatButtonPathMouseOverFill}"/>

                             <Setter Property="Fill" TargetName="downPath" Value="{StaticResource PepeatButtonPathMouseOverFill}"/>

                             <Setter Property="Background" TargetName="upButton" Value="{StaticResource PepeatButtonMouseOverBackground}"/>

                             <Setter Property="Background" TargetName="downButton" Value="{StaticResource PepeatButtonMouseOverBackground}"/>

                         </Trigger>

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

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

                         </Trigger>

                     </ControlTemplate.Triggers>

                 </ControlTemplate>

             </Setter.Value>

         </Setter>

         <Style.Triggers>

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

                 <Setter Property="Background" Value="{StaticResource ScrollBarBackground}"/>

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

                 <Setter Property="MinWidth" Value="0"/>

                 <Setter Property="Height" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/>

                 <Setter Property="MinHeight" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/>

                 <Setter Property="Template">

                     <Setter.Value>

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

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

                                 <Grid.ColumnDefinitions>

                                     <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>

                                     <ColumnDefinition Width="0.00001*"/>

                                     <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>

                                 </Grid.ColumnDefinitions>

                                 <RepeatButton x:Name="leftButton" Command="{x:Static ScrollBar.LineLeftCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Foreground="{x:Null}" BorderBrush="{x:Null}" BorderThickness="0">

                                     <Path x:Name="leftPath" Height="{StaticResource PepeatButtonPathWidth}" Width="{StaticResource PepeatButtonPathHeight}" Stretch="Fill" Fill="DarkSlateGray" Data="F1 M 35.8724,37.6042L 39.0391,40.7708L 50.5182,51.8542L 40.2266,51.8542L 25.1849,37.6041L 40.2266,23.3542L 50.5182,23.3542L 39.0391,34.4375L 35.8724,37.6042 Z "/>

                                 </RepeatButton>

                                 <Track x:Name="PART_Track" Grid.Column="1" IsEnabled="{TemplateBinding IsMouseOver}">

                                     <Track.DecreaseRepeatButton>

                                         <RepeatButton Command="{x:Static ScrollBar.PageLeftCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/>

                                     </Track.DecreaseRepeatButton>

                                     <Track.IncreaseRepeatButton>

                                         <RepeatButton Command="{x:Static ScrollBar.PageRightCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/>

                                     </Track.IncreaseRepeatButton>

                                     <Track.Thumb>

                                         <Thumb Style="{StaticResource ScrollBarThumb}" Themes:ScrollChrome.ScrollGlyph="HorizontalGripper"/>

                                     </Track.Thumb>

                                 </Track>

                                 <RepeatButton x:Name="rightButton" Grid.Column="2" Command="{x:Static ScrollBar.LineRightCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Foreground="{x:Null}" BorderBrush="{x:Null}" BorderThickness="0">

                                     <Path x:Name="rightPath" Height="{StaticResource PepeatButtonPathWidth}" Width="{StaticResource PepeatButtonPathHeight}" Stretch="Fill" Fill="{StaticResource PepeatButtonPathFill}" Data="F1 M 39.8307,37.6042L 36.6641,34.4375L 25.1849,23.3542L 35.4766,23.3542L 50.5182,37.6042L 35.4766,51.8542L 25.1849,51.8542L 36.6641,40.7708L 39.8307,37.6042 Z "/>

                                 </RepeatButton>

                             </Grid>

                             <ControlTemplate.Triggers>

                                 <Trigger Property="IsEnabled" Value="True" SourceName="leftButton">

                                     <Setter Property="Fill" TargetName="leftPath" Value="{StaticResource PepeatButtonPathMouseOverFill}"/>

                                     <Setter Property="Fill" TargetName="rightPath" Value="{StaticResource PepeatButtonPathMouseOverFill}"/>

                                     <Setter Property="Background" TargetName="leftButton" Value="{StaticResource PepeatButtonMouseOverBackground}"/>

                                     <Setter Property="Background" TargetName="rightButton" Value="{StaticResource PepeatButtonMouseOverBackground}"/>

                                 </Trigger>

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

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

                                 </Trigger>

                             </ControlTemplate.Triggers>

                         </ControlTemplate>

                     </Setter.Value>

                 </Setter>

             </Trigger>

         </Style.Triggers>

     </Style>

    <!--总样式x:Key="ScrollViewerStyle"，引用此处Key即可-->

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

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

             <Grid.ColumnDefinitions>

                 <ColumnDefinition Width="*"/>

                 <ColumnDefinition Width="Auto"/>

             </Grid.ColumnDefinitions>

             <Grid.RowDefinitions>

                 <RowDefinition Height="*"/>

                 <RowDefinition Height="Auto"/>

             </Grid.RowDefinitions>

             <ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}" Style="{DynamicResource ScrollBarStyle1}"/>

             <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}" Style="{DynamicResource ScrollBarStyle1}"/>

             <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding ScrollViewer.CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Margin="{TemplateBinding Padding}" Grid.Row="0"/>

         </Grid>

     </ControlTemplate>

注：将以上代码放置资源字典或文档资源或App.xaml中都可，如果，您对该样式的颜色搭配有自己的想法，修改以下代码部分颜色值即可，更多修改，此处不再赘述

    <!--x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}"-->

     <SolidColorBrush x:Key="ThumbBorderBackground" Color="#FFCDCDCD"/>

     <SolidColorBrush x:Key="ThumbMouseOverBackground" Color="#FF959393"/>

     <SolidColorBrush x:Key="ThumbDraggingBackground" Color="#FF505050"/>

    <!--x:Key="ScrollBarStyle1" TargetType="{x:Type ScrollBar}"-->

     <!--1,垂直与水平值相反-->

     <sys:Double x:Key="PepeatButtonPathWidth">8</sys:Double>

     <sys:Double x:Key="PepeatButtonPathHeight">6</sys:Double>

     <!--2,垂直与水平值一样-->

     <SolidColorBrush x:Key="PepeatButtonPathFill" Color="#FF444F4F"/>

     <SolidColorBrush x:Key="PepeatButtonPathMouseOverFill" Color="Black"/>

     <SolidColorBrush x:Key="PepeatButtonMouseOverBackground" Color="#FFDEDCDC"/>

     <SolidColorBrush x:Key="ScrollBarDisabledBackground" Color="#F4F4F4"/>

     <SolidColorBrush x:Key="ScrollBarBackground" Color="#F4F4F4"/>

4.应用

 <ScrollViewer Template="{DynamicResource ScrollViewerStyle}" HorizontalScrollBarVisibility="Auto"VerticalScrollBarVisibility="Auto">

      <!--包含的控件-->

 </ScrollViewer>

5.总结

可能对于大神而言这不算什么，但对于初学者还是有一定帮助的，但愿能给与一些还不是很懂的同僚一些启示，共同进步，有更多想法的还望多多批评，不吝赐教。

WPF自定义控件之仿Win8滚动条--ScrollViewer的更多相关文章

WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式
一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Scr ...
【转】WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式
一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等. 本文主要内容: ScrollViewer的样式拆解及基本样式定义: ListBox集合 ...
[WPF自定义控件库] 关于ScrollViewer和滚动轮劫持(scroll-wheel-hijack)
原文:[WPF自定义控件库] 关于ScrollViewer和滚动轮劫持(scroll-wheel-hijack) 1. 什么是滚动轮劫持# 这篇文章介绍一个很简单的继承自ScrollViewer的控件 ...
VS编程，WPF中两个滚动条 ScrollViewer 同步滚动的一种方法
原文:VS编程,WPF中两个滚动条 ScrollViewer 同步滚动的一种方法版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_43307934/ar ...
wpf 添加滚动条 ScrollViewer
在WPF中有些控件没有滚动条,微软提供了控件ScrollViewer,这个控件是设置滚动条 <ScrollViewer Name="scrollViewer1" /> ...
WPF自定义控件与样式(11)-等待/忙/正在加载状态-控件实现
一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要有三种实现方式 ...
WPF自定义控件与样式(13)-自定义窗体Window & 自适应内容大小消息框MessageBox
一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 自定义 ...
WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式、水印、Label标签、功能扩展
一．前言.预览申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要是对文本 ...
WPF自定义控件与样式(1)-矢量字体图标(iconfont)
一．图标字体图标字体在网页开发上运用非常广泛,具体可以网络搜索了解,网页上的运用有很多例子,如Bootstrap.但在C/S程序中使用还不多,字体图标其实就是把矢量图形打包到字体文件里,就像使用一般 ...

随机推荐

linux之ubuntu下php环境配置
本文主要说明如何在Ubuntu下配置PHP开发环境LAMP. Ubuntu 搭建 php 环境所谓LAMP:Linux,Apache,Mysql,PHP 安装 Apache2:(注意可以 ...
SOAP 及其安全控制--转载
原文地址:http://my.oschina.net/huangyong/blog/287791 目录[-] 1. 基于用户令牌的身份认证 2. 基于数字签名的身份认证 3. SOAP 消息的加密与解 ...
svn :Can't connect to host *.*.*.*': 由于连接方在一段时间后没有正确答复或连接的主机没有反应，连接尝试失败。
Can't connect to host *.*.*.*': 由于连接方在一段时间后没有正确答复或连接的主机没有反应,连接尝试失败. -------------------------------- ...
Android 开发中的屏幕适配技术详解
本文主要介绍Android开发中比较头疼繁琐的一个问题-屏幕适配问题.主要从适配原因.基本核心概念.适配方法等方面介详细介绍从而是的深入或者进一步对Android屏幕适配技术的掌握和理解. 真题园网 ...
利用iOS8新特性计算cell的实际高度
在计算cell的实际高度是我们一般是通过计算frame 拿到最底部一个控件的最大Y值从而的到cell 的高度算来算去比较麻烦其实,iOS8已经提供了直接通过Cell高度自适应的方法了,根 ...
c++与c不太相同的一些地方2
1.一般全局变量放到cpp 文件里面,而不是.h 里面.要不然容易乱套,这个乱几次就好了,先记住这样一种编码规范. 以为大家都引入就比较麻烦,但是实现起来就只有cpp里面才有.毕竟.h是要被包含的文件 ...
js解析XML
//在当前页面内追加换行标签和指定的HTML内容function w( html ){ $(document.body).append("<br/>" + htm ...
DHCP 服务器
简介: DHCP(Dynamic Host Configuration Protocol,动态主机配置协议)是一个局域网的网络协议,使用UDP协议工作,主要用途:给内部网络或网络服务供应商自动分配 I ...
lex/flex 笔记
Lex的匹配策略: 1. 按最长匹配原则确定被选中的单词 2. 如果一个字符串能被若干正规式匹配,则先匹配排在前面的正规式. lex源程序的写法:Lex源程序必须按照Lex语言的规范来写,其核心是一组 ...
delta
1,安装synplyfy:综合工程,便于学习(模块间的关系,数据流向) 2,安装wps office: www.wps.com/linux,论坛有安装方法和依赖包处理 3,安装kmplayer: 4 ...

WPF自定义控件之仿Win8滚动条--ScrollViewer

WPF自定义控件之仿Win8滚动条--ScrollViewer的更多相关文章

随机推荐

热门专题