Xojo Edge WebView2 via DesktopXAMLContainer

Targets Windows
1

Spinoff from this thread and Issue:

Can we support the Edge browser in a Windows app in Xojo?

Apparently, using the DesktopXAMLContainer object it’s quite easy.

  1. Open the TabViewAndWebView sample project:
    image
    image488×452 40.4 KB
  2. Run it
  3. You are looking at an Edge WebView2 browser

image
image1388×804 59 KB

Very cool!

The demo has the WebView2 hosted within a <winui:TabView> object.
@William_Yu Is there a way to get just the bare browser view, with no containing tab panel?

3 Likes
2

I figured it out.

To add a Edge / WebView2 viewer to your Xojo Windows app:

  1. Add a XAML Container to your window

    image
    image580×262 22.2 KB

  2. Set the Behavior / Content to

<winui:WebView2 Name="MyWebViewName">
</winui:WebView2>

image
image1236×280 44.9 KB

  1. Add an Opening event with this code
    Me.Invoke("MyWebViewName.Navigate", "https://example.com")
6 Likes
3

could you add please code example? thanks

4

There’s literally nothing more to add than what I showed. It’s really very simple.

Here’s a sample project:
webview2_example.xojo_binary_project.zip (5.2 KB)

1 Like
5

Unfortunately, the only Method implemented for this control is
Navigate(url as string)

Other methods are missing, such as

NavigateToString(html as string)
Stop()
GoBack()
InvokeScript()

etc…

which makes this control fairly limited at the moment.

@William_Yu
See https://tracker.xojo.com/xojoinc/xojo/-/issues/78040 which is a feature request for more methods.

6

Hi Mike,

This has been a great start. I’m finding that when the user clicks in the WebView it takes focus away from the window in such a way that it affects the Title Bar (the Window seems to be in the background now).

Any ideas how to prevent or fix this?

I tried cheating and adding a self.SetFocus timer in the EventTriggered event when eventName = "FocusReceived" but that did not appear to work.

Thanks,
Tim Parnell

7

FYI, https://tracker.xojo.com/xojoinc/xojo/-/issues/78040 was implemented in 2025R1 - I haven’t tested it out.

@Tim_Parnell - good catch, I haven’t tested much at all myself. Windows 10 or 11? Are you seeing that in 2025R1 or older versions?

8

I have been playing with the results of #78040 - DesktopXAMLContainer.WebView2 missing Methods, but I can’t seem to get or set the UserAgent property.

I was hoping to make a DesktopContainer that abstracted the HTMLViewer functions into the correct control per platform. I will post the source after I eat lunch. Can you help me understand how to access the new properties William added to the XAML Control window?

(or maybe @William_Yu can weigh in?)

Maybe I’m misunderstanding how to use something? Importantly, the goal is self-contained, so I cannot make use of a subclass that would need to accompany the DesktopContainer.

Windows 11
2025r1.1

9

Seems like IDE typeahead doesn’t work for properties, however it does compile:

XAMLContainer1
Sub Opening() Handles Opening
  me.userAgent = "foobar"
  Me.Invoke("WebViewAlpha.Navigate", "https://dnschecker.org/user-agent-info.php")
 
End Sub

But not sure it’s working:

image
image1644×530 52.7 KB

I also tried these variations, which compile and run, but seem to have no effect:

me.value("UserAgent") = "foobar"
me.value("WebViewAlpha.UserAgent") = "foobar"
10

I was getting RuntimeExceptions.

11

The WebView needs to be initialized before you can setup the UserAgent, try adding this to the EventTriggered event:

If eventName = "Initialized" Then
  Me.UserAgent = "foobar"
End If

image
image904×677 36.7 KB

3 Likes
12

Here is what I have built so far.

4 Likes
13

The combination of

Give the potential of dramatically reducing Windows EXE sizes

2 Likes
14

Oh I wonder if I can use EmbedControl to trick Windows into not including CEF.

I have figured out the UserAgent problem thanks to William’s post about the control not being available yet. The Github repository has been updated.

The focus stealing issue still remains though.

15

My trick worked… no CEF on Windows. Github updated.
Needs more testing, would you be interested in taking a look?

The ExecuteJavaScript stuff won’t line up perfectly, but I’m looking to just replace the change notes HTMLViewer in my update window for right now.

16

The only thing stopping me from using this now is the weird focus-consuming issue. @William_Yu is that something I should file a ticket for, or is there something I’m misunderstanding again?

If you click inside the web view, it takes focus away from the window in such a way that it affects the title bar. The github repository is up to date if you need an example project.

17

I’m really not a fan of this “reduced cross platform” stuff. Why is WebView2 not simply an option in HTMLViewer? Or even the only renderer. Xojo doesn’t need to be building CEF anymore, and we don’t need its bloat, yet to “solve” that we need to do this awful song and dance that Xojo should be doing for us.

In my app I’ve written a container that wraps both HTMLViewer and WebView2MBS, and switches based on the platform. But it’s high time Xojo kicks CEF to the curb and does this for me.

https://tracker.xojo.com/xojoinc/xojo/-/issues/59961

2 Likes
18

You should file a ticket, it looks like 2024r3 didn’t have this particular issue but it likely cropped up in 2024r4.

1 Like
19

I have upvoted #59961 - support webview2 on windows and created #78901 - WebView2 XAMLContainer consumes focus from Window

2 Likes
20

I had to use XAML webview2 to get some websites working properly (It might just be a user agent thing, but the webview2 fixed everything).

However if you make a webview, and move yours to another screen, does it when you right click, put the popup menu on the correct screen/placement? Mine always only shows up in the first place the webview was shown.