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="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>

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

java获取其他窗体上的控件,怎么获取从引用自定义panel控件的frame里获取它的控件的值...
如何获取从引用自定义panel控件的frame里获取它的控件的值? 以下是自定义的panel控件: package snooker; import java.awt.Component; import ...
WPF 自定义DataGrid控件样式
WPF 自定义DataGrid控件样式样式一: 样式代码: <Style TargetType="DataGrid">& ...
通过WPF自定义ListBox控件实现ListBoxItem中开关及删除功能
通过WPF自定义ListBox控件实现类似CAD图层关闭与删除功能文章目录通过WPF自定义ListBox控件实现类似CAD图层关闭与删除功能前言一.程序界面设计二.代码部分 2.1前端代码 ...
WPF 中使用附加属性，将任意 UI 元素或控件裁剪成圆形（椭圆）
原文:WPF 中使用附加属性,将任意 UI 元素或控件裁剪成圆形(椭圆) 版权声明:本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可.欢迎转载.使用.重新发布,但务必保 ...
【C#/WPF】用Thumb做可拖拽的UI控件
[C#/WPF]用Thumb做可拖拽的UI控件原文:[C#/WPF]用Thumb做可拖拽的UI控件需求:简单的可拖拽的图片使用System.Windows.Controls.Primitives ...
WPF自定义动画控件风机
原文:WPF自定义动画控件风机一:创建WPF项目二:在项目下添加文件Themes,在此文件下添加新项 "资源词典"取名为 Generic.xaml 注意大小写,之前遇到因为 ...
WPF自定义仪表盘控件
WPF自定义仪表盘控件一.前言二.功能实现一.前言在学习和工作中使用WPF时,都离不开自定义控件的使用,今天分享一个自己在学习过程中使用到的一个自定义仪表盘控件,感觉挺不错的,在这里分享给大家 ...
Delphi FMX怎样控制Listview和继承自TCustomPresentedScrollBox的控件在MsWindows和Linux下滚动条的宽窄等
Delphi FMX怎样控制Listview和继承自TCustomPresentedScrollBox的控件在MsWindows和Linux下滚动条的宽窄等 procedure TfrmGoodsDe ...
WPF数据可视化控件（一） LED风格数字控件
原帖地址:https://blog.csdn.net/zhuo_wp/article/details/81561190 资源源码:https://download.csdn.net/download/ ...

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

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

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

最新文章

热门文章