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

简介: 原文:收藏一个带动画效果的ScrollViewer以及ScrollBar的模板     这里介绍一个带动画效果的ScrollViewer和ScrollBar,总共分为两个资源字典,直接拿来引用即可:      1 ScrollBarStyle.
原文: 收藏一个带动画效果的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>

  

目录
相关文章
|
Windows
Winform控件优化之背景透明那些事1:Button控件等背景透明
WinForm不支持真正的透明,其控件透明的实现都是背景颜色设置和对应位置的父控件背景相同。 Winform中控件的背景透明只有三种:Button控件的透明、其他控件的透明...
2600 0
Winform控件优化之背景透明那些事1:Button控件等背景透明
|
9月前
CSS3 animation 全屏图片切换动画
CSS3 animation 全屏图片切换动画
34 0
|
11月前
|
前端开发
CSS背景图片自适应大小
CSS背景图片自适应大小
80 0
|
前端开发
CSS通过transition 实现的鼠标滑过边框线条动画特效原理
CSS通过transition 实现的鼠标滑过边框线条动画特效原理
CSS通过transition 实现的鼠标滑过边框线条动画特效原理
|
前端开发
CSS实现背景颜色循环播放效果
颜色的循环播放效果应该如何去实现呢,细想下来,其实不需要用什么高端的技术,只需要使用css基本的animation动画效果就可以办得到,网上也有很多例子,接下来我们来看看这其中是如何实现吧。
372 0
UWP Button添加圆角阴影(二)
原文:UWP Button添加圆角阴影(二) 原文:UWP Button添加圆角阴影(二) 阴影 对于阴影呢,WindowsCommunityToolkit中已经有封装好的DropShadowPanel啦,只要引用Microsoft.Toolkit.Uwp.UI.Controls这个Nuget包就可以使用啦。
893 0
|
前端开发 数据可视化
UWP Button添加圆角阴影(三)
原文:UWP Button添加圆角阴影(三) 原文:UWP Button添加圆角阴影(三) Composition DropShadow是CompositionAPI中的东西,使用Storyboard设置某个属性,就是频繁的触发put_xxx()方法,效率远远不如使用CompositionAnimation。
865 0
UWP Button添加圆角阴影(一)
原文:UWP Button添加圆角阴影(一) 原文:UWP Button添加圆角阴影(一) 众所周知,17763之前的UWP控件,大部分是没有圆角属性的;而阴影也只有17763中的ThemeShadow可以直接在xaml中使用,之前的版本只能用DropShadow,用法极其别扭。
1119 0
|
存储 开发工具
UWP Background过渡动画
原文:UWP Background过渡动画 首先说两件事: 1、大爆炸我还记着呢,先欠着吧。。。 2、博客搬家啦,新地址:https://blog.ultrabluefire.cn/ ==========下面是正文========== 前些日子看到Xaml Controls Gallery的ToggleTheme过渡非常心水,大概是这样的: 在17134 SDK里写法如下: 1 2 3 4 5 这和我原本的思路完全不同。
770 0