讓 ScrollViewer 的滾動帶上動畫 原文:讓 ScrollViewer 的滾動帶上動畫

版權(quán)聲明：本作品采用知識共享署名-非商業(yè)性使用-相同方式共享 4.0 國際許可協(xié)議進(jìn)行許可。歡迎轉(zhuǎn)載、使用、重新發(fā)布，但務(wù)必保留文章署名呂毅（包含鏈接：http://blog.csdn.net/wpwalter/），不得用于商業(yè)目的，基于本文修改后的作品務(wù)必以相同的許可發(fā)布。如有任何疑問，請與我聯(lián)系（walter.lv@qq.com）。 https://blog.csdn.net/WPwalter/article/details/78858779

WPF 的 ScrollViewer 沒有水平滾動和垂直滾動的屬性 HorizontalScrollOffset VerticalScrollOffset，只有水平滾動和垂直滾動的方法 ScrollToHorizontalOffset ScrollToVerticalOffset，那么怎么給滾動過程加上動畫呢？

---

既然沒有屬性，那我們加個屬性好了，反正附加屬性就是用來干這個事兒的。

namespace Walterlv {public static class ScrollViewerBehavior{public static readonly DependencyProperty HorizontalOffsetProperty = DependencyProperty.RegisterAttached("HorizontalOffset", typeof(double), typeof(ScrollViewerBehavior), new UIPropertyMetadata(0.0, OnHorizontalOffsetChanged));public static void SetHorizontalOffset(FrameworkElement target, double value) => target.SetValue(HorizontalOffsetProperty, value);public static double GetHorizontalOffset(FrameworkElement target) => (double)target.GetValue(HorizontalOffsetProperty);private static void OnHorizontalOffsetChanged(DependencyObject target, DependencyPropertyChangedEventArgs e) => (target as ScrollViewer)?.ScrollToHorizontalOffset((double)e.NewValue);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);} }

我們在屬性的變更通知中調(diào)用了 ScrollToHorizontalOffset 和 ScrollToVerticalOffset 方法。這樣，便能夠通過動畫改變屬性的方式來調(diào)用這兩個方法。

那么現(xiàn)在我們就加上動畫：

<Storyboard x:Key="ScrollStoryboard"><DoubleAnimation Storyboard.TargetName="ScrollViewer" Storyboard.TargetProperty="(walterlv:ScrollViewerBehavior.HorizontalOffset)"From="0" To="500" Duration="0:0:0.6"><DoubleAnimation.EasingFunction><CircleEase EasingMode="EaseOut"/></DoubleAnimation.EasingFunction></DoubleAnimation> </Storyboard>

添加一些用于測試的按鈕和 ScrollViewer：

<ScrollViewer Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" Grid.ColumnSpan="3" x:Name="ScrollViewer"HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible"><Image Source="https://walterlv.github.io/static/posts/2017-12-09-21-19-50.png" Width="1000"/> </ScrollViewer><Button Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" x:Name="ConnectionDestination"VerticalAlignment="Bottom" Height="50" Content="動畫目標(biāo)" Panel.ZIndex="1"><Button.Triggers><EventTrigger RoutedEvent="Button.Click"><BeginStoryboard Storyboard="{StaticResource ScrollStoryboard}"/></EventTrigger></Button.Triggers> </Button>

現(xiàn)在，我們點擊按鈕，就可以看到 ScrollViewer 的滾動動畫生效了，如下：

---

額外的，如果希望這個附加屬性能夠附加到 ListView 或者 ListBox 中，則需要修改 ScrollViewerBehavior 類，然后在 OnHorizontalOffsetChanged 和 OnVerticalOffsetChanged 方法中判斷 ListView 和 ListBox，然后在其中尋找可視元素子級 ScrollViewer。

posted on 2018-09-21 22:02 NET未來之路 閱讀(...) 評論(...) 編輯 收藏

轉(zhuǎn)載于:https://www.cnblogs.com/lonelyxmas/p/9688694.html

《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的让 ScrollViewer 的滚动带上动画的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。