Bind WebView2 to ViewModel Using Caliburn Micro

Question

I am using the guide located her for reference: https://learn.microsoft.com/en-us/microsoft-edge/webview2/gettingstarted/wpf

Utilizing that guide, I was able to get WebView2 started within my application. Now I am trying to seperate the code into a ViewModel as I will have many more elements on that page. The application as a whole uses Caliburn Micro. I am able to bind everything to the ViewModel except for the WebView2 itself. Wheneer I Select the Go button it states that the WebView is null. I tried manually setting the WebView however that does not work.

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");
        }
    }

No matter what I try WebView keeps coming back null and I am not able to change the page.

`WebView` Control named by `x:Name` and `WebView` Property in VM are different Controls. Remove property totally. Implement `NotifyOfPropertyChange` for `WebViewSource` and change `WebViewSource` value in the Button handler. — aepot, Jul 04 '20 at 14:20

score 2 · Accepted Answer · edited Jul 30 '20 at 07:52

2

As aepot commented, removing the Webview property and notifying the change in the source resolved the issue. The code now looks like this for the view:

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

And this for the ViewModel:

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

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

edited Jul 30 '20 at 07:52

thatguy

21,059
6
30
40

answered Jul 08 '20 at 07:40

Jakxna360

857
2
9
31

How should one call NavigateToString? – AgathoSAreS Jun 17 '21 at 09:17
I am grabbing the WebView item from the code-behind by using `var view = GetView() as BrowserInterfaceView;` then assigning it with `webView = view.WebView;` Lastly, I am using the built in navigation method with `webView.CoreWebView2.Navigate(url);` Hope that can help! Sorry for the bad formatting by the way... the comment formatting here is pretty bad. – Jakxna360 Jun 26 '21 at 07:13

score 1 · Answer 2 · answered Jul 06 '20 at 15:11

A view model is not supposed to keep a reference to an element like WebView2. This is not MVVM and not how Caliburn.Micro works. A view model defines the source properties.

If you add a TextBlock property (you should not!) to the view model, it will also always be null just like your WebView2 property is, even if you add a TextBlock with a corresponding name in the XAML markup.

I am afraid this doesn't make much sense, both regarding MVVM in general and Caliburn.Micro in particular.

How would one then call WebView.EnsureCoreWebView2Async(null); ? — AgathoSAreS, Jun 17 '21 at 09:13

Bind WebView2 to ViewModel Using Caliburn Micro

2 Answers2