(WPF)簡單的方法來建立一個動畫/平滑滾動條
介紹 看見…… 平滑的滑動,動畫滾動條!輝煌! !不是嗎? ! 也許你們很多人都有這樣的想法，然後你們就去了谷歌it! 當然，您認為在WPF中製作這樣的東西應該很容易! …在經歷了一些可悲和絕望的時刻後，你將面對一個未知的世界:混亂的程式碼、隨機的答案、新的控制器和……! 好吧，不要放棄!還有一種非常簡單的方法來建立一個完美的形狀! 結果/ GIF 30fps 為什麼現在不應該使用自定義控制元件? 如果你是專家: 忘記它!是的，我只是在開玩笑:你可以建立任何你想要的! 一個自定義控制，甚至一個連環殺手機器人Rexter!: D 如果你不是專家: 所有的主題都掛載在WPF的一個特定資源上，如果你建立自己的自定義控制元件，它不支援常規資源，你必須自己一個一個地新增它們! 建立基地 首先，建立一個視窗，應用你的主題(mahapps, materialDesign, ModernUI等)。 //我使用我的自定義主題 視窗XAML 隱藏,收縮,複製Code
<Windowx:Class="Tutorial_Projects.SmoothScroll_Window"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:Tutorial_Projects"Title="Easiest Way to Create a Animated/Smoothed Scroll Bar | By NeoTrix2000"Height="338.866"Width="553.846"ResizeMode="NoResize"WindowStartupLocation="CenterScreen"> <GridBackground="#FF232323"> <ScrollViewerMargin="0"> <RichTextBoxForeground="#FF959595"BorderBrush="{x:Null}"Background="#FF212121"IsReadOnly="True"IsHitTestVisible="False"> <FlowDocument> <Paragraph> <RunForeground="#FF0E95AA"FontWeight="Bold"FontSize="18"/> </Paragraph> <Paragraph> <RunForeground="#FF0E95AA"FontWeight="Bold"FontSize="18"Text="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque"/> </Paragraph> <Paragraph> <RunForeground="#FF0E95AA"FontWeight="Bold"FontSize="18"Text=" "/> <RunText="laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Sed ut perspiciatis unde omnis iste natus error sit "/> </Paragraph> <Paragraph> <RunText="voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus "/> </Paragraph> <Paragraph> <RunText="maiores alias consequatur aut perferendis doloribus asperiores repellat. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint"/> </Paragraph> </FlowDocument> </RichTextBox> </ScrollViewer> </Grid> </Window>
記住在scrollview內的所有東西上使用“自動”高度。 進入下一階段! 現在，你只需要複製scrollview到2 scrollview !將第一個重新命名為“main_scroll”，第二個重新命名為“scroll_animator”。現在，將scroll_animator的子元素更改為一個空組。將empty組的Height屬性繫結到main_scroll內的RichTextBox的ActualHeight屬性。做得好! 時間程式碼! 在開始本節之前，您需要知道WPF標準的scrollview不支援通過程式碼直接設定Offset中的值，它是一個類似於將其設定為1,2,3的函式!真糟糕!然後我們需要手動新增偏移量屬性，這真的很容易建立! 將類新增到專案根目錄中。新增物品比;類在;將這段程式碼新增到你的類中。儲存它! ScrollViewFixer.cs 隱藏,收縮,複製Code
//// After Namespace public class ScrollViewFixer: ScrollViewer { public static DependencyProperty v_offsetProperty = DependencyProperty.Register ("v_offset", typeof(double), typeof(ScrollViewFixer), new PropertyMetadata(new PropertyChangedCallback(OnVerticalChanged))); public static DependencyProperty h_offset = DependencyProperty.Register ("h_offset", typeof(double), typeof(ScrollViewFixer), new PropertyMetadata(new PropertyChangedCallback(OnHorizontalChanged))); private static void OnVerticalChanged(DependencyObject ss_dependency, DependencyPropertyChangedEventArgs ss_evenargs) { ScrollViewFixer viewer = ss_dependency as ScrollViewFixer; viewer.ScrollToVerticalOffset((double) ss_evenargs.NewValue); } private static void OnHorizontalChanged(DependencyObject ss_dependency, DependencyPropertyChangedEventArgs ss_evenargs) { ScrollViewFixer viewer = ss_dependency as ScrollViewFixer; viewer.ScrollToHorizontalOffset((double) ss_evenargs.NewValue); } public double CurrentHorizontalOffset { get { return (double) this.GetValue(h_offset); } set { this.SetValue(h_offset, value); } } public double v_offset { get { return (double) this.GetValue(v_offsetProperty); } set { this.SetValue(v_offsetProperty, value); } } }
+記住，將此程式碼新增到您的cs檔名稱空間。 現在讓我們完成它……更改main_scroll如下: 替換: 隱藏,ScrollViewer x:Name="main_scroll" Margin="0"> : 隱藏,複製Code<fixed_scrl:ScrollViewFixer x:Name="main_scroll" Margin="0,0,18,0" VerticalScrollBarVisibility =“隱藏”比; 在xmlns中在視窗頂部新增名稱空間: 隱藏,複製Codexmlns: fixed_scrl = " clr-namespace: Scroll_Fixer_Namespace” 記住“Scroll_Fixer_Namespace”是您的“ScrollViewFixer”的名稱空間。cs”檔案。 隱藏,複製Codenamespace Scroll_Fixer_Namespace { 公共類ScrollViewFixer: ScrollViewer {… 將scroll_animator調整為“滾動條”框的大小。動畫的時間! 過程: 向scroll_animator新增一個ScrollChanged事件。建立動畫程式碼(不要忘記新增使用System.Windows.Media.Animation;): & lt; scroll_animator>ScrollChanged事件 隱藏,複製Code
private void scroll_animator_ScrollChanged(object sender, ScrollChangedEventArgs e) { PowerEase _ease = new PowerEase(); _ease.EasingMode = EasingMode.EaseOut; _ease.Power = 8; DoubleAnimation scrollanim = new DoubleAnimation (scroll_animator.VerticalOffset, TimeSpan.FromSeconds(2)); scrollanim.EasingFunction = _ease; main_scroll.BeginAnimation (Scroll_Fixer_Namespace.ScrollViewFixer.v_offset_property, scrollanim); }
我是PowerEase的超級粉絲。如果你想要，把它改為普通的容易的結果更平滑。 做得好!現在，如果你改變你的滾動條，它是平滑的，非常棒!但車:| 現在我們要解決… 修復Scrollview問題 A>修復Mousewheel滾動 將PreviewMouseWheel新增到main_scroll。禁用處理程式並將其連線到動畫器。這就像: 隱藏,MouseWheel_Fix(物件傳送者，MouseWheelEventArgs e) {e。處理= true;} 額外的模式 隱藏,MouseWheel_Fix(物件傳送者，MouseWheelEventArgs e) { e。處理= true; int Division_Unit = 5; scroll_animator.ScrollToVerticalOffset (scroll_animator。VerticalOffset + ((e。Delta * -1) / Division_Unit)); } B>解決動態內容 如果你正在使用一個動態框架元素，如ListBox, Editbox, Textbox, RichText, Stackpanel，你需要設定滾動條更新新增的東西，改變… 建立一個函式UpdateAnimator()到你的程式碼後面: 隱藏,UpadeUpdateAnimator() { scroll_animator.ScrollToEnd (); } 現在將SizeChanged新增到main_scroll並插入UpadeUpdateAnimator();它! 隱藏,複製Codeprivate void Content_Size_Change(物件傳送者，SizeChangedEventArgs e) { if (this.IsLoaded){///啟動修復 UpadeUpdateAnimator (); } } 在主ScrollView內容的每次更新中，只需使用一點UpadeUpdateAnimator();工作後! 我們完成了!享受您的驚人，平滑，動畫滾動檢視!! 歷史 2020年1月4日:初版 本文轉載於：http://www.diyabc.com/frontweb/news12281.html