ListBoxのタッチスクロールについて

Question

実現したいこと

ListBoxでタッチ（ドラッグ）スクロールができるUserControlを作成したい。

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

タッチ（ドラッグ）したままListBoxの範囲外にでるとスクロールが反転してしまう。

該当のソースコード

SliderControl.vb

Imports System.ComponentModel

Public Class SliderControl : Implements INotifyPropertyChanged


    Public Shared ReadOnly TargetListBoxProperty As DependencyProperty = DependencyProperty.Register("TargetListBox", GetType(ListBox), GetType(SliderControl), New PropertyMetadata(Nothing))
    Private WithEvents _ListBox As ListBox
    Private _Draging As Boolean
    Private _DragStart As Double
    Private _StartScrollY As Double
    Private WithEvents _ScrollViewer As ScrollViewer
    Public Event PropertyChanged(sender As Object, e As PropertyChangedEventArgs) Implements INotifyPropertyChanged.PropertyChanged


    Public Property TargetListBox As ListBox
        Get
            Return CType(GetValue(TargetListBoxProperty), ListBox)
        End Get

        Set(value As ListBox)
            SetValue(TargetListBoxProperty, value)
            RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs("TargetListBox"))
        End Set
    End Property

    Private Sub SliderControl_Loaded(sender As Object, e As RoutedEventArgs) Handles Me.Loaded
        _ListBox = TargetListBox
        _ScrollViewer = GetDescendantsFromVisual(Of ScrollViewer)(_ListBox)(0)
    End Sub


    Private Sub ListBox_PreviewMouseDown(sender As Object, e As MouseButtonEventArgs) Handles _ListBox.PreviewMouseDown
        _Draging = True
        SetMousePosition(e.GetPosition(Me))
    End Sub

    Private Sub SetMousePosition(p As Point)
        _DragStart = p.Y
        _StartScrollY = _ScrollViewer.VerticalOffset
    End Sub

    Private Sub ListBox_PreviewMouseUp(sender As Object, e As MouseButtonEventArgs) Handles _ListBox.PreviewMouseUp
        _Draging = False
    End Sub

    Private Sub OrderListView_PreviewMouseMove(sender As Object, e As MouseEventArgs) Handles _ListBox.PreviewMouseMove
        If _Draging Then
            Dim point = e.GetPosition(Me)
            Dim offset = _DragStart - point.Y
            Dim current = _StartScrollY + offset
            Console.WriteLine(current)

            _ScrollViewer.ScrollToVerticalOffset(current)
        End If
    End Sub

    Public Shared Function GetDescendantsFromVisual(Of T As {DependencyObject})(obj As DependencyObject) As IEnumerable(Of T)
        Return Descendants(obj).OfType(Of T)
    End Function
    Private Shared Iterator Function Descendants(obj As DependencyObject) As IEnumerable(Of DependencyObject)
        If obj Is Nothing Then
            Return
        End If

        For Each child In Children(obj)
            Yield child
            For Each gc In Descendants(child)
                Yield gc
            Next
        Next
    End Function
    Private Shared Iterator Function Children(obj As DependencyObject) As IEnumerable(Of DependencyObject)
        If obj Is Nothing Then
            Return
        End If

        Dim count = VisualTreeHelper.GetChildrenCount(obj)
        If count = 0 Then
            Return
        End If

        For i As Integer = 0 To count - 1
            Dim child = VisualTreeHelper.GetChild(obj, i)
            If child IsNot Nothing Then
                Yield child
            End If
        Next
    End Function
End Class

SliderControl.xaml

<UserControl x:Class="SliderControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"              
             mc:Ignorable="d" > 

</UserControl>

MainWindow.vb

Class MainWindow
    Private Sub MainWindow_Loaded(sender As Object, e As RoutedEventArgs) Handles Me.Loaded
        Dim l As New List(Of String)
        For i = 0 To 300
            l.Add(CStr(i))
        Next
        Listbox.ItemsSource = l

    End Sub
End Class

MainWindow.xaml

<Window x:Class="MainWindow"
        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:WpfApp39"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <ListBox Name="Listbox" Width="150" Height="300" HorizontalAlignment="Left"></ListBox>
        <local:SliderControl  TargetListBox="{Binding ElementName=Listbox}"/>
    </Grid>
</Window>

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

.net4.8 Windows11

TargetListBoxにBindingすると対象のListBoxがタッチスクロールできるというものです。

