在WPF中实现平滑滚动

WPF实现滚动条还是比较方便的，只要在控件外围加上ScrollViewer即可，但美中不足的是：滚动的时候没有动画效果。在滚动的时候添加过渡动画能给我们的软件增色不少，例如Office 2013的滚动的时候支持动画看起来就舒服多了。 之前倒是研究过如何实现这个平滑滚动，不过网上的方案大部分大多数如下：

1. 通过VisualTree找到ScrollViewer
2. 在ScrollChanged事件中添加动画

这种方案效果并不好，以为我们的滚动很多时候都是一口气滚动好几格滚轮的，这个时候上一个动画还没有结束，下一个动画就来了，反而还出现了卡顿的感觉，并且网上的一些算法大部分还都会导致偏移错位。

趁着这两天有点时间，就研究了一下ScorllViewer，从MSDN文档中看到，它是支持两种滚动方式的：

物理滚动：

系统默认的滚动方案，控件本身啥都不用干，完全由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类，代码如下： 

  1     class MyWrapPanel : WrapPanel, IScrollInfo

  2     {

  3         TranslateTransform _transForm;

  4         public MyWrapPanel()

  5         {

  6             _transForm = new TranslateTransform();

  7             this.RenderTransform = _transForm;

  8         }

  9 

 10         #region Layout

 11 

 12         Size _screenSize;

 13         Size _totalSize;

 14 

 15         protected override Size MeasureOverride(Size availableSize)

 16         {

 17             _screenSize = availableSize;

 18 

 19             if (Orientation == Orientation.Horizontal)

 20                 availableSize = new Size(availableSize.Width, double.PositiveInfinity);

 21             else

 22                 availableSize = new Size(double.PositiveInfinity, availableSize.Height);

 23 

 24             _totalSize = base.MeasureOverride(availableSize);

 25             return _totalSize;

 26         }

 27 

 28         protected override Size ArrangeOverride(Size finalSize)

 29         {

 30             var size = base.ArrangeOverride(finalSize);

 31             if (ScrollOwner != null)

 32             {

 33                 _transForm.Y = -VerticalOffset;

 34                 _transForm.X = -HorizontalOffset;

 35                 

 36                 ScrollOwner.InvalidateScrollInfo();

 37             }

 38             return _screenSize;

 39         }

 40         #endregion

 41 

 42         #region IScrollInfo

 43 

 44         public ScrollViewer ScrollOwner { get; set; }

 45         public bool CanHorizontallyScroll { get; set; }

 46         public bool CanVerticallyScroll { get; set; }

 47 

 48         public double ExtentHeight { get { return _totalSize.Height; } }

 49         public double ExtentWidth { get { return _totalSize.Width; } }

 50 

 51         public double HorizontalOffset { get; private set; }

 52         public double VerticalOffset { get; private set; }

 53 

 54         public double ViewportHeight { get { return _screenSize.Height; } }

 55         public double ViewportWidth { get { return _screenSize.Width; } }

 56 

 57         void appendOffset(double x, double y)

 58         {

 59             var offset = new Vector(HorizontalOffset + x, VerticalOffset + y);

 60 

 61             offset.Y = range(offset.Y, 0, _totalSize.Height - _screenSize.Height);

 62             offset.X = range(offset.X, 0, _totalSize.Width - _screenSize.Width);

 63 

 64             HorizontalOffset = offset.X;

 65             VerticalOffset = offset.Y;

 66 

 67             InvalidateArrange();

 68         }

 69 

 70         double range(double value, double value1, double value2)

 71         {

 72             var min = Math.Min(value1, value2);

 73             var max = Math.Max(value1, value2);

 74 

 75             value = Math.Max(value, min);

 76             value = Math.Min(value, max);

 77 

 78             return value;

 79         }

 80 

 81 

 82         const double _lineOffset = 30;

 83         const double _wheelOffset = 90;

 84 

 85         public void LineDown()

 86         {

 87             appendOffset(0, _lineOffset);

 88         }

 89 

 90         public void LineUp()

 91         {

 92             appendOffset(0, -_lineOffset);

 93         }

 94 

 95         public void LineLeft()

 96         {

 97             appendOffset(-_lineOffset, 0);

 98         }

 99 

100         public void LineRight()

101         {

102             appendOffset(_lineOffset, 0);

103         }

104 

105         public Rect MakeVisible(Visual visual, Rect rectangle)

106         {

107             throw new NotSupportedException();

108         }

109 

110         public void MouseWheelDown()

111         {

112             appendOffset(0, _wheelOffset);

113         }

114 

115         public void MouseWheelUp()

116         {

117             appendOffset(0, -_wheelOffset);

118         }

119 

120         public void MouseWheelLeft()

121         {

122             appendOffset(0, _wheelOffset);

123         }

124 

125         public void MouseWheelRight()

126         {

127             appendOffset(_wheelOffset, 0);

128         }

129 

130         public void PageDown()

131         {

132             appendOffset(0, _screenSize.Height);

133         }

134 

135         public void PageUp()

136         {

137             appendOffset(0, -_screenSize.Height);

138         }

139 

140         public void PageLeft()

141         {

142             appendOffset(-_screenSize.Width, 0);

143         }

144 

145         public void PageRight()

146         {

147             appendOffset(_screenSize.Width, 0);

148         }

149 

150         public void SetVerticalOffset(double offset)

151         {

152             this.appendOffset(HorizontalOffset, offset - VerticalOffset);

153         }

154 

155         public void SetHorizontalOffset(double offset)

156         {

157             this.appendOffset(offset - HorizontalOffset, VerticalOffset);

158         }

159         #endregion

160     }

View Code

基本上从代码中也能看出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;

    }

对于其它的Panel，如Grid，DockPanel等，基本上也可以按照这种方式实现，IScrollInfo接口处基本上可以保持不变，只需要重写MeasureOverride和ArrangeOverride两个函数即可。一个特殊的控件是StackPanel，由于它本身已经实现了IScrollInfo接口，也就是说它本身就有自身的自绘制滚动的方案，并且没有提供接口在覆盖自身的自绘制滚动，因此我们需要自己写一个StackPanel，好在实现StackPanel并不难，由于篇幅有限，这里我懒得继续写了，读者朋友自己实现吧。至于那些非Panel的控件，实现就更简单了，也留着读者朋友自己实现吧。