WPFのScrollViewerやScrollBarのスクロール位置を同期させる

突然ですが、複数のScrollViewerでスクロール位置を同期させたいことってありませんか？

画面に入りきらないような大きな領域を画面に表示するのにScrollViewerはとても便利です。そして、それは自動でスクロールバーの表示のON/OFFからスクロール制御までやってくれるので、何も考えずにスクロールしたいコンテンツをScrollViewerの中に突っ込めばたいていの場合は片付きます。

そこで、複数のScrollViewerでスクロール位置を同期させたいことがしばしば出てきますよね。
例えば、2つの画像の比較ソフトを作るとき、2つの画像は同時にスクロールさせたいですよね。個別にそれぞれスクロールさせたんじゃ使い勝手が悪すぎます。
そのほかにも、例えばExcelの「ウィンドウ枠を固定」機能みたいな感じで、何かしらの表を表示させるとき、タイトル領域とそのテーブル領域でそれぞれ縦方向のみスクロールを同期したり、横方向のみスクロールを同期させたいことなんかがあると思います（ListViewとかを使えよっていうツッコミはとりあえず置いておいて）。

さて、この手の機能の実現をしようと思ったとき、WPFerならXAMLでScrollPosみたいなプロパティを2つのScrollViewer間でバインディングしてしまえばいいだろうっていう発想になるかと思います。
そもそもスクロール位置なんてUI上の問題のはずですから、ビジネスロジック等から分離してXAML内で済ませてしまいたいですよね。
そこでいろいろ調べてみるとScrollBarには確かにValueプロパティが存在してこれらをバインディングすることで複数のScrollBar間でのスクロール位置の同期はできますが、ScrollViewerにはそういったプロパティは無いんですね…。いや、正確にはContentVerticalOffsetやContentHorizontalOffsetといったスクロール位置を取得できるプロパティはあります。しかし、これはセッターがprivateになっており、これを通してスクロール位置を更新することはできません。スクロール位置を変えるにはScrollToVerticalOffset()やScrollToHorizontalOffset()等のメソッドを呼び出さなければなりません。XAMLからメソッドを呼び出すのはとても難しいですね。

簡単な解決方法としては、コードビハインドでScrollViewerやScrollBarのイベントをキャッチして、その値を更新し同期させるということでしょう。しかし、XAMLからどのコントロール同士が同期しているのかが見通せなくなりますし、コードビハインドも、例えば4つのScrollViewerのうち2つずつが同期する場合などは本当にややこしいコードになってしまいそうです。こういうのは望ましくないですね。


そこでBehaviorがあるんですよ。


BehaviorはViewの振る舞いをC#等で記述できる仕組みです。コードビハインドほど特定のウィンドウやコントロールに密接にくっついているものではないので、ある程度の幅を持たせることができます。さらに、BehaviorはDependencyObjectを継承しているので依存プロパティを持たせられ、非常にXAMLとの親和性も高いです。

というわけで、まず、使う側から考えてみます。

1 2 3 4 5 6

<ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden">     <!-- 中略 -->     <i:Interaction.Behaviors>         <b:ScrollSyncronizingBehavior ScrollGroup="Group1" Orientation="Vertical" />     </i:Interaction.Behaviors> </ScrollViewer>

こんな風にScrollViewerにスクロールを同期させるBehaviorを設定してあげます。そして、そこにScrollGroupでグループ名を指定し、グループ名が同じScrollViewerやScrollBarは全部スクロールを同期するようにしています。Orientationはスクロールを同期させる向きです。縦横両方向とも同期したければ、このScrollSyncronizingBehaviorを縦と横2つ設定してやればいいでしょう。
こうして、複数個所のScrollViewerやScrollBarが同期させられれば便利ですね。

そのBehaviorの実装がこれになります。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136

