您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本篇内容介绍了“在WPF中怎么实现平滑滚动”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
WPF实现滚动条还是比较方便的，只要在控件外围加上ScrollViewer即可，但美中不足的是：滚动的时候没有动画效果。在滚动的时候添加过渡动画能给我们的软件增色不少，例如Office 2013的滚动的时候支持动画看起来就舒服多了。 之前倒是研究过如何实现这个平滑滚动，不过网上的方案大部分大多数如下：
通过VisualTree找到ScrollViewer
在ScrollChanged事件中添加动画
系统默认的滚动方案，控件本身啥都不用干，完全由ScrollViewer来实现滚动。这种方式的好处是简单，但也正由于简单，控件本身完全感知不到ScorllViewer的存在，也就无法加以控制了。
将这种方式需要设置ScrollViewer的CanContentScroll为"True"才能生效，同时需要控件实现IScrollInfo接口。此时ScrollViewer只是将滚动事件通过IScrollInfo接口传递给控件，由控件本身自己去实现滚动。同时从IScrollInfo接口中读取相关的属性更新滚动条界面。
也就是说，逻辑滚动才是我们所需要的方案。由于它要求控件实现IScrollInfo接口，自行控制滚动。也就是说我们要实现自己的Panel，并且实现IScrollInfo接口。关于这个接口，MSDN上有一系列文章介绍过如何实现它：
IScrollInfo in Avalon part I
IScrollInfo in Avalon part II
IScrollInfo in Avalon part III
IScrollInfo in Avalon part IV
这个接口实现也不算麻烦，我倒没有细看这几篇文章，自己照着最后的一个例子尝试着弄了一阵子也弄出来了。实际上麻烦的地方不在于实现这个接口，而是实现Panel，我这里为了简单，直接继承了WrapPanel类，代码如下：
class MyWrapPanel : WrapPanel, IScrollInfo
{
TranslateTransform _transForm;
public MyWrapPanel()
{
_transForm = new TranslateTransform();
this.RenderTransform = _transForm;
}
#region Layout
Size _screenSize;
Size _totalSize;
protected override Size MeasureOverride(Size availableSize)
{
_screenSize = availableSize;
if (Orientation == Orientation.Horizontal)
availableSize = new Size(availableSize.Width, double.PositiveInfinity);
else
availableSize = new Size(double.PositiveInfinity, availableSize.Height);
_totalSize = base.MeasureOverride(availableSize);
return _totalSize;
}
protected override Size ArrangeOverride(Size finalSize)
{
var size = base.ArrangeOverride(finalSize);
if (ScrollOwner != null)
{
_transForm.Y = -VerticalOffset;
_transForm.X = -HorizontalOffset;
ScrollOwner.InvalidateScrollInfo();
}
return _screenSize;
}
#endregion
#region IScrollInfo
public ScrollViewer ScrollOwner { get; set; }
public bool CanHorizontallyScroll { get; set; }
public bool CanVerticallyScroll { get; set; }
public double ExtentHeight { get { return _totalSize.Height; } }
public double ExtentWidth { get { return _totalSize.Width; } }
public double HorizontalOffset { get; private set; }
public double VerticalOffset { get; private set; }
public double ViewportHeight { get { return _screenSize.Height; } }
public double ViewportWidth { get { return _screenSize.Width; } }
void appendOffset(double x, double y)
{
var offset = new Vector(HorizontalOffset + x, VerticalOffset + y);
offset.Y = range(offset.Y, 0, _totalSize.Height - _screenSize.Height);
offset.X = range(offset.X, 0, _totalSize.Width - _screenSize.Width);
HorizontalOffset = offset.X;
VerticalOffset = offset.Y;
InvalidateArrange();
}
double range(double value, double value1, double value2)
{
var min = Math.Min(value1, value2);
var max = Math.Max(value1, value2);
value = Math.Max(value, min);
value = Math.Min(value, max);
return value;
}
const double _lineOffset = 30;
const double _wheelOffset = 90;
public void LineDown()
{
appendOffset(0, _lineOffset);
}
public void LineUp()
{
appendOffset(0, -_lineOffset);
}
public void LineLeft()
{
appendOffset(-_lineOffset, 0);
}
public void LineRight()
{
appendOffset(_lineOffset, 0);
}
public Rect MakeVisible(Visual visual, Rect rectangle)
{
throw new NotSupportedException();
}
public void MouseWheelDown()
{
appendOffset(0, _wheelOffset);
}
public void MouseWheelUp()
{
appendOffset(0, -_wheelOffset);
}
public void MouseWheelLeft()
{
appendOffset(0, _wheelOffset);
}
public void MouseWheelRight()
{
appendOffset(_wheelOffset, 0);
}
public void PageDown()
{
appendOffset(0, _screenSize.Height);
}
public void PageUp()
{
appendOffset(0, -_screenSize.Height);
}
public void PageLeft()
{
appendOffset(-_screenSize.Width, 0);
}
public void PageRight()
{
appendOffset(_screenSize.Width, 0);
}
public void SetVerticalOffset(double offset)
{
this.appendOffset(HorizontalOffset, offset - VerticalOffset);
}
public void SetHorizontalOffset(double offset)
{
this.appendOffset(offset - HorizontalOffset, VerticalOffset);
}
#endregion
}基本上从代码中也能看出IScrollInfo接口的交互流程，这里就不多介绍了。
主界面代码如下：
<ItemsControl ItemsSource="{Binding}" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1" BorderBrush="Black" Margin="8" Width="150" Height="50">
<Rectangle Fill="{Binding}" />
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<local:MyWrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Template>
<ControlTemplate>
<ScrollViewer CanContentScroll="True">
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
</ItemsControl>需要注意的是，这儿需要设置<ScrollViewer CanContentScroll="True">，否则使用的不是逻辑滚动。
数据源代码如下：
var brushes = from property in typeof(Brushes).GetProperties() let value = property.GetValue(null) select value; this.DataContext = brushes.Take(100).ToArray();
由于使用了IscrollInfo接口，所有的滚动操作是自己实现的，这里我是通过设置Panel的RenderTransFrom的X，Y偏移来实现滚动操作的。运行后看上去上和WrapPanel没有什么区别，但是由于是自己控制的滚动，加上动画效果也只是分分钟的事情了，把上面代码的RenderTransFrom的X，Y硬切换改成动画切换即可：
protected override Size ArrangeOverride(Size finalSize)
{
var size = base.ArrangeOverride(finalSize);
if (ScrollOwner != null)
{
var yOffsetAnimation = new DoubleAnimation() { To = -VerticalOffset, Duration = TimeSpan.FromSeconds(0.3) };
_transForm.BeginAnimation(TranslateTransform.YProperty, yOffsetAnimation);
var xOffsetAnimation = new DoubleAnimation() { To = -HorizontalOffset, Duration = TimeSpan.FromSeconds(0.3) };
_transForm.BeginAnimation(TranslateTransform.XProperty, xOffsetAnimation);
ScrollOwner.InvalidateScrollInfo();
}
return _screenSize;
}“在WPF中怎么实现平滑滚动”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。