使用 Webbrowser 控件的 ManipulationDelta 事件滚动列表框答案

【问题标题】：Use ManipulationDelta event of webbrowser control to scroll a listbox使用 Webbrowser 控件的 ManipulationDelta 事件滚动列表框
【发布时间】：2013-03-26 17:19:50
【问题描述】：

我在一个列表框中有多个 webbrowser 控件（层次结构：DataBoundListBox->Multiple ExpandableItems->每个可扩展项在展开时显示一个 webbrowser 控件。）。

问题是，webbrowser 控件捕获了拖动手势，一旦 webbrowser 控件展开，就无法滚动列表框。如果 webbrowser 的内容太长，用户会被卡住并且无法再滚动，因为 webbrowser 会填满整个屏幕。现在，网络浏览器只需要响应简单的点击事件（按钮）。

webbrowser 控件在内部捕获所有触摸手势和事件，但似乎有一个border 元素可以在触摸手势到达tilehost 之前拦截触摸事件并永远消失：

Border border = WebViewer.Descendants<Border>().Last() as Border;

为了捕捉触摸手势，我在边框上添加了一个 ManipulationDelta 事件，因为它不允许我添加像 DragStarted、DragDelta、DragCompleted 这样的 Gesture Listener 事件。

现在我需要将此 ManipulationDelta 事件数据获取到浏览器所在的列表框中的滚动查看器。

这是一种有效的概念方法吗？有人可以帮助我如何让它运行吗？

P.S.：我尝试了另一种方式（将点击手势事件从画布覆盖发送到 webbrowser 控制页面内的 javascript 并模拟页面上的点击）但这似乎并不像触摸坐标那样工作得很好并且 javascript 坐标有一个未知的偏移量。

感谢您的帮助！

【问题讨论】：

您可以将其发布为您自己问题的答案。
这样做了。我很惊讶它的工作原理，我希望它也能帮助其他人。

标签： c# silverlight windows-phone-8

【解决方案1】：

事实证明，最后一个使用 javascript 的方法实际上工作得很好，问题是传递给 javascript 的双 x 和 y 值。将其转换为整数后，它会检测到底层 html 元素的像素精度。

如果您想知道如何在 webbrowser 元素中将点击事件传输到网站，您需要执行以下操作：

将“LinqToVisualTree”添加到您的项目和文档中（例如：使用 LinqToVisualTree；）！

将此 javascript 代码添加到您的网站（除了 jquery）：

function simulateClick(x, y) {
jQuery(document.elementFromPoint(x, y)).click();}

将 silverlight 工具包（搜索 GestureService 以获取信息）添加到您的解决方案，并将此事件添加到 XAML 文件中的覆盖画布（放置在 webbrowser 元素上的画布元素）（例如，请注意我放入的画布）那里。你必须用你自己的画布或网格或其他东西替换它：

<Canvas>
    <toolkit:GestureService.GestureListener>
        <toolkit:GestureListener  Tap="GestureListener_Tap"/>
    </toolkit:GestureService.GestureListener>
</Canvas>

将此添加到您的 xaml 文件 codebehind c# 中（请注意，我从水龙头处重新计算了原始坐标，您可能需要更改数字 1.3499。这是模拟器上按钮的静态偏移因子。）：

    private void GestureListener_Tap(object sender, Microsoft.Phone.Controls.GestureEventArgs e)
    {
        Canvas cv = sender as Canvas;
        //!!! You need to change the following search for the webbrowser to your own    xaml structure.
        // It uses "LinqToVisualTree" to find the element! Add it to your document!
        WebBrowser wb = cv.Ancestors<Grid>().First().ElementsBeforeSelf<WebBrowser>().First() as WebBrowser;
        var gesture = e.GetPosition(cv);
        var gx = gesture.X;
        var gy = gesture.Y;
        tapBrowser(wb, gx, gy);
    }

    private static void tapBrowser(WebBrowser wb, double x, double y)
    {
        GeneralTransform gt = wb.TransformToVisual(Application.Current.RootVisual as UIElement);
        Point offset = gt.Transform(new Point(0, 0));
        double rx = (x / 1.3499);
        double ry = (y / 1.3499);
        int ix = (int)rx;
        int iy = (int)ry;
        wb.InvokeScript("simulateClick", ix.ToString(), iy.ToString());
    }

确保您的画布与 webbrowser 元素的大小相同！

就是这样。您现在拥有一个启用了点击功能的浏览器，但您可以将其余手势保留在本机应用程序中，并且浏览器不会捕捉到它们！理论上，您可以重定向更多手势，但您需要有一个 javascript/jquery 函数可以“重新模拟”您想要传递的手势。

【讨论】：