WPF 滚动条控件ScrollViewer的使用及自定义滚动条控件（一）

WPF 滚动条控件ScrollViewer的使用及自定义滚动条控件（一）

首先看一下两种空间的运行效果：

左边是自定义滑条控件，右边是自带的滑条控件；

**滑条使用方法：**我们在ScrollViewer滑条控件中放一个TextBlock控件，其内容可以自动换行显示，然后设置TextBlock的高度大于ScrollViewer的高度后，右侧就会出现滑条；

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Width="200" Height="100">
                <TextBlock Width="100" Height="250" Text="明月几时有，把酒问青天？不知天上宫阙，今夕是何年？我欲乘风归去，又恐琼楼玉宇。高处不胜寒，起舞弄清影，何时在人间。转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆。人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。" TextWrapping="Wrap"></TextBlock>
</ScrollViewer>

========================================================================
自定义滑条的代码：
在项目中添加一个自定义控件：ZScrollViewer；
ZScrollViewer.cs代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WPF0319
{
    
    public class ZScrollViewer : ScrollViewer
    {
        #region Private属性

        #endregion

        #region 依赖属性定义

        #endregion

        #region 依赖属性set get

        public double VerticalOffsetEx
        {
            get { return (double)GetValue(VerticalOffsetExProperty); }
            set { SetValue(VerticalOffsetExProperty, value); }
        }

        public static readonly DependencyProperty VerticalOffsetExProperty =
            DependencyProperty.Register("VerticalOffsetEx", typeof(double), typeof(ZScrollViewer), new PropertyMetadata(0d, VerticalOffsetExChangedCallback));

        private static void VerticalOffsetExChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            ZScrollViewer scrollViewer = d as ZScrollViewer;
            scrollViewer.ScrollToVerticalOffset((double)e.NewValue);
        }

        #endregion

        #region Constructors
        static ZScrollViewer()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(ZScrollViewer), new FrameworkPropertyMetadata(typeof(ZScrollViewer)));
        }
        #endregion

        #region Override方法

        #endregion

        #region Private方法
        public void aa()
        {

        }
        #endregion
    }
}

