滚动查看器内部的列表视图可防止滚动查看器滚动

本文关键字：滚动 可防止 视图 内部 列表 | 更新日期: 2023-09-27 18:20:54

我有一个滚动查看器，里面有几个列表框。问题是，如果用户在鼠标悬停在列表视图上时使用鼠标中键滚动滚动查看器。列表视图将其内部滚动查看器滚动到底部，然后继续捕获鼠标，从而防止包含的滚动查看器滚动。

关于如何处理这个问题的任何想法？

滚动查看器内部的列表视图可防止滚动查看器滚动

发生这种情况是因为ListView(实际上是ListBox(的内容模板本身用ScrollViewer包装其项目。

最简单的方法是通过为内部ListView删除自己的Template来禁用它，这不会创建ScrollViewer：

    <ListView>
      <ListView.Template>
        <ControlTemplate>
          <ItemsPresenter></ItemsPresenter>
        </ControlTemplate>
      </ListView.Template>
      ...
    </ListView>

顺便说一句，如果您在列表视图中有一个列表视图(这是我的情况(，也会发生同样的情况。

IMO，处理此方案的最佳方法是创建自定义控件：

     class MyScrollViewer : ScrollViewer
     {
         protected override void OnPreviewMouseWheel(MouseWheelEventArgs e)
         {
            base.OnPreviewMouseWheel(e);
            if (!e.Handled)
            {
                e.Handled = true;
                this.RaiseEvent(new MouseWheelEventArgs(e.MouseDevice, e.Timestamp, e.Delta)
                {
                    RoutedEvent = UIElement.MouseWheelEvent,
                    Source = this
                });
            }
        }
    }

您是否尝试禁用ListView's ScrollBars？

<ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled"
          ScrollViewer.VerticalScrollBarVisibility="Disabled" />

受到一些有用答案的启发，我有一个实现，当内部的(包括来自ListView，ListBox，DataGrid(滚动超过其顶部/底部时，可以滚动祖先ScrollViewer。

我将附加属性应用于 App.xaml 中的所有滚动查看器：

<Style TargetType="ScrollViewer" BasedOn="{StaticResource {x:Type ScrollViewer}}">
    <Setter Property="local:ScrollViewerHelper.FixMouseWheel" Value="True" />
</Style>

附加属性检测滚动超过顶部/底部，并在发生这种情况时在 ScrollViewer 的父级上引发鼠标滚轮事件。事件路由将其获取到外部滚动查看器：

public static class ScrollViewerHelper
{
    // Attached property boilerplate
    public static bool GetFixMouseWheel(ScrollViewer scrollViewer) => (bool)scrollViewer?.GetValue(FixMouseWheelProperty);
    public static void SetFixMouseWheel(ScrollViewer scrollViewer, bool value) => scrollViewer?.SetValue(FixMouseWheelProperty, value);
    public static readonly DependencyProperty FixMouseWheelProperty =
        DependencyProperty.RegisterAttached("FixMouseWheel", typeof(bool), typeof(ScrollViewerHelper),
            new PropertyMetadata(OnFixMouseWheelChanged));
    // End attached property boilerplate
    static void OnFixMouseWheelChanged(DependencyObject d,
                                       DependencyPropertyChangedEventArgs e)
    {
        var scrollViewer = d as ScrollViewer;
        if (scrollViewer == null) return;
        scrollViewer.PreviewMouseWheel += (s2, e2) =>
        {
            var parent = scrollViewer.Parent as UIElement;
            bool hitTopOrBottom = HitTopOrBottom(e2.Delta, scrollViewer);
            if (parent is null || !hitTopOrBottom) return;
            var argsCopy = Copy(e2);
            parent.RaiseEvent(argsCopy);
        };
    }
    static bool HitTopOrBottom(double delta, ScrollViewer scrollViewer)
    {
        var contentVerticalOffset = scrollViewer.ContentVerticalOffset;
        var atTop = contentVerticalOffset == 0;
        var movedUp = delta > 0;
        var hitTop = atTop && movedUp;
        var atBottom =
            contentVerticalOffset == scrollViewer.ScrollableHeight;
        var movedDown = delta < 0;
        var hitBottom = atBottom && movedDown;
        return hitTop || hitBottom;
    }
    static MouseWheelEventArgs Copy(MouseWheelEventArgs e)
        => new MouseWheelEventArgs(e.MouseDevice, e.Timestamp, e.Delta)
        {
            RoutedEvent = UIElement.MouseWheelEvent,
            Source = e.Source,
        };
}
如果将

内部列表视图包装在滚动查看器中，则滚动将起作用。

<ListView ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
                <ListView>
                    <ListView.ItemTemplate>
                        <DataTemplate>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </ScrollViewer>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>
相关文章：