public class ScrollSyncronizingBehavior : Behavior<Control> {     static Dictionary<string, List<Control>> SyncGroups = new Dictionary<string, List<Control>>();       protected override void OnAttached()     {         base.OnAttached();           AddSyncGroup(ScrollGroup);     }       protected override void OnDetaching()     {         base.OnDetaching();           RemoveSyncGroup(ScrollGroup);     }       /// <summary>     /// スクロールグループ     /// </summary>     public string ScrollGroup     {         get { return (string)this.GetValue(ScrollGroupProperty); }         set { this.SetValue(ScrollGroupProperty, value); }     }     private static readonly DependencyProperty ScrollGroupProperty = DependencyProperty.Register(         "ScrollGroup", typeof(string), typeof(ScrollSyncronizingBehavior), new FrameworkPropertyMetadata((d, e) => {             ScrollSyncronizingBehavior me = (ScrollSyncronizingBehavior)d;               me.RemoveSyncGroup((string)e.OldValue);             me.AddSyncGroup((string)e.NewValue);         })     );       /// <summary>     /// スクロールの向き     /// </summary>     public Orientation Orientation     {         get { return (Orientation)this.GetValue(OrientationProperty); }         set { this.SetValue(OrientationProperty, value); }     }     private static readonly DependencyProperty OrientationProperty = DependencyProperty.Register(         "Orientation", typeof(Orientation), typeof(ScrollSyncronizingBehavior), new FrameworkPropertyMetadata()     );       /// <summary>     /// 同期グループに追加するメソッド     /// </summary>     /// <param name="GroupName">グループ名</param>     /// <returns>成功したかどうか</returns>     bool AddSyncGroup(string GroupName)     {         if(!string.IsNullOrEmpty(ScrollGroup) && (this.AssociatedObject is ScrollViewer || this.AssociatedObject is ScrollBar)) {             if(!SyncGroups.ContainsKey(GroupName))                 SyncGroups.Add(GroupName, new List<Control>());             SyncGroups[GroupName].Add(this.AssociatedObject);               ScrollViewer sv = this.AssociatedObject as ScrollViewer;             ScrollBar sb = this.AssociatedObject as ScrollBar;               if(sv != null)                 sv.ScrollChanged += ScrollViewerScrolled;             if(sb != null)                 sb.ValueChanged += ScrollBarScrolled;                           return true;         } else             return false;     }       /// <summary>     /// 同期グループから削除するメソッド     /// </summary>     /// <param name="GroupName">グループ名</param>     /// <returns>成功したかどうか</returns>     bool RemoveSyncGroup(string GroupName)     {         if(!string.IsNullOrEmpty(ScrollGroup) && (this.AssociatedObject is ScrollViewer || this.AssociatedObject is ScrollBar)) {             ScrollViewer sv = this.AssociatedObject as ScrollViewer;             ScrollBar sb = this.AssociatedObject as ScrollBar;                           if(sv != null)                 sv.ScrollChanged -= ScrollViewerScrolled;             if(sb != null)                 sb.ValueChanged -= ScrollBarScrolled;               SyncGroups[GroupName].Remove(this.AssociatedObject);             if(SyncGroups[GroupName].Count == 0)                 SyncGroups.Remove(GroupName);                           return true;         } else             return false;     }       /// <summary>     /// ScrollViewerの場合の変更通知イベントハンドラ     /// </summary>     /// <param name="sender"></param>     /// <param name="e"></param>     void ScrollViewerScrolled(object sender, ScrollChangedEventArgs e)     {         UpdateScrollValue(sender, Orientation == Orientation.Horizontal ? e.HorizontalOffset : e.VerticalOffset);     }       /// <summary>     /// ScrollBarの場合の変更通知イベントハンドラ     /// </summary>     /// <param name="sender"></param>     /// <param name="e"></param>     void ScrollBarScrolled(object sender, RoutedPropertyChangedEventArgs<double> e)     {         UpdateScrollValue(sender, e.NewValue);     }           /// <summary>     /// スクロール値を設定するメソッド     /// </summary>     /// <param name="sender">スクロール値を更新してきたコントロール</param>     /// <param name="NewValue">新しいスクロール値</param>     void UpdateScrollValue(object sender, double NewValue)     {         IEnumerable<Control> others = SyncGroups[ScrollGroup].Where(p => p != sender);           foreach(ScrollBar sb in others.OfType<ScrollBar>().Where(p => p.Orientation == Orientation))             sb.Value = NewValue;         foreach(ScrollViewer sv in others.OfType<ScrollViewer>()) {             if(Orientation == Orientation.Horizontal)                 sv.ScrollToHorizontalOffset(NewValue);             else                 sv.ScrollToVerticalOffset(NewValue);         }                    } }

BehaviorはBehavior<T>を継承しますが、このTはBehaviorを設定するクラスになります。普段は特定のクラスを入れることが多いですが、今回はScrollViewerとScrollBarの両方に対応させるために、その共通の親クラスであるControlクラスを指定しています。

OnAttached()とOnDetaching()は、このBehaviorが特定のコントロールにアタッチ/デタッチされたときに呼ばれるメソッドです。ここで登録作業をしてあげます。
一方で、依存関係プロパティのScrollGroupでも、グループ名が変更されたときにその対応をそちらでしています。

グループ名の管理はstaticなDictionaryでやっていて、グループ名をキーに同じグループのインスタンスをListで保持するようにしています。そして、ScrollViewerならScrollChanged、ScrollBarならValueChangedイベントをハンドルするようにして、そこで同じグループ内の全インスタンスに対してスクロールをするメソッドを呼び出しています。


ちなみにですが、ScrollBarコントロールはスクロールバーのつまみの大きさを制御してやる必要があります。画面に対してコンテンツの大きさが大きければつまみは小さくなりますよね。
これはBehaviorをわざわざ使わなくてもXAML内のバインディングで可能です。

1 2 3

<ScrollViewer Name="scrollViewer1" /> <ScrollBar Orientation="Vertical" Maximum="{Binding ElementName=scrollViewer1, Path=ScrollableHeight}" Minimum="0"            ViewportSize="{Binding ElementName=scrollViewer1, Path=ActualHeight}" />

ScrollViewerに適当な名前を付けてあげて、それをScrollBarのほうで参照しています。使うのはMaximum、Minimum、ViewportSizeです。MaximumとMinimumはスクロールするコンテンツの最大座標と最小座標で、ViewportSizeはそれを表示する画面領域のサイズです。なので、例えば縦方向ならばScrollViewerの上記のようなプロパティに対応しています。まあ、あとはSmallChangeやLargeChangeの設定をしてあげれば良いでしょう。

このようにScrollViewerとScrollBarのスクロール値までプロパティで同期できれば申し分なかったのですが、それはできなかったのでこうやってBehaviorで実現してみました。
BehaviorでScrollViewerのスクロール位置をセットもゲットもできる依存プロパティを用意してバインディングすればいいんじゃないか？と思う人もいるかもしれませんが、なぜかうまくいきませんでした。 なぜでしょうね。僕のコードのどこかが悪かったんでしょうかね。

試しに2枚の画像のスクロールを同期させるソフトを書いてみました。

2枚の画像が並んでいます。どのスクロールバーでも動かせますし、ScrollViewer上でマウスホイールでスクロールしてもタッチパネルでスクロールしても全部連動します。

一応、このプロジェクトもうｐしておきました。
参考にどうぞ。

ScrollSync.zip (1,184KB)