一个带动画效果的ScrollViewer以及ScrollBar的模板

    在WPF中ScrollViewer是一个非常重要的控件，它可以实现当界面超过视图范围时候通过拖动ScrollBar来显示其它部分， 这里介绍一个带动画效果的ScrollViewer和ScrollBar，它可以实现自动隐藏控件，当鼠标移动到上面的时候通过动画来显示当前的ScrollBar,在看这个具体的资源文件之前我们先来通过一个动图来看看它实现的最终效果。

一  动画效果

二  控件样式

　　整个样式大的分为两个资源文件，分别是ScrollBarStyle和ScrollViewerStyle两个部分，具体的实现过程请参考下面的两个资源文件。

     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>