收藏一个带动画效果的ScrollViewer以及ScrollBar的模板
这里介绍一个带动画效果的ScrollViewer和ScrollBar,总共分为两个资源字典,直接拿来引用即可:
1 ScrollBarStyle.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<SolidColorBrush
x:Key="StandardBorderBrush"
Color="DarkGray"></SolidColorBrush>
<SolidColorBrush
x:Key="StandardBrush"
Color="LightGray"></SolidColorBrush>
<SolidColorBrush
x:Key="PressedBrush"
Color="Gray"></SolidColorBrush>
<SolidColorBrush
x:Key="HoverBrush"
Color="#fefefe"></SolidColorBrush>
<SolidColorBrush
x:Key="GlyphBrush"
Color="#333333"></SolidColorBrush>
<Style
x:Key="VerticalScrollBarThumbStyle"
TargetType="{x:Type Thumb}">
<Setter
Property="IsTabStop"
Value="False" />
<Setter
Property="Focusable"
Value="False" />
<Setter
Property="Margin"
Value="1,0,1,0" />
<Setter
Property="BorderBrush"
Value="{StaticResource StandardBorderBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="{x:Type Thumb}">
<Rectangle
Width="8"
Name="ellipse"
Stroke="{StaticResource StandardBorderBrush}"
Fill="{StaticResource StandardBrush}"
RadiusX="5"
RadiusY="5"></Rectangle>
<ControlTemplate.Triggers>
<Trigger
Property="IsMouseOver"
Value="true">
<Setter
TargetName="ellipse"
Property="Fill"
Value="{StaticResource HoverBrush}"></Setter>
</Trigger>
<Trigger
Property="IsDragging"
Value="True">
<Setter
TargetName="ellipse"
Property="Fill"
Value="{StaticResource PressedBrush}"></Setter>
</Trigger> </ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style
x:Key="HorizontalScrollBarThumbStyle"
TargetType="{x:Type Thumb}">
<Setter
Property="IsTabStop"
Value="False" />
<Setter
Property="Focusable"
Value="False" />
<Setter
Property="Margin"
Value="0,1,0,1" />
<Setter
Property="BorderBrush"
Value="{StaticResource StandardBorderBrush}" />
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="{x:Type Thumb}">
<Rectangle
Height="8"
Name="ellipse"
Stroke="{StaticResource StandardBorderBrush}"
Fill="{StaticResource StandardBrush}"
RadiusX="5"
RadiusY="5"></Rectangle>
<ControlTemplate.Triggers>
<Trigger
Property="IsMouseOver"
Value="true">
<Setter
TargetName="ellipse"
Property="Fill"
Value="{StaticResource HoverBrush}"></Setter>
</Trigger>
<Trigger
Property="IsDragging"
Value="True">
<Setter
TargetName="ellipse"
Property="Fill"
Value="{StaticResource PressedBrush}"></Setter>
</Trigger> </ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style
x:Key="LineButtonUpStyle"
TargetType="{x:Type RepeatButton}">
<Setter
Property="Focusable"
Value="False" />
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="{x:Type RepeatButton}">
<Grid
Margin="1"
Height="18">
<Path
Stretch="None"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Name="Path"
Fill="{StaticResource StandardBrush}"
Data="M 0 8 L 8 8 L 4 0 Z"></Path>
</Grid>
<ControlTemplate.Triggers>
<Trigger
Property="IsMouseOver"
Value="true">
<Setter
TargetName="Path"
Property="Fill"
Value="{StaticResource HoverBrush}" />
</Trigger>
<Trigger
Property="IsPressed"
Value="true">
<Setter
TargetName="Path"
Property="Fill"
Value="{StaticResource PressedBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style
x:Key="LineButtonDownStyle"
TargetType="{x:Type RepeatButton}">
<Setter
Property="Focusable"
Value="False" />
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="{x:Type RepeatButton}">
<Grid
Margin="1"
Height="18">
<Path
Stretch="None"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Name="Path"
Fill="{StaticResource StandardBrush}"
Data="M 0 0 L 4 8 L 8 0 Z">
</Path>
</Grid>
<ControlTemplate.Triggers>
<Trigger
Property="IsMouseOver"
Value="true">
<Setter
TargetName="Path"
Property="Fill"
Value="{StaticResource HoverBrush}" />
</Trigger>
<Trigger
Property="IsPressed"
Value="true">
<Setter
TargetName="Path"
Property="Fill"
Value="{StaticResource PressedBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style
x:Key="LineButtonLeftStyle"
TargetType="{x:Type RepeatButton}">
<Setter
Property="Focusable"
Value="False" />
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="{x:Type RepeatButton}">
<Grid
Margin="1"
Width="18">
<Path
Stretch="None"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Name="Path"
Fill="{StaticResource StandardBrush}"
Data="M 0 0 L -8 4 L 0 8 Z"></Path>
</Grid>
<ControlTemplate.Triggers>
<Trigger
Property="IsMouseOver"
Value="true">
<Setter
TargetName="Path"
Property="Fill"
Value="{StaticResource HoverBrush}" />
</Trigger>
<Trigger
Property="IsPressed"
Value="true">
<Setter
TargetName="Path"
Property="Fill"
Value="{StaticResource PressedBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style
x:Key="LineButtonRightStyle"
TargetType="{x:Type RepeatButton}">
<Setter
Property="Focusable"
Value="False" />
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="{x:Type RepeatButton}">
<Grid
Margin="1"
Width="18">
<Path
Stretch="None"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Name="Path"
Fill="{StaticResource StandardBrush}"
Data="M 0 0 L 8 4 L 0 8 Z">
</Path>
</Grid>
<ControlTemplate.Triggers>
<Trigger
Property="IsMouseOver"
Value="true">
<Setter
TargetName="Path"
Property="Fill"
Value="{StaticResource HoverBrush}" />
</Trigger>
<Trigger
Property="IsPressed"
Value="true">
<Setter
TargetName="Path"
Property="Fill"
Value="{StaticResource PressedBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrollBarPageButtonStyle"
TargetType="{x:Type RepeatButton}">
<Setter
Property="IsTabStop"
Value="False" />
<Setter
Property="Focusable"
Value="False" />
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border
Background="Transparent" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate
x:Key="VerticalScrollBar"
TargetType="{x:Type ScrollBar}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition
MaxHeight="18" />
<RowDefinition
Height="*" />
<RowDefinition
MaxHeight="18" />
</Grid.RowDefinitions>
<Grid.Background>
<LinearGradientBrush
StartPoint="0,0"
EndPoint="0,1">
<GradientStop
Offset="0"
Color="#00a3d9"></GradientStop>
<GradientStop
Offset="1"
Color="#00a3d9"></GradientStop>
</LinearGradientBrush>
</Grid.Background>
<RepeatButton
Grid.Row="0"
Height="18"
Style="{StaticResource LineButtonUpStyle}"
Command="ScrollBar.LineUpCommand"> </RepeatButton> <Track
Name="PART_Track"
Grid.Row="1"
IsDirectionReversed="True">
<Track.DecreaseRepeatButton>
<RepeatButton
Command="ScrollBar.PageUpCommand"
Style="{StaticResource ScrollBarPageButtonStyle}">
</RepeatButton>
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb
Style="{StaticResource VerticalScrollBarThumbStyle}">
</Thumb>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton
Command="ScrollBar.PageDownCommand"
Style="{StaticResource ScrollBarPageButtonStyle}">
</RepeatButton>
</Track.IncreaseRepeatButton>
</Track> <RepeatButton
Grid.Row="2"
Height="18"
Style="{StaticResource LineButtonDownStyle}"
Command="ScrollBar.LineDownCommand">
</RepeatButton>
</Grid>
</ControlTemplate>
<ControlTemplate
x:Key="HorizontalScrollBar"
TargetType="{x:Type ScrollBar}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="18"></ColumnDefinition>
<ColumnDefinition
Width="*"></ColumnDefinition>
<ColumnDefinition
MaxWidth="18"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.Background>
<LinearGradientBrush
StartPoint="0,0"
EndPoint="1,0">
<GradientStop
Offset="0"
Color="#4c4c4c"></GradientStop>
<GradientStop
Offset="1"
Color="#434343"></GradientStop>
</LinearGradientBrush>
</Grid.Background>
<RepeatButton
Grid.Column="0"
Width="18"
Style="{StaticResource LineButtonLeftStyle}"
Command="ScrollBar.LineLeftCommand">
</RepeatButton> <Track
Name="PART_Track"
Grid.Column="1"
IsDirectionReversed="False">
<Track.DecreaseRepeatButton>
<RepeatButton
Command="ScrollBar.PageLeftCommand"
Style="{StaticResource ScrollBarPageButtonStyle}">
</RepeatButton>
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb
Style="{StaticResource HorizontalScrollBarThumbStyle}">
</Thumb>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton
Command="ScrollBar.PageRightCommand"
Style="{StaticResource ScrollBarPageButtonStyle}">
</RepeatButton>
</Track.IncreaseRepeatButton>
</Track>
<RepeatButton
Grid.Column="2"
Width="18"
Style="{StaticResource LineButtonRightStyle}"
Command="ScrollBar.LineRightCommand">
</RepeatButton>
</Grid>
</ControlTemplate> <Style
x:Key="AIPAnnouncementScrollBarStyle"
TargetType="{x:Type ScrollBar}">
<Setter
Property="SnapsToDevicePixels"
Value="True" />
<Setter
Property="OverridesDefaultStyle"
Value="true" />
<Style.Triggers>
<Trigger
Property="Orientation"
Value="Vertical">
<Setter
Property="Width"
Value="18" />
<Setter
Property="Height"
Value="Auto" />
<Setter
Property="Template"
Value="{StaticResource VerticalScrollBar}" />
</Trigger>
<Trigger
Property="Orientation"
Value="Horizontal">
<Setter
Property="Width"
Value="Auto" />
<Setter
Property="Height"
Value="18" />
<Setter
Property="Template"
Value="{StaticResource HorizontalScrollBar}" />
</Trigger>
</Style.Triggers>
</Style> </ResourceDictionary>
2 ScrollViewerStyle.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/AIPAnnouncement;Component/ControlViews/Sources/ScrollBarStyle.xaml">
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
<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="Auto"/>
<Setter Property="VerticalContentAlignment"
Value="Top"/>
<Setter Property="VerticalScrollBarVisibility"
Value="Auto"/>
<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 AIPAnnouncementScrollBarStyle}"
ViewportSize="{TemplateBinding ViewportHeight}"
Value="{TemplateBinding VerticalOffset}"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
<ScrollBar x:Name="PART_HorizontalScrollBar"
Maximum="{TemplateBinding ScrollableWidth}"
Orientation="Horizontal"
Style="{StaticResource AIPAnnouncementScrollBarStyle}"
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> </ResourceDictionary>
3 在主窗体中引用时,使用下面的代码即可。
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/AIPAnnouncement;Component/ControlViews/Sources/ScrollViewerStyle.xaml"></ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
收藏一个带动画效果的ScrollViewer以及ScrollBar的模板的更多相关文章
- 一个带动画效果的颜色选择对话框控件AnimatedColorPickerDialog
android4.4的日历中选择日程显示颜色的时候有一个颜色选择对话框非常漂亮,模仿他的界面我实现了一个类似的对话框,而且带有动画效果. 代码的实现可讲的地方不多,主要是采用了和AlertDialog ...
- android标题栏上面弹出提示框(二) PopupWindow实现,带动画效果
需求:上次用TextView写了一个从标题栏下面弹出的提示框.android标题栏下面弹出提示框(一) TextView实现,带动画效果, 总在找事情做的产品经理又提出了奇葩的需求.之前在通知栏显示 ...
- android标题栏下面弹出提示框(一) TextView实现,带动画效果
产品经理用的是ios手机,于是android就走上了模仿的道路.做这个东西也走了一些弯路,写一篇博客放在这里,以后自己也可用参考,也方便别人学习. 弯路: 1.刚开始本来用PopupWindow去实现 ...
- 纯CSS3带动画效果导航菜单
随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...
- Android利用温度传感器实现带动画效果的电子温度计
概述 Android利用温度传感器实现带动画效果的电子温度计. 详细 代码下载:http://www.demodashi.com/demo/10631.html 一.准备工作 需要准备一部带有温度传感 ...
- 我的Android进阶之旅------>Android利用温度传感器实现带动画效果的电子温度计
要想实现带动画效果的电子温度计,需要以下几个知识点: 1.温度传感器相关知识. 2.ScaleAnimation动画相关知识,来进行水印刻度的缩放效果. 3.android:layout_weight ...
- /*带动画效果的hover*/
<!DOCTYPE html> /*带动画效果的hover*/ <html lang="en"> <head> <meta charset ...
- 带动画效果的jQuery手风琴
带动画效果的jQuery特效手风琴是一款带动画效果的手风琴作品,非常实用,可以用在新闻列表.FAQ等模块,默认的是打开第一个选项,查看其它的时候直接点击加号按钮就展开. 源码地址:http://www ...
- 一个加载时带动画效果的ListBoxItem
今天我们来谈一下ListBoxItem这个控件,ListBoxItem是直接从ContentControl继承而来的,所以可以添加到任何具有Content属性的控件中去,常见的ListBoxItem可 ...
随机推荐
- 微信硬件平台(八) 3-0ESP8266向微信服务器请求设备绑定的用户
1调试助手 请求URL: https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=自己微信ID&a ...
- 【Windows】+ windows下在某一文件夹下按“shift+鼠标右键”打开CMD窗口
前言:没更改之前是打开的powershell窗口,超不习惯 新建一个txt文件,然后复制以下代码,然后保存为OpenCmdHere.reg 格式,然后双击即可 Windows Registry Edi ...
- 【LOJ 3049】「十二省联考 2019」字符串问题
这个D1T2绝对有毒... 首先我们构造一把反串的后缀自动机. 然后我们就需要找到每一个子串在SAM上的节点. 这个可以通过扫描线+树上倍增处理. 首先我们把所有的子串按照左端点排序, 然后从右往左扫 ...
- 洛谷 P2404 自然数的拆分问题
题目链接 https://www.luogu.org/problemnew/show/P2404 题目背景 木有...... 题目描述 任何一个大于1的自然数n,总可以拆分成若干个小于n的自然数之和. ...
- SQL SERVER按多字段查找重复的数据并删除只保留一条
由于一次操作失误,给表中插入了多条重复的数据,所以就需要删除重复的数据只保留一条,一时想不到好方法,各种查资料,终于找到了,特意写到这里,方便以后自己用~ 查询: select A.n_PatentI ...
- CF每日一练 Codeforces Round #520 (Div. 2)
比赛过程总结:过程中有事就玩手机了,后面打的状态不是很好,A题理解错题意,表明了内心不在状态,B题想法和思路都是完全正确的,但是并没有写出来,因为自己代码能力不强,思路不是特别清晰,把代码后面写乱了, ...
- 009-定时关闭弹出广告窗口 By BoAi 20190414
;~ 定时关闭弹出广告窗口 By BoAi 20190414 ; ### 参数设置段 ######################################SingleInstance,forc ...
- koa generator
Koa (koajs) -- 基于 Node.js 平台的下一代 web 开发框架 | Koajs... Koa 框架教程 koa入门 如何评价 Node.js 的koa框架?
- NoSQL是什么?
导读 NoSQL(not only sql,不仅仅是SQL),是一项全新的数据库革命性运动,泛指非关系型数据库,对于NoSQL这个新兴的名词,每个人的理解都不同.其实NoSQL一词最早出现于1998年 ...
- js总结:onClick=“return confirm()”实现确认以及取消表单的提交