二つのListView　スクロールを同期したい

前提・実現したいこと

Grid内にListViewを二つ並べ、ListViewにスクロールが表示されるまでListView.ItemsにTextBlockを追加しました。
このListView二つのスクロールを、同時に動かしたいです。

発生している問題・エラーメッセージ

エラーメッセージは特になし
左のListViewのスクロールを動かせば右のListViewのスクロールが同時に動くようにし、
右も同様の動きをさせたい
Teratailの、質問投稿画面の文章を打ち込む部分と、右のプレビュー画面みたいな感じです。

該当のソースコード

XAML
1<Window x:Class="WpfApplication1.MainWindow"
2        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4        Title="MainWindow" Height="300" Width="525">
5    <Grid>
6        <Grid.ColumnDefinitions>
7            <ColumnDefinition/>
8            <ColumnDefinition/>
9        </Grid.ColumnDefinitions>
10        <ListView Grid.Column="0">
11            <ListView.Items>
12                <TextBlock Text="a"/>
13                <TextBlock Text="b"/>
14                <TextBlock Text="c"/>
15                <TextBlock Text="d"/>
16                <TextBlock Text="e"/>
17                <TextBlock Text="f"/>
18                <TextBlock Text="g"/>
19                <TextBlock Text="h"/>
20                <TextBlock Text="i"/>
21                <TextBlock Text="j"/>
22                <TextBlock Text="k"/>
23                <TextBlock Text="l"/>
24                <TextBlock Text="m"/>
25                <TextBlock Text="n"/>
26                <TextBlock Text="o"/>
27                <TextBlock Text="p"/>
28                <TextBlock Text="q"/>
29                <TextBlock Text="r"/>
30                <TextBlock Text="s"/>
31                <TextBlock Text="t"/>
32                <TextBlock Text="u"/>
33                <TextBlock Text="v"/>
34                <TextBlock Text="w"/>
35                <TextBlock Text="x"/>
36                <TextBlock Text="y"/>
37                <TextBlock Text="z"/>
38            </ListView.Items>
39        </ListView>
40        <ListView Grid.Column="1">
41            <ListView.Template>
42                <ControlTemplate>
43                    <ItemsPresenter/>
44                </ControlTemplate>
45            </ListView.Template>
46            <ListView.Items>
47                <TextBlock Text="a"/>
48                <TextBlock Text="b"/>
49                <TextBlock Text="c"/>
50                <TextBlock Text="d"/>
51                <TextBlock Text="e"/>
52                <TextBlock Text="f"/>
53                <TextBlock Text="g"/>
54                <TextBlock Text="h"/>
55                <TextBlock Text="i"/>
56                <TextBlock Text="j"/>
57                <TextBlock Text="k"/>
58                <TextBlock Text="l"/>
59                <TextBlock Text="m"/>
60                <TextBlock Text="n"/>
61                <TextBlock Text="o"/>
62                <TextBlock Text="p"/>
63                <TextBlock Text="q"/>
64                <TextBlock Text="r"/>
65                <TextBlock Text="s"/>
66                <TextBlock Text="t"/>
67                <TextBlock Text="u"/>
68                <TextBlock Text="v"/>
69                <TextBlock Text="w"/>
70                <TextBlock Text="x"/>
71                <TextBlock Text="y"/>
72                <TextBlock Text="z"/>
73            </ListView.Items>
74        </ListView>
75    </Grid>
76</Window>

試したこと

見たサイト
[WPF] 複数のListViewのスクロールバーを同期させたい。
→ズバリこれと思いましたが、ビヘイビアというものの書き方が分からなかった。
→コードビハインドで書こうと思ったが、スクロールのイベントを取得する方法が分からなかった。
→Themes:ListBoxChromeが分からなかった。
→回答の「ListViewのScrollViewerを無くして、ListViewをScrollViewerを囲む」というのも検討したが、
<listView>の中に

XAML
1    <ListView.Template>
2        <ControlTemplate>
3            <ItemsPresenter/>
4        </ControlTemplate>
5    </ListView.Template>

を書いてみたが何も起きなかった。

WPFのScrollViewerやScrollBarのスクロール位置を同期させる
→ScrollViewerでのやり方だったので分からなかった。
→「ListViewとかを使えよ」という文がありますが、これは「ScrollViewerはスクロールの同期が難しいが、ListViewなら簡単に出来る」という意図なのか？

補足情報（FW/ツールのバージョンなど）

.NET Framework 4.5.1

参考にできるサイトでも構いませんので、皆さんの力をお借り出来ればと思います。
どうぞよろしくお願いいたします。

