这里介绍一个带动画效果的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. P1913 L国的战斗之伞兵(广搜BFS)

    就是在输入的时候把 ‘o’ 的放在队里,然后,直接BFS就可以了.感觉是水题. #include<iostream> #include<queue> using namespa ...

  2. .NET Core微服务实施之Consul服务发现与治理

    .NET Core微服务实施之Consul服务发现与治理   Consul官网:https://www.consul.io Consul下载地址:https://www.consul.io/downl ...

  3. DeeplabV3+ 在自己环境下跑出现的错误

    1. no module named 'deeplab' 解决办法:把 models/research 和 models/research/slim 加到环境变量path中不管用,需要在 cmd 中运 ...

  4. switch and checkbox

    import 'package:flutter/material.dart'; void main()=>runApp(MyApp()); class MyApp extends Statele ...

  5. EntityFramework Core并发深挖详解,一纸长文,你准备好看完了吗?

    前言 之前有关EF并发探讨过几次,但是呢,博主感觉还是有问题,为什么会觉得有问题,其实就是理解不够透彻罢了,于是在项目中都是用的存储过程或者SQL语句来实现,利用放假时间好好补补EF Core并发的问 ...

  6. 深入浅出Java反射

    反射,它就像是一种魔法,引入运行时自省能力,赋予了 Java 语言令人意外的活力,通过运行时操作元数据或对象,Java 可以灵活地操作运行时才能确定的信息 这里笔者就深入浅出总结下Java反射,若有不 ...

  7. 微信支付异常:appid and openid not match

    上周调试微信小程序支付时遇到的问题,在调用统一下单接口获取微信支付的相关参数时,报了这么一个错误:appid and openid not match. 字面意思很容易理解,就是appid与openi ...

  8. 实现可调整宽高的DIV(左右拖动和上下拖动)

    前言 本例是在React中实现,不过改一改通过原生js也很好实现,另外兼容性也做到了IE9.(IE8讲道理也是可以的). 首先看一下需要实现的需求: 要拖动图中的白色横条调整绿色和蓝色区域的高度,要拖 ...

  9. Jmeter性能与接口自动化实战

    本书可以作为工具书,也可以作为jmeter疑难杂症的良方!各位同学在jmeter学习中遇到的常见难题,在本文中都可以检索到答案. 大纲如下: ☞点击这里,获取本书

  10. 跨语言调用Hangfire定时作业服务

    跨语言调用Hangfire定时作业服务 背景 Hangfire允许您以非常简单但可靠的方式执行后台定时任务的工作.内置对任务的可视化操作.非常方便. 但令人遗憾的是普遍都是业务代码和hagnfire服 ...