这里介绍一个带动画效果的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的模板的更多相关文章

  1. 一个带动画效果的颜色选择对话框控件AnimatedColorPickerDialog

    android4.4的日历中选择日程显示颜色的时候有一个颜色选择对话框非常漂亮,模仿他的界面我实现了一个类似的对话框,而且带有动画效果. 代码的实现可讲的地方不多,主要是采用了和AlertDialog ...

  2. android标题栏上面弹出提示框(二) PopupWindow实现,带动画效果

    需求:上次用TextView写了一个从标题栏下面弹出的提示框.android标题栏下面弹出提示框(一) TextView实现,带动画效果,  总在找事情做的产品经理又提出了奇葩的需求.之前在通知栏显示 ...

  3. android标题栏下面弹出提示框(一) TextView实现,带动画效果

    产品经理用的是ios手机,于是android就走上了模仿的道路.做这个东西也走了一些弯路,写一篇博客放在这里,以后自己也可用参考,也方便别人学习. 弯路: 1.刚开始本来用PopupWindow去实现 ...

  4. 纯CSS3带动画效果导航菜单

    随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...

  5. Android利用温度传感器实现带动画效果的电子温度计

    概述 Android利用温度传感器实现带动画效果的电子温度计. 详细 代码下载:http://www.demodashi.com/demo/10631.html 一.准备工作 需要准备一部带有温度传感 ...

  6. 我的Android进阶之旅------>Android利用温度传感器实现带动画效果的电子温度计

    要想实现带动画效果的电子温度计,需要以下几个知识点: 1.温度传感器相关知识. 2.ScaleAnimation动画相关知识,来进行水印刻度的缩放效果. 3.android:layout_weight ...

  7. /*带动画效果的hover*/

    <!DOCTYPE html> /*带动画效果的hover*/ <html lang="en"> <head> <meta charset ...

  8. 带动画效果的jQuery手风琴

    带动画效果的jQuery特效手风琴是一款带动画效果的手风琴作品,非常实用,可以用在新闻列表.FAQ等模块,默认的是打开第一个选项,查看其它的时候直接点击加号按钮就展开. 源码地址:http://www ...

  9. 一个加载时带动画效果的ListBoxItem

    今天我们来谈一下ListBoxItem这个控件,ListBoxItem是直接从ContentControl继承而来的,所以可以添加到任何具有Content属性的控件中去,常见的ListBoxItem可 ...

随机推荐

  1. 解决vaio s13笔记本 ubuntu重启卡屏问题

    终端 sudo gedit /etc/default/grub 找到GRUB_CMDLINE_LINUX_DEFAULT="quiet splash",添加内核启动参数reboot ...

  2. spring boot 注解方式 idea报could not autowire

    File-Project Structure 页面 Facets下删掉 Spring(直接右键Delete) 这个解答是对的.并不会降低安全性!!因为创建项目的时候,都是先创建空项目再创建web mo ...

  3. WiFi-ESP8266入门http(3-4)网页一键配网(1若为普通wifi直连 2若为西电网页认证自动网页post请求连接)+网页按钮灯控+MQTT通信

    网页一键配网(1若为普通wifi直连  2若为西电网页认证自动网页post请求连接)+网页按钮灯控+MQTT通信 工程连接:https://github.com/Dongvdong/ESP8266_H ...

  4. Python 包内的导入问题(绝对导入和相对导入)

    基本概念 Python 中的包,即包含 __init__.py 文件的文件夹. 对于 Python 的包内导入,即包内模块导入包内模块,存在绝对导入和相对导入问题. 普通 Python 模块的搜索路径 ...

  5. Springboot实现跨域请求

    之所以需要用到跨域请求,目的在于现在的Java项目,几乎基本上都前后端分离,除一些较老的维护项目外(通常是单体或者是maven多模块形式,不过本质上还是将前端放在webapps下). SpringBo ...

  6. 初学Python—列表和元组

    一.什么是列表 列表是一系列数据的集合 二.列表的引用 首先定义一个列表 names=["alex","bob","alice"," ...

  7. Generative Adversarial Nets[iGAN]

    本文来自<Generative Visual Manipulation on the Natural Image Manifold>,是大神Jun-Yan Zhu在2016年9月的作品. ...

  8. SQL Server中UPDATE和DELETE语句结合INNER/LEFT/RIGHT/FULL JOIN的用法

    在SQL Server中,UPDATE和DELETE语句是可以结合INNER/LEFT/RIGHT/FULL JOIN来使用的. 我们首先在数据库中新建两张表: [T_A] CREATE TABLE ...

  9. JavaEE学习之Maven配置文件pom.xml详解(转)

    一.引言 (本文转载自:http://blog.csdn.net/longeremmy/article/details/9670619) 使用maven有一些时间了,一直没有好好将pom配置文件每个节 ...

  10. Groovy语言学习--语法基础(5)

    至此groovy语言学习-语法基础就结束了,新的工作已经安排下来,要干活了. 对groovy了解到一定程度之后就可以在java项目中对其进行引入了.为此新建了一个微型的项目,个人觉得千言万语不如代码实 ...