使用 Caliburn Micro 将 WebView2 绑定到 ViewModel

Posted 2023-04-01

【中文标题】使用 Caliburn Micro 将 WebView2 绑定到 ViewModel

【英文标题】：Bind WebView2 to ViewModel Using Caliburn Micro

【发布时间】：2020-10-24 23:19:54

【问题描述】：

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

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

BrowserView.xaml：

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

BrowserViewModel.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 并且我无法更改页面。

【问题讨论】：

WebView 由x:Name 和WebView 属性命名的控件在VM 中是不同的控件。完全删除财产。为WebViewSource 实现NotifyOfPropertyChange 并在Button 处理程序中更改WebViewSource 值。

【参考方案1】：

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

如果您将TextBlock 属性（您不应该！）添加到视图模型，它也将始终为null，就像您的WebView2 属性一样，即使您添加了具有相应的TextBlock XAML 标记中的名称。

恐怕这没有多大意义，对于一般的 MVVM 和特别是 Caliburn.Micro。

【讨论】：

如何调用 WebView.EnsureCoreWebView2Async(null); ?

【参考方案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);

【讨论】：

如何调用 NavigateToString？

我正在使用 var view = GetView() as BrowserInterfaceView; 从代码隐藏中获取 WebView 项目，然后将其分配给 webView = view.WebView; 最后，我使用带有 webView.CoreWebView2.Navigate(url); 的内置导航方法希望能有所帮助！顺便说一句，很抱歉格式不好……这里的评论格式很糟糕。