如何在用户在 WebView 控件中交互后隐藏 XAML 控件

本文关键字:控件 隐藏 XAML 交互 用户 WebView | 更新日期: 2023-09-27 18:37:10

我有一个应用程序,它使用 javascript 从 WebView 控件中调用另一个项目的本机 c# 类方法(与此 github 项目非常相似)

我在 OnNavigationStart 事件中使用 AddWedAllowedObject 方法。

如何隐藏/显示正在调用的本机 c# 类方法中的 XAML 控件? 由于循环依赖关系,我无法在其他项目中引用 Page 类。

如何在用户在 WebView 控件中交互后隐藏 XAML 控件

传递到 AddWebAllowedObject 的对象必须从独立于应用程序程序集的 Windows 运行时组件导入。这对于 AllowForWeb 属性是由 WebView 安全子系统标识的属性所必需的。如果使用应用项目中的类,则 AddWebAllowedObject 不起作用。

有关详细信息,请参阅WebView.AddWebAllowedObject

如您所知,由于循环依赖关系,我们不能在其他项目中引用 Page 类。

作为一种解决方法,我们可以从 HTML 向页面发送一个字符串。并根据字符串隐藏/显示 XAML 控件。

当托管的 HTML 页面调用 window.external.notify 并传递字符串参数时,可以在 Windows 应用商店应用中触发 ScriptNotify 事件。

有关详细信息,请参阅 WebView.ScriptNotify。

例如:

<WebView Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ScriptNotify="Web_ScriptNotify"
          NavigationStarting="OnNavigationStarting" x:Name="Web" Source="ms-appx-web:///WebPage.html" />
<Ellipse Name="MyEllipse" Fill="Red" Height="200" Width="200"></Ellipse>

在代码隐藏中:

private void Web_ScriptNotify(object sender, NotifyEventArgs e)
{
    if (e.Value == "Collapsed")
    {
        MyEllipse.Visibility = Visibility.Collapsed;
    }
    else
    {
        MyEllipse.Visibility = Visibility.Visible;
    }
}

在网页中编辑函数.html:

function showToast() {
    window.external.notify('Collapsed');
}