收藏一个带动画效果的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可 ...
随机推荐
- md5之守株待兔
第一个实验吧的题目,不太会做,参考了很多大佬的经验,最后发现这个题目很简单,大概这就是入门的感觉吧!如果你多次尝试点开题目给的连接,就会发现,系统的密钥一直会变,可是我的密钥却保持一个,这就让我们联想 ...
- 关于.NET Web API InputStream接收不了数据的问题
问题描述:1.网站向WebApi(以下简称Api) Post数据: 2.Api的过滤器先处理验证,通过HttpContext.Current.Request.InputStream获取网站Post过来 ...
- 转://RMAN跨平台可传输表空间和数据库
参考链接: http://blog.itpub.net/23135684/viewspace-776048/ http://blog.sina.com.cn/s/blog_69e7b8d7010164 ...
- MYSQL动态查询拼接的表名的SQL脚本实现(MYSQL动态执行SQL脚本)
可以使用MYSQL的预处理逻辑:https://dev.mysql.com/doc/refman/8.0/en/sql-syntax-prepared-statements.html 例如: pr ...
- Bean named '*' must be of type [*], but was actually of type []
本地Service 名字和调用别的maven项目Service重名
- python实现命令行解析的argparse的使用
参考https://docs.python.org/3.6/library/argparse.html argparse模块使编写用户友好的命令行界面变得很容易.程序定义了它需要什么参数,argpar ...
- Java-Method类常用方法详解
一.Method类的定义Method类位于 java.lang.reflect 包中,主要用于在程序运行状态中,动态地获取方法信息二.Method类的常用方法 1.getAnnotatedRetur ...
- Luogu3605 [USACO17JAN]Promotion Counting晋升者计数
Luogu3605 [USACO17JAN]Promotion Counting晋升者计数 给一棵 \(n\) 个点的树,点 \(i\) 有一个权值 \(a_i\) .对于每个 \(i\) ,求 \( ...
- Leetcode 1. Two Sum (Python)
refer to https://blog.csdn.net/linfeng886/article/details/79772348 Description Given an array of int ...
- argparse模块
argparse模块是的编写用户友好的命令行接口非常容易.程序只需定义好它要求的参数,然后argparse将负责如何从sys.argv中解析出这些参数.argparse模块还会自动生成帮助和使用信息并 ...