以下の手順で症状の確認ができます。
・マウスホイールで画面の中央あたりまでスクロールします。
・ListBoxの画面上部をドラッグします。
・そのまま上方向へListBox範囲外になるまでドラッグします。
・ListBoxの範囲外になるとスクロールが反転します。

また上記操作で、ListBox上部の境界線からぎりぎりはみ出たところでドラッグしていると
マウスカーソルを動かしていないのにも関わらず、0.5秒間隔くらいで1行くらい反転してスクロールがされる謎の挙動も発生します。

よろしくお願いいたします。

Answer 1

ListBoxでタッチ（ドラッグ）スクロールができるUserControlを作成したい。

マウスドラッグでスマホのような？スクロールがしたいという意味ですよね？
実際のタッチ操作の話ではないんですよね？

タッチ（ドラッグ）したままListBoxの範囲外にでるとスクロールが反転してしまう。
マウスカーソルを動かしていないのにも関わらず、0.5秒間隔くらいで1行くらい反転してスクロールがされる謎の挙動も発生します。

ListBoxは標準で範囲外にドラッグすると、（動かさなくても）自動でスクロールする動作になっています。

↓は素の（何もしていない）ListBoxです。

この動作と干渉して何かおかしなことになっていると思います。
WPF 横方向にしたListBoxでアイテムを上下にドラッグすると数秒間操作不能になる - スタック・オーバーフロー

ListBox.cs

回避法ですがひとつはScrollViewerのイベントやCaptureMouseをするような方法（単純にやると選択できなくなります）
c# - in WPF. How to scroll Objects in ScrollViewer by mouse-dragging, like as iPhone? - Stack Overflow

あるいはListBoxを継承して、余計な動作を潰す方法でしょうか。

C＃タグもあるのでC#です。

<Window
  x:Class="Qsfo4uasocdzdqy.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="clr-namespace:Qsfo4uasocdzdqy"
  Width="800"
  Height="450">
  <UniformGrid Rows="1">
    <local:MyListBox x:Name="listbox1" Margin="50" />
    <local:MyListBox x:Name="listbox2" Margin="50" />
    <local:MyListBox x:Name="listbox3" Margin="50" />
  </UniformGrid>
</Window>

using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Input;
using System.Windows.Media;

namespace Qsfo4uasocdzdqy;


public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        listbox1.ItemsSource = Enumerable.Range(0, 300);
        listbox1.SelectedIndex = 150;
        listbox1.ScrollIntoView(listbox1.SelectedItem);

        listbox2.ItemsSource = Enumerable.Range(0, 30);
        listbox2.SelectedIndex = 15;
        listbox2.ScrollIntoView(listbox2.SelectedItem);

        listbox3.ItemsSource = Enumerable.Range(0, 3);
    }
}

public class MyListBox : ListBox
{
    private ScrollViewer _scrollViewer;
    private ScrollBar _scrollBar;
    private bool _draging;
    private double _dragStart;
    private double _startScrollY;

    public override void OnApplyTemplate()
    {
        _scrollViewer = GetDescendantsFromVisual<ScrollViewer>(this).FirstOrDefault();
        _scrollViewer.ApplyTemplate();
        _scrollBar = _scrollViewer.Template.FindName("PART_VerticalScrollBar", _scrollViewer) as ScrollBar;
    }

    protected override void OnPreviewMouseLeftButtonDown(MouseButtonEventArgs e)
    {
        base.OnPreviewMouseLeftButtonDown(e);

        var point = e.GetPosition(this);

        // スクロールバー上はなにもしない
        if (ActualWidth - _scrollBar.ActualWidth <= point.X) return;

        // スクロールできない（全部見えている）なら何もしない
        if (_scrollViewer.ComputedVerticalScrollBarVisibility != Visibility.Visible) return;

        _draging = true;
        _dragStart = point.Y;
        _startScrollY = _scrollViewer.VerticalOffset;
        Cursor = Cursors.ScrollNS;
    }

    protected override void OnMouseMove(MouseEventArgs e)
    {
        // 範囲外へのドラッグでスクロールする動作を抑制
        //base.OnMouseMove(e);

        if (_draging)
        {
            var point = e.GetPosition(this);
            var offset = _dragStart - point.Y;
            var current = _startScrollY + offset;

            _scrollViewer.ScrollToVerticalOffset(current);
        }
    }

