MicrosoftEdge / MicrosoftEdge/WebView2Feedback

[MVVM] WebView2 not loading when FallbackValue for Source binding is set

Open
#1,073 5 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug priority-low tracked
Dominant language
PowerShell
Stars
526
Forks
67
PR merge metrics
No merged PRs in 30d

Description

Description
The underlying problem which I'm trying to solve is as follows:
Using the MVVM pattern, I'm binding the Source property to a property on the ViewModel.
The parent ViewModel uses a ContentControl for displaying several Views, one of which contains a WebView2 control. The Views are registered using DataTemplates.
When replacing the ViewModel containing the WebView2 control, an Exception of type NotSupportedException: The Source property can not be set to null occurs. My guess is that the ViewModel is being disposed/cleaned-up prior to the View, resulting the data-bound property of type Uri to be set to null. This is not allowed per the implementation of WebView2.
I have tried to find a fix for this, such as desposing the WebView2 control before replacing the ViewModel, but nothing has worked.
So the next approach was to disallow the null-value somehow. Here comes the FallbackValue property which can be defined as part of the binding, this could be set to something like about:blank
But as soon as the FallbackValue is defined, WebView2 refuses to load. It probably initializes but the control is not shown (it does not default to the FallbackValue either). Also tested this in a blank project, see "Steps to reproduce" below.

Version
SDK: 1.0.774.44
Runtime: Fixed Version 89.0.774.50
Framework: WPF, .Net Core 3.1
OS: Windows 10

Repro Steps
The following very basic MVVM setup reproduces the issue when FallbackValue is set. If the parameter is omitted, WebView2 loads as expected.
Note that the WebView2 runtime is a fixed version referenced in the output folder. If you have the runtime installed, simply remove the part this.webView.CreationProperties in MainWindow.xaml.cs

App.xaml

<Application x:Class="WebView2Test.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Startup="Application_Startup">
</Application>

App.xaml.cs

using System.Windows;

namespace WebView2Test
{
    public partial class App : Application
    {
        private void Application_Startup(object sender, StartupEventArgs e)
        {
            MainWindow window = new MainWindow();
            window.Show();
        }
    }
}

MainWindow.xaml

<Window x:Class="WebView2Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

    <DockPanel>
        <wv2:WebView2 Name="webView" Source="{Binding Uri, FallbackValue='about:blank'}"/>
    </DockPanel>
</Window>

MainWindow.xaml.cs

using System;
using System.IO;
using System.Windows;
using Microsoft.Web.WebView2.Wpf;

namespace WebView2Test
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            this.webView.CreationProperties = new CoreWebView2CreationProperties 
            { 
                BrowserExecutableFolder = Path.Combine(AppContext.BaseDirectory, "webview2.runtime.x86") 
            };

            this.DataContext = new MainViewModel();
        }
    }
}

MainViewModel.cs

using System;

namespace WebView2Test
{
    class MainViewModel
    {
        public MainViewModel()
        {
            Uri = new Uri("https://google.com");
        }

        public Uri Uri { get; set; }
    }
}

AB#32212975

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue from MainWindow.xaml using the Source binding with FallbackValue, then inspect MainWindow.xaml.cs and MainViewModel.cs, including WebView2 creation and DataContext setup. Compare behavior with and without FallbackValue; done means the WebView2 displays the bound URI and still loads correctly when the binding value is unavailable.

Written by the indexing model from the issue text.

Assessment

Tech stack
csharp
Domain
desktop
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.