?WPF開發者QQ群：?340500857? | 微信群 -> 進入公眾號主頁?加入組織

歡迎轉發、分享、點贊、在看，謝謝~。??

前言

? ? ? 看了看原生UWP的ScrollViewer，滑動很流暢(例如 開始菜單)，但是WPF自帶的ScrollViewer滾動十分生硬..

突發奇想，今天來實現一個流暢滾動的ScrollViewer.

01

—

效果預覽

效果預覽（更多效果請下載源碼體驗）：

02

—

代碼如下

一、ScrollViewerBehavior.cs 代碼如下

using System.Windows; using System.Windows.Controls;namespace WPFDevelopers.Controls {public static class ScrollViewerBehavior{public static readonly DependencyProperty VerticalOffsetProperty = DependencyProperty.RegisterAttached("VerticalOffset", typeof(double), typeof(ScrollViewerBehavior), new UIPropertyMetadata(0.0, OnVerticalOffsetChanged));public static void SetVerticalOffset(FrameworkElement target, double value) => target.SetValue(VerticalOffsetProperty, value);public static double GetVerticalOffset(FrameworkElement target) => (double)target.GetValue(VerticalOffsetProperty);private static void OnVerticalOffsetChanged(DependencyObject target, DependencyPropertyChangedEventArgs e) => (target as ScrollViewer)?.ScrollToVerticalOffset((double)e.NewValue);} }

二、ScrollViewerAnimation.cs?代碼如下?

using System; using System.Windows.Controls; using System.Windows.Input; using System.Windows.Media.Animation;namespace WPFDevelopers.Controls {public class ScrollViewerAnimation : ScrollViewer{//記錄上一次的滾動位置private double LastLocation = 0;//重寫鼠標滾動事件protected override void OnMouseWheel(MouseWheelEventArgs e){double WheelChange = e.Delta;//可以更改一次滾動的距離倍數 (WheelChange可能為正負數!)double newOffset = LastLocation - (WheelChange * 2);//Animation并不會改變真正的VerticalOffset(只是它的依賴屬性) 所以將VOffset設置到上一次的滾動位置 (相當于銜接上一個動畫)ScrollToVerticalOffset(LastLocation);//碰到底部和頂部時的處理if (newOffset < 0)newOffset = 0;if (newOffset > ScrollableHeight)newOffset = ScrollableHeight;AnimateScroll(newOffset);LastLocation = newOffset;//告訴ScrollViewer我們已經完成了滾動e.Handled = true;}private void AnimateScroll(double ToValue){//為了避免重復，先結束掉上一個動畫BeginAnimation(ScrollViewerBehavior.VerticalOffsetProperty, null);DoubleAnimation Animation = new DoubleAnimation();Animation.EasingFunction = new CubicEase() { EasingMode = EasingMode.EaseOut };Animation.From = VerticalOffset;Animation.To = ToValue;//動畫速度Animation.Duration = TimeSpan.FromMilliseconds(800);//考慮到性能，可以降低動畫幀數//Timeline.SetDesiredFrameRate(Animation, 40);BeginAnimation(ScrollViewerBehavior.VerticalOffsetProperty, Animation);}} }

使用方法:直接創建 <ScrollViewerAnimation/>

如果是在ListBox中，可以通過修改模板的方式，把<ScrollViewer/>換成ScrollViewerAnimation即可.

三、ScrollViewerAnimationExample.xaml?代碼如下?

<wpfdev:ScrollViewerAnimation Width="200" MaxHeight="300"ScrollViewer.VerticalScrollBarVisibility="Hidden"><ItemsControl ItemsSource="{Binding NavigateMenuModelList}"><ItemsControl.ItemTemplate><DataTemplate><Border Background="{StaticResource SuccessSolidColorBrush}"BorderThickness="0,0,0,.3" BorderBrush="{StaticResource WhiteSolidColorBrush}"><TextBlock Text="{Binding Name}" Padding="10" FontSize="{StaticResource NormalFontSize}"Foreground="{StaticResource WhiteSolidColorBrush}"/></Border></DataTemplate></ItemsControl.ItemTemplate><ItemsControl.ItemsPanel><ItemsPanelTemplate><VirtualizingStackPanel/></ItemsPanelTemplate></ItemsControl.ItemsPanel></ItemsControl></wpfdev:ScrollViewerAnimation>

源碼地址

github：https://github.com/yanjinhuagood/WPFDevelopers.git

gitee：https://gitee.com/yanjinhua/WPFDevelopers.git

WPF開發者QQ群：?340500857?

blogs：?https://www.cnblogs.com/yanjinhua

Github：https://github.com/yanjinhuagood

出處：https://www.cnblogs.com/yanjinhua

版權：本作品采用「署名-非商業性使用-相同方式共享 4.0 國際」許可協議進行許可。

轉載請著名作者 出處 https://github.com/yanjinhuagood

總結

以上是生活随笔為你收集整理的WPF 如何流畅地滚动ScrollViewer的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。