2019-11-29-win10-uwp-如何判断一个控件在滚动条的里面是用户可见

Posted 2021-03-21 lonelyxmas

原文:2019-11-29-win10-uwp-如何判断一个控件在滚动条的里面是用户可见

title	author	date	CreateTime	categories
win10 uwp 如何判断一个控件在滚动条的里面是用户可见	lindexi	2019-11-29 08:42:36 +0800	2019-04-29 10:15:38 +0800	Win10 UWP

在 UWP 中如何知道一个元素是在滚动条的显示大小内用户可以看到这个控件？如果需要在控件在滚动条里面用户可以看到的时候触发某个事件，在用户看不到的时候触发另一个事件可以怎么做？

昨天星期八再娶你 大佬问我如何判断在滚动条内可以看到某个元素，他需要在滚动条里面放一个视频播放器，在用户看不到这个播放器的时候自动停下这个播放器

在 UWP 的判断会比在 WPF 中复杂一些，我写过WPF 如何判断一个控件在滚动条的里面是用户可见但是在 UWP 中的小伙伴，也就是做 UWP 的大佬对 API 的设计会更加诡异

在 UWP 没有 ScrollChanged 事件只有ScrollViewer.ViewChanged 事件，但是这个事件和 WPF 的触发不相同的在于，如果我有外层的控件修改了滚动条的大小，不会触发这个事件。在 ScrollViewer.ViewChanged 只有在用户滚动或缩放完成之后才会触发，同时这个事件的参数ScrollViewerViewChangedEventArgs 只有一个表示现在是用户交互的过程还是结束的变量，所以通过这个事件判断控件是否在滚动条可见是不可靠的

昨天星期八再娶你 大佬告诉我一个可以使用的方法是通过LayoutUpdated 事件拿到触发，在布局属性修改的时候、在窗口修改的时候在运行时的布局的时候都会触发这个事件

在LayoutUpdated可以在控件第一次加载的时候触发，可以在用户滚动的时候触发

在 LayoutUpdated 通过判断控件的左上角坐标和控件的大小可以判断用户是否可以看到这个控件

在 UWP 拿到一个控件相对于上一层控件的左上角坐标可以使用下面方法

            var top = control.TransformToVisual(StackPanel).TransformPoint(new Point());

这个方法和 WPF 的 TranslatePoint 方法相同

判断滚动条可见大小不能从方法的参数拿到，需要直接拿滚动条控件，这样会存在一个坑在于时机的问题，和 WPF 不相同，此时的事件很难做到精确拿到滚动条的当前的大小和移动距离

    var viewBounds = new Rect(new Point(ScrollViewer.HorizontalOffset, ScrollViewer.VerticalOffset), new Size(ScrollViewer.ViewportWidth, ScrollViewer.ViewportHeight));

在 UWP 的矩形判断里面的方法已经不存在，需要自己写一个辅助方法

        private static bool RectIntersects(Rect a, Rect b)
        {
            return !(b.Left > a.Right
                || b.Right < a.Left
                || b.Top > a.Bottom
                || b.Bottom < a.Top);
        }

判断两个矩形是否相交就可以知道控件是否用户可以看到，如果想判断用户可以完全看到这个控件需要再写一个 Contain 方法

        private void CheckControlShow()
        {
            UIElement control = TextBlock;

            var top = control.TransformToVisual(StackPanel).TransformPoint(new Point());
            var controlBounds = new Rect(top, control.DesiredSize);

            var viewBounds = new Rect(new Point(ScrollViewer.HorizontalOffset, ScrollViewer.VerticalOffset), new Size(ScrollViewer.ViewportWidth, ScrollViewer.ViewportHeight));

            if (RectIntersects(viewBounds, controlBounds))
            {
                Debug.WriteLine("歪楼");
            }
            else
            {
                Debug.WriteLine("不歪楼");
            }
        }

如果觉得 LayoutUpdated 触发的次数实在太多，那么请使用FrameworkElement.SizeChanged 和 ScrollViewer.ViewChanged 事件同时使用，这样就可以拿到用户滚动和修改大小

uwp - XAML ScrollViewer‘s child bring into view event - Stack Overflow