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 getpublic 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 Constructorsstatic ZScrollViewer(){DefaultStyleKeyProperty.OverrideMetadata(typeof(ZScrollViewer), new FrameworkPropertyMetadata(typeof(ZScrollViewer)));}#endregion#region Override方法#endregion#region Private方法public void aa(){}#endregion}}

Themes/Generic.xaml代码：

<ResourceDictionaryxmlns="/winfx//xaml/presentation"xmlns:x="/winfx//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="/winfx//xaml/presentation"xmlns:x="/winfx//xaml"xmlns:d="/expression/blend/"xmlns:mc="/markup-compatibility/"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>