Themes/Generic.xaml代码：

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WPF0319"
    xmlns:sys="clr-namespace:System;assembly=mscorlib">


    <sys:Double x:Key="ScrollBar.Thumb.Width">6</sys:Double>

    <SolidColorBrush x:Key="ScrollThumb_Background">#90686868</SolidColorBrush>
    <SolidColorBrush x:Key="ScrollThumb_MouseOver_Background">#686868</SolidColorBrush>

    <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="IsTabStop" Value="false" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Grid>
                        <Rectangle x:Name="thumbRect"
                                   Fill="{StaticResource ScrollThumb_Background}"
                                   RadiusX="3" RadiusY="3" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="thumbRect" Property="Fill" Value="{StaticResource ScrollThumb_MouseOver_Background}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="HorizontalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Focusable" Value="false" />
        <Setter Property="IsTabStop" Value="false" />
        <Setter Property="Opacity" Value="0" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Rectangle Width="{TemplateBinding Width}"
                               Height="{TemplateBinding Height}"
                               Fill="{TemplateBinding Background}" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="VerticalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Focusable" Value="false" />
        <Setter Property="IsTabStop" Value="false" />
        <Setter Property="Opacity" Value="0" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Rectangle Width="{TemplateBinding Width}"
                               Height="{TemplateBinding Height}"
                               Fill="{TemplateBinding Background}" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="for_scrollbar" TargetType="{x:Type ScrollBar}">
        <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false" />
        <Setter Property="Stylus.IsFlicksEnabled" Value="false" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Margin" Value="0,1,1,1" />
        <Setter Property="Width" Value="{StaticResource ScrollBar.Thumb.Width}" />
        <Setter Property="MinWidth" Value="5" />
        <Setter Property="Opacity" Value="0" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ScrollBar}">
                    <Grid x:Name="Bg" SnapsToDevicePixels="true">
                        <Track x:Name="PART_Track" IsDirectionReversed="true"
                               IsEnabled="{TemplateBinding IsMouseOver}">
                            <Track.DecreaseRepeatButton>
                                <RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Style="{StaticResource VerticalScrollBarPageButton}" />
                            </Track.DecreaseRepeatButton>
                            <Track.IncreaseRepeatButton>
                                <RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Style="{StaticResource VerticalScrollBarPageButton}" />
                            </Track.IncreaseRepeatButton>
                            <Track.Thumb>
                                <Thumb Style="{StaticResource ScrollBarThumb}" />
                            </Track.Thumb>
                        </Track>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Horizontal">
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="Margin" Value="1,0,6,1" />
                <Setter Property="Height" Value="5" />
                <Setter Property="MinHeight" Value="5" />
                <Setter Property="Width" Value="Auto" />
                <Setter Property="Opacity" Value="0" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ScrollBar}">
                            <Grid x:Name="Bg" SnapsToDevicePixels="true">
                                <Track x:Name="PART_Track" IsEnabled="{TemplateBinding IsMouseOver}">
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton Command="{x:Static ScrollBar.PageLeftCommand}" Style="{StaticResource HorizontalScrollBarPageButton}" />
                                    </Track.DecreaseRepeatButton>
                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton Command="{x:Static ScrollBar.PageRightCommand}" Style="{StaticResource HorizontalScrollBarPageButton}" />
                                    </Track.IncreaseRepeatButton>
                                    <Track.Thumb>
                                        <Thumb Style="{StaticResource ScrollBarThumb}" />
                                    </Track.Thumb>
                                </Track>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

    <!--  ScrollViewer  -->
    <Style TargetType="{x:Type local:ZScrollViewer}">
        <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 local:ZScrollViewer}">
                    <Border x:Name="Bd" Background="Transparent"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            SnapsToDevicePixels="True">
                        <Grid Background="{TemplateBinding Background}">
                            <ScrollContentPresenter Margin="{TemplateBinding Padding}"
                                                    ContentTemplate="{TemplateBinding ContentTemplate}"
                                                    Cursor="{TemplateBinding Cursor}" />
                            <ScrollBar x:Name="PART_VerticalScrollBar" HorizontalAlignment="Right"
                                       Maximum="{TemplateBinding ScrollableHeight}"
                                       Orientation="Vertical"
                                       Style="{StaticResource for_scrollbar}"
                                       ViewportSize="{TemplateBinding ViewportHeight}"
                                       Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                                       Value="{TemplateBinding VerticalOffset}" />
                            <ScrollBar x:Name="PART_HorizontalScrollBar" VerticalAlignment="Bottom"
                                       Maximum="{TemplateBinding ScrollableWidth}"
                                       Orientation="Horizontal"
                                       Style="{StaticResource for_scrollbar}"
                                       ViewportSize="{TemplateBinding ViewportWidth}"
                                       Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                                       Value="{TemplateBinding HorizontalOffset}" />
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <!--<EventTrigger RoutedEvent="ScrollChanged">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Duration="0:0:1" Storyboard.TargetName="PART_VerticalScrollBar" Storyboard.TargetProperty="Opacity" To="1" />
                                    <DoubleAnimation BeginTime="0:0:1" Duration="0:0:1" Storyboard.TargetName="PART_VerticalScrollBar" Storyboard.TargetProperty="Opacity" To="0" />
                                    <DoubleAnimation Duration="0:0:1" Storyboard.TargetName="PART_HorizontalScrollBar" Storyboard.TargetProperty="Opacity" To="1" />
                                    <DoubleAnimation BeginTime="0:0:1" Duration="0:0:1" Storyboard.TargetName="PART_HorizontalScrollBar" Storyboard.TargetProperty="Opacity" To="0" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>-->
                        <EventTrigger RoutedEvent="MouseEnter" SourceName="Bd">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="PART_VerticalScrollBar" Storyboard.TargetProperty="Opacity" To="1" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="MouseLeave" SourceName="Bd">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation BeginTime="0:0:0" Duration="0:0:0.3" Storyboard.TargetName="PART_VerticalScrollBar" Storyboard.TargetProperty="Opacity"
                                                     To="0" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="MouseEnter" SourceName="Bd">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="PART_HorizontalScrollBar" Storyboard.TargetProperty="Opacity" To="1" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="MouseLeave" SourceName="Bd">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation BeginTime="0:0:1" Duration="0:0:0.5" Storyboard.TargetName="PART_HorizontalScrollBar" Storyboard.TargetProperty="Opacity"
                                                     To="0" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

主窗体代码：

<Window x:Class="WPF0319.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPF0319"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="600">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid>
            <local:ZScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" Width="200" Height="100" >
                <TextBlock Width="100" Height="250" Text="明月几时有，把酒问青天？不知天上宫阙，今夕是何年？我欲乘风归去，又恐琼楼玉宇。高处不胜寒，起舞弄清影，何时在人间。转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆。人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。" TextWrapping="Wrap">
                </TextBlock>
            </local:ZScrollViewer>
        </Grid>
        <Grid Grid.Column="1">
            <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Width="200" Height="100">
                <TextBlock Width="100" Height="250" Text="明月几时有，把酒问青天？不知天上宫阙，今夕是何年？我欲乘风归去，又恐琼楼玉宇。高处不胜寒，起舞弄清影，何时在人间。转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆。人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。" TextWrapping="Wrap"></TextBlock>
            </ScrollViewer>
        </Grid>
    </Grid>
</Window>