Search code examples
c#.netwpfwebviewwpftoolkit

WPF WebView doesn't show

I'm learning WPF WebView control, I have the below MainWindow.xaml file:

<Window x:Class="MyWPF.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:local="clr-namespace:MyWPF"
        xmlns:WPF="clr-namespace:Microsoft.Toolkit.Wpf.UI.Controls;assembly=Microsoft.Toolkit.Wpf.UI.Controls.WebView"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid x:Name="Grid1" Grid.Row="1" Grid.Column="1">
        <WPF:WebView x:Name="webView1"
                      Grid.Row="0"
                      Grid.Column="0"
                      Loaded="WebView_Loaded" />
    </Grid>
</Window>

and the below corresponding MainWindow.xaml.cs file:

namespace MyWPF
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            webView1.Navigate(new Uri("https://www.google.com"));
        }

        private void WebView_Loaded(object sender, RoutedEventArgs e)
        {
        }
    }
}

But I don't get any expecting popup window. If I remove

webView1.Navigate(new Uri("https://www.google.com"));

I can get a blank popup window. What is wrong with my code and how to solve it?

UPDATE1

I added Window_Loaded event handler and move the below two in it, now I can see a blank popup window but without any content as well as message box.

Uri uri = new Uri("https://www.google.com");
WebView1.Navigate(uri);

The whole updated code-behind:

namespace MyWPF
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Loaded");
            Uri uri = new Uri("https://www.google.com");
            WebView1.Navigate(uri);
        }
    }
}

UPDATE2

I added one HyperLink and one Button into xaml file, the below is the updated xaml file:

<Window x:Class="MyWPF.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:local="clr-namespace:MyWPF"
        xmlns:WPF="clr-namespace:Microsoft.Toolkit.Wpf.UI.Controls;assembly=Microsoft.Toolkit.Wpf.UI.Controls.WebView"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" AllowsTransparency="False" >
    <Grid x:Name="Grid1" Visibility="Visible" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="71*"/>
        </Grid.ColumnDefinitions>
        <WPF:WebView x:Name="WebView1" Visibility="Visible" Grid.Column="1" Margin="50,50,50,50">
        </WPF:WebView>
        <Button Name="BTN1" Click="BTN1_Click" Margin="285,380,285,10" Grid.Column="1" >Click Me</Button>
        <TextBlock Margin="0,0,747,390" Grid.ColumnSpan="2">
            <Hyperlink
                NavigateUri="http://www.google.com">
                Google
            </Hyperlink>
        </TextBlock>
    </Grid>
</Window>

and adding Button click event handler into the code-behind with webview initialization inside it:

namespace MyWPF
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Loaded");

            //Uri uri = ;
            WebView1.Navigate(new Uri("https://www.google.com"));
        }
        private void BTN1_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Loaded");
            WebView1.Navigate(new Uri("https://www.google.com"));
        }
    }
}

Nothing happens after clicking the HyperLink. I see popup Messagebox after clicking button but still google doesn't show up.

UPDATE3

I followed the link:

https://learn.microsoft.com/en-us/windows/communitytoolkit/controls/wpf-winforms/webview#high-dpi

I set Source property Source="http://www.google.com" inside the xaml file, see the below code:

<Window x:Class="MyWPF.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:local="clr-namespace:MyWPF"
        xmlns:WPF="clr-namespace:Microsoft.Toolkit.Wpf.UI.Controls;assembly=Microsoft.Toolkit.Wpf.UI.Controls.WebView"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" AllowsTransparency="False" >
    <Grid x:Name="Grid1"  >
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="71*"/>
        </Grid.ColumnDefinitions>
        <WPF:WebView x:Name="WebView1" Visibility="Visible" Grid.Column="1" Margin="50,50,50,50" Source="http://www.google.com" >
        </WPF:WebView>
        <Button Name="BTN1" Click="BTN1_Click" Margin="285,380,285,10" Grid.Column="1" >Click Me</Button>
        <TextBlock Margin="0,0,747,390" Grid.ColumnSpan="2">
            <Hyperlink
                NavigateUri="http://www.google.com">
                Google
            </Hyperlink>
        </TextBlock>
    </Grid>
</Window>

But still not working.

UPDATE4

I added((ISupportInitialize)webView).BeginInit() and ((ISupportInitialize)webView).EndInit() into the button click event handler, see the below:

using Microsoft.Toolkit.Wpf.UI.Controls;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace MyWPF
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Loaded");
        }
        private void BTN1_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Loaded");
            ((ISupportInitialize)WebView1).BeginInit();
            ((ISupportInitialize)WebView1).EndInit();
            WebView1.Navigate(new Uri("https://localhost:3000"));
            Console.ReadLine();
        }
    }
}

But get the below error message at this line: ((ISupportInitialize)WebView1).BeginInit(); :

  • $exception {"Could not find any resources appropriate for the specified culture or the neutral culture. Make sure \"Microsoft.Toolkit.Win32.UI.Controls.DesignerUI.resources\" was correctly embedded or linked into assembly \"Microsoft.Toolkit.Wpf.UI.Controls.WebView\" at compile time, or that all the satellite assemblies required are loadable and fully signed."} System.Resources.MissingManifestResourceException

Then I went back and added more properties based on this link:

https://github.com/rjmurillo/webview-samples/blob/master/Toolkit/dotnet/Microsoft.Toolkit.Win32.Samples.WPF.WebView/MainWindow.xaml

<WPF:WebView x:Name="WebView1" Visibility="Visible" Grid.Column="1" Margin="50,50,50,50" Source="http://www.google.com" IsIndexedDBEnabled="True"
            IsJavaScriptEnabled="True"
            IsPrivateNetworkClientServerCapabilityEnabled="True"
            IsScriptNotifyAllowed="True" >
</WPF:WebView>

But still WebView not working.

Solution

  • I was having the same issue upgrading from the first preview Toolkit, and it was all because the Navigate function causing to start window hidden.

    Change from:

    WebView1.Navigate(new Uri("https://localhost:3000"));

    To:

    WebView1.Source = new Uri("https://localhost:3000");