介绍 看见…… 平滑的滑动,动画滚动条!辉煌! !不是吗? ! 也许你们很多人都有这样的想法，然后你们就去了谷歌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