收藏一个带动画效果的ScrollViewer以及ScrollBar的模板
Posted lonelyxmas
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了收藏一个带动画效果的ScrollViewer以及ScrollBar的模板相关的知识，希望对你有一定的参考价值。
原文:收藏一个带动画效果的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的模板的主要内容，如果未能解决你的问题，请参考以下文章