現在のソースコード

xaml
1<Window x:Class="WpfApplication1.MainWindow"
2        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4        Title="MainWindow" Height="300" Width="525">
5    <Grid>
6        <Grid.ColumnDefinitions>
7            <ColumnDefinition/>
8            <ColumnDefinition/>
9        </Grid.ColumnDefinitions>
10        <!--右のスクロールを動かす→左のスクロールが同期する、という動作は未実装です。-->
11        <!--現在、仮にMouseUpイベントを拾っていますが、これでよいのでしょうか？-->
12        <!--ほぼほぼ想定通りの動きをするのですが、どれかItemsをクリックしないと反応してくれないのが心残り…-->
13        <ListView Name="LeftListView" Grid.Column="0" MouseUp="LeftListView_MouseUp">
14            <ListView.Items>
15                <TextBlock Text="a"/>
16                <TextBlock Text="b"/>
17                <TextBlock Text="c"/>
18                <TextBlock Text="d"/>
19                <TextBlock Text="e"/>
20                <TextBlock Text="f"/>
21                <TextBlock Text="g"/>
22                <TextBlock Text="h"/>
23                <TextBlock Text="i"/>
24                <TextBlock Text="j"/>
25                <TextBlock Text="k"/>
26                <TextBlock Text="l"/>
27                <TextBlock Text="m"/>
28                <TextBlock Text="n"/>
29                <TextBlock Text="o"/>
30                <TextBlock Text="p"/>
31                <TextBlock Text="q"/>
32                <TextBlock Text="r"/>
33                <TextBlock Text="s"/>
34                <TextBlock Text="t"/>
35                <TextBlock Text="u"/>
36                <TextBlock Text="v"/>
37                <TextBlock Text="w"/>
38                <TextBlock Text="x"/>
39                <TextBlock Text="y"/>
40                <TextBlock Text="z"/>
41            </ListView.Items>
42        </ListView>
43        <ListView Name="RightListView" Grid.Column="1">
44            <ListView.Items>
45                <TextBlock Text="a"/>
46                <TextBlock Text="b"/>
47                <TextBlock Text="c"/>
48                <TextBlock Text="d"/>
49                <TextBlock Text="e"/>
50                <TextBlock Text="f"/>
51                <TextBlock Text="g"/>
52                <TextBlock Text="h"/>
53                <TextBlock Text="i"/>
54                <TextBlock Text="j"/>
55                <TextBlock Text="k"/>
56                <TextBlock Text="l"/>
57                <TextBlock Text="m"/>
58                <TextBlock Text="n"/>
59                <TextBlock Text="o"/>
60                <TextBlock Text="p"/>
61                <TextBlock Text="q"/>
62                <TextBlock Text="r"/>
63                <TextBlock Text="s"/>
64                <TextBlock Text="t"/>
65                <TextBlock Text="u"/>
66                <TextBlock Text="v"/>
67                <TextBlock Text="w"/>
68                <TextBlock Text="x"/>
69                <TextBlock Text="y"/>
70                <TextBlock Text="z"/>
71            </ListView.Items>
72        </ListView>
73    </Grid>
74</Window>

C#
1// MainWindow.xaml.cs
2using System;
3using System.Collections.Generic;
4using System.Linq;
5using System.Windows;
6using System.Windows.Automation;
7using System.Windows.Automation.Peers;
8using System.Windows.Automation.Provider;
9using System.Windows.Controls;
10using System.Windows.Media;
11
12namespace WpfApplication1
13{
14    /// <summary>
15    /// MainWindow.xaml の相互作用ロジック
16    /// </summary>
17    public partial class MainWindow : Window
18    {
19        public MainWindow()
20        {
21            InitializeComponent();
22        }
23
24        private void LeftListView_MouseUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
25        {
26            var left = LeftListView;
27            var scroll = left.Descendants<ScrollViewer>().FirstOrDefault();
28
29            scroll.ScrollChanged += scroll_ScrollChanged;
30        }
31
32        private void scroll_ScrollChanged(object sender, ScrollChangedEventArgs e)
33        {
34            var right = RightListView;
35            var scroll = right.Descendants<ScrollViewer>().FirstOrDefault();
36
37            double scrollValue = e.VerticalOffset;
38            scroll.ScrollToVerticalOffset(scrollValue);
39        }
40    }
41}
42

行動規範の内容に同意します

回答2件

ベストアンサー

ScrollViewer は ListBox のビジュアルツリーの中に隠れています。
参考: VisualTreeの子孫要素を取得する

VisualTreeHelper を使って ScrollViewer を取得してください。

