使用 Caliburn Micro 将 WebView2 绑定到 ViewModel

Bind WebView2 to ViewModel Using Caliburn Micro

提问人:Jakxna360 提问时间:7/4/2020 更新时间:7/30/2020 访问量:2489

问:

我正在使用指南找到她作为参考:https://learn.microsoft.com/en-us/microsoft-edge/webview2/gettingstarted/wpf

利用该指南,我能够在应用程序中启动 WebView2。现在我正在尝试将代码分离到 ViewModel 中,因为我将在该页面上拥有更多元素。整个应用程序使用 Caliburn Micro。除了 WebView2 本身之外,我能够将所有内容绑定到 ViewModel。当我选择“转到”按钮时,它指出 WebView 为 null。我尝试手动设置 WebView,但这不起作用。

BrowserView.xaml:

    <Button 
            x:Name="ButtonGo" 
            Content="Go"
            />
        <TextBox x:Name = "Addressbar"
                 />
    <wv2:WebView2 x:Name = "WebView"
                  Source="{Binding WebViewSource}"
/>

浏览器视图模型.cs

        private WebView2 _webView;

    public WebView2 WebView
    {
        get 
        {
            return _webView; 
        }
        set 
        {
            _webView = value;
            NotifyOfPropertyChange(() => WebView);
        }
    }

    public string WebViewSource { get; set; } = "http://Google.com";

    private string _addressbar;

    public string Addressbar
    {
        get 
        { 
            return _addressbar; 
        }
        set 
        { 
            _addressbar = value;
            NotifyOfPropertyChange(() => Addressbar);
        }
    }


    public void ButtonGo()
    {
        if (WebView != null && WebView.CoreWebView2 != null)
        {
            WebView.CoreWebView2.Navigate("https://bing.com");
        }
    }

无论我尝试什么,WebView 都会返回 null,我无法更改页面。

C# WPF MVVM caliburn.micro webview2

评论

1赞 aepot 7/4/2020
WebViewVM 中由 和 Property 命名的控件是不同的控件。完全删除属性。在 Button 处理程序中实现和更改值。x:NameWebViewNotifyOfPropertyChangeWebViewSourceWebViewSource

答:

1赞 mm8 7/6/2020 #1

视图模型不应该保留对类似 的元素的引用。这不是 MVVM,也不是 Caliburn.Micro 的工作方式。视图模型定义属性。WebView2

如果将属性(不应!)添加到视图模型中,则该属性也将始终与属性一样,即使在 XAML 标记中添加了具有相应名称的属性也是如此。TextBlocknullWebView2TextBlock

恐怕这没有多大意义,无论是关于一般的 MVVM,还是关于 Caliburn.Micro。

评论

0赞 AgathoSAreS 6/17/2021
那么如何调用 WebView.EnsureCoreWebView2Async(null); ?
2赞 Jakxna360 7/8/2020 #2

正如 aepot 所评论的那样,删除 Webview 属性并通知源代码中的更改解决了该问题。现在,视图的代码如下所示:

<Button x:Name="ButtonGo" 
        Content="Go"/>
<TextBox x:Name = "Addressbar"/>
<wv2:WebView2 x:Name = "WebView"
              Source="{Binding WebViewSource}"/>

对于 ViewModel:

public string Addressbar
{
   get
   {
      return _addressbar;
   }
   set
   {
      _addressbar = value;
      NotifyOfPropertyChange(() => Addressbar);
   }
}

public void ButtonGo()
{
   WebViewSource = Addressbar;
   NotifyOfPropertyChange(() => WebViewSource);
}

评论

0赞 AgathoSAreS 6/17/2021
应该如何调用 NavigateToString?
0赞 Jakxna360 6/26/2021
我正在从代码隐藏中获取 WebView 项,方法是使用然后将其分配给最后,我正在使用内置的导航方法,希望可以提供帮助!顺便说一句,对不起,格式错误......这里的评论格式非常糟糕。var view = GetView() as BrowserInterfaceView;webView = view.WebView;webView.CoreWebView2.Navigate(url);