这里介绍一个带动画效果的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>

　　

最新文章

  1. SocketServer
  2. 【UE】关于UE的一个真实案例
  3. AgileEAS.NET SOA 中间件平台5.2版本下载、配置学习(四)：开源的Silverlight运行容器的编译、配置
  4. [MongoDB]Mongo基本使用：
  5. Android View的onTouchEvent和OnTouch区别
  6. .NET破解之谷歌地图下载助手-睿智版
  7. 实现带查询功能的Combox控件
  8. MySQL open table
  9. bzoj 1059 [ZJOI2007]矩阵游戏（完美匹配）
  10. BST 二叉搜索树
  11. Python 安装matplotlib,six,dateutil,pyparsing 完整过程
  12. SQL Server 2017 安装过程中的一点说明（有点意思）
  13. NYOJ 炫舞家st
  14. [LeetCode] Partition to K Equal Sum Subsets 分割K个等和的子集
  15. PHP全栈学习笔记3
  16. linux 开机进入initramfs无法开机
  17. 神经网络优化算法如何选择Adam，SGD
  18. protobuf GetExtension
  19. Java 容器源码分析之Queue
  20. jmeter之数据库

热门文章

  1. 利用os.system 截取终端日志输出 存为txt
  2. 解决.NET Web API生成的Help无Controller说明&amp;服务端接收不到请求
  3. 【js】横/纵向无缝滚动
  4. Linux 使用nexus搭建maven私服
  5. ASM problem : ORA-15001: diskgroup &quot;DGROUP1&quot; does not exist or is not mounted ORA-15040: diskgroup is incomplete
  6. python3 练习题 day04
  7. fastJson 之 JSONPath使用
  8. idea 2018.1 for mac JRebel破解
  9. face recognition[翻译][深度人脸识别:综述]
  10. 关于 js tofixed（）保留小数位数问题