    protected override void OnPreviewMouseLeftButtonUp(MouseButtonEventArgs e)
    {
        base.OnPreviewMouseLeftButtonUp(e);

        _draging = false;
        Cursor = null;
    }

    protected override void OnIsMouseCapturedChanged(DependencyPropertyChangedEventArgs e)
    {
        // 範囲外へのドラッグでスクロールする動作を抑制（タイマーを呼ばれないように）
        //base.OnIsMouseCapturedChanged(e);
    }


    private static IEnumerable<T> GetDescendantsFromVisual<T>(DependencyObject obj) where T : DependencyObject => Descendants(obj).OfType<T>();
    private static IEnumerable<DependencyObject> Descendants(DependencyObject obj)
    {
        if (obj == null) yield break;
        foreach (var child in Children(obj))
        {
            yield return child;
            foreach (var gc in Descendants(child)) yield return gc;
        }
    }
    private static IEnumerable<DependencyObject> Children(DependencyObject obj)
    {
        if (obj == null) yield break;
        var count = VisualTreeHelper.GetChildrenCount(obj);
        for (var i = 0; i < count; i++)
        {
            var child = VisualTreeHelper.GetChild(obj, i);
            if (child != null) yield return child;
        }
    }
}

アイテム数が少ないとちょっと操作が繊細になりますね（お好みに調整してください）

---

本題とは関係ないが気になった点

依存関係プロパティのCLRプロパティラッパーに、GetValue・SetValue以外の処理を書かないでください。
ラッパーはユーザー（このコードを利用する開発者）の利便性のために用意するもので、バインド時には通りません（なくてもバインドできます）

Public Property TargetListBox As ListBox
    Get
        Return CType(GetValue(TargetListBoxProperty), ListBox)
    End Get

    Set(value As ListBox)
        SetValue(TargetListBoxProperty, value)
        'RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs("TargetListBox"))
    End Set
End Property

wpf - Why are .NET property wrappers bypassed at runtime when setting dependency properties in XAML? - Stack Overflow

カスタム依存関係プロパティ - WPF .NET | Microsoft Learn

INotifyPropertyChangedを実装する意図も図りかねます。
依存関係プロパティの変更を感知したい場合は、「プロパティ変更コールバック」を使用してください。
依存関係プロパティのコールバックと検証 - WPF .NET | Microsoft Learn
PropertyChangedCallback Delegate (System.Windows) | Microsoft Learn

Comments

[TN8001]

C#が全然わからないということであればコメントしてください。
がんばってVBにします^^;

[Mashimasa]

ListBoxのIsMouseCapturedChangedイベントでReleaseMouseCaptureすることにより解決しました。
今回はListBoxの中身を選択する必要はありませんでした。
ありがとうございます。

サンプルコードも無駄がなく参考になります...。
いつもありがとうございます。

・依存関係プロパティのCLRプロパティラッパーに、GetValue・SetValue以外の処理を書かないでください。
　→承知しました。

・INotifyPropertyChangedを実装する意図も図りかねます。
　→こちらはコードの消し忘れでした。
　　実際にはほかにもいろいろ機能があり、そこから余計なものを削除したつもりでした。

[TN8001]

> ListBoxのIsMouseCapturedChangedイベントでReleaseMouseCaptureすることにより解決しました。

範囲外に行ったときはスクロール止まっていいんですね^^;
その場合範囲外でドラッグをやめた時ステートが食い違う（MouseUpがこないので_dragging = trueのままになる）ので、

private void ListBox_PreviewMouseMove(object sender, MouseEventArgs e)
{
if (e.LeftButton == MouseButtonState.Released)
{
_dragging = false;
return;
}

のような処理を入れておいたほうがいいでしょう。

> 今回はListBoxの中身を選択する必要はありませんでした。

説明不足でしたが選択できなくなるのは、ドラッグ開始（PreviewMouseDown）時にScrollViewerでCaptureMouseする実装（結果的にListBoxはReleaseMouseCaptureされる）を試した場合の話です（全部_scrollViewer.PreviewMouseDown等に代わるイメージ）

---

（もう結構作りこんでおられるようなのでいいっちゃいいんですが）バインドするためだけに実体のないUserControlを作るのはかなり違和感があります。

既存のコントロールの動作をカスタムする場合は、継承コントロール（WPFでこういう言い方あまりしないけど回答のようなスタイルを上書きしないカスタムコントロールのこと）か、ビヘイビアが一般的かと思います。