投稿2018/06/11 04:00

gaya-K

総合スコア449

heart_crimson

2018/06/12 02:40

コメントありがとうございます。返信が遅くなってしまい申し訳ございません。もう少し質問してもよろしいでしょうか。 ①「ListBoxのビジュアルツリーの中に」とありますが、「ListViewのビジュアルツリーの中に」と読み替えて問題ないでしょうか？　それとも私が勘違いしているのでしょうか？ ②ListViewをスクロールした時のイベントを取得するにはどうすればいいのでしょうか？ご返信いただければ幸いです。どうぞよろしくお願いいたします。

gaya-K

2018/06/12 04:04

①すみません私の間違いです。読み替えて下さい。 ②なぜ ScrollViewer 取得させようとしたかというと、ScrollViewer に ScrollChanged イベントや水平垂直方向のオフセット情報があるからです。

heart_crimson

2018/06/12 06:52

返信ありがとうございます。私の理解が足らず、お手数をおかけし申し訳ないのですが、②についてもう少し質問よろしいでしょうか。 ListViewからScrollViewerを取得したり、ScrollChangedイベントの発火など、ほぼほぼ想定通りに動くことは確認したのですが、 ListViewのイベントを拾い、コードビハインドで書いているのですが、 ListViewの何のイベントを発生させたらよいのでしょうか？現在、仮としてMouseUpイベントを拾っているのですが、これでよいのでしょうか？　もっと適切なイベントはありますか？ (意図通り伝わっているか不安なので質問欄に現在のコードを記載しました。ご確認いただければ幸いです。)

gaya-K

2018/06/12 09:21

スマホなのでコードかけなくてすみません。面倒なので一部略語で書きます。 1. MainWindow.ContentRendered イベントハンドラを xaml に追加。 2. 上記ハンドラ内で LV からそれぞれ SV を取得 & プライベートフィールドに格納。さらに各 SV に ScrollChanged ハンドラを設定。 3. SV1 のイベントハンドラで SV2 にオフセット設定。 SV2 のハンドラはその逆。添字を付けたいだけなら VM をちょっと改造して、DataTemplate を使うほうがいいですね。確かそんな過去の質問にあった様な。。。

heart_crimson

2018/06/13 04:51

理想通りの動作まで仕上げることが出来ました。この度は誠にありがとうございました！添字につきましては、また別の質問に挙げるかもしれません。その時はよろしくお願いいたします。

行動規範の内容に同意します

InitializeComponent();直後だとまだScrollViewerが存在していないので駄目ですね。。。

MouseUpでは一度クリックしないといけませんが、MouseMoveであればクリックせずとも発火させられます。
ただ、毎回MouseMoveのたびにイベントを追加してしまうと、1度のMouseMoveで大量のscroll_ScrollChangedがコールされてしまうので、一度だけ登録するような仕組みが理想です。

適当に考えたもの：

csharp
1        private ScrollViewer lastLeftScrollView;
2
3        private void LeftListView_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
4        {
5            var scroll = LeftListView.Descendants<ScrollViewer>().FirstOrDefault();
6            if (scroll != null)
7            {
8                if (!Object.ReferenceEquals(lastLeftScrollView, scroll))
9                {
10                    lastLeftScrollView = scroll;
11                    scroll.ScrollChanged += scroll_ScrollChanged;
12                }
13            }
14        }

本題とは逸れますが、2つのリストビューを並べて同期させるよりは、一つのリストビューに、見た目２列分のアイテムを配置した方が実装しやすいのではないかと思いました。
（諸事情によりそういった案は却下されたのだと思いますが(^_^;)）

投稿2018/06/12 08:10

takabosoft

総合スコア8356

heart_crimson

2018/06/12 08:52

コメントありがとうございます。お察しの通り、MouseUpだとクリックしないと発火されないのが悩みでした。 MouseMoveで1度だけ呼び出せばよかったのですね。ありがとうございます。一つのリストビューに…という話ですが、元々はそう実装してほしかったです…。 ListViewにNo.表示が欲しくて作ってもらったら、「何かGridの中にListViewが並んでるんですけど…一緒に動いてくれないんですけど…」となって、今回の質問に踏み切りました。今になってListViewに連番を振りたいという質問をした方が楽だったのかなとか思い始めました…。

heart_crimson

2018/06/13 04:52 編集

理想通りの動作まで仕上げることが出来ました。この度は誠にありがとうございました！ ListView内に見た目2列文のアイテム、につきましては、また別の質問に挙げるかもしれません。その時はよろしくお願いいたします。

行動規範の内容に同意します

あなたの回答