How to embed web application into windows app with custom behavior

Question

I need to embed a standard webapp inside a windows app container.

The container just needs to be a wrapper around a webkit or similar rendering engine (I would like to avoid using IE rendering engine if possible) and it would contain some minimal window management logic - things like being borderless with no titlebars, being able to fix position and size, and custom overlay/always-on-top rules based on currently focused window.

I've been looking at node-webkit and it seems to fit the bill as far as containing a webapp is concerned, but I'm not sure I would be able to do the latter.

Can this be done with node-webkit, is there some other approach that would fit my use case better? I have absolutely no idea how windows app development is done, so I would appreciate some help.

Have a look at the [WebBrowser](https://msdn.microsoft.com/en-us/library/aa752040.aspx) control. Since you used the [tag:c#] tag, here is a link to the [Reference for Visual Basic](https://msdn.microsoft.com/en-us/library/aa752043.aspx). — IInspectable, Sep 01 '15 at 22:37

score 2 · Accepted Answer · edited May 23 '17 at 11:52

If you are using WPF, you can create you window with something like this (xaml):

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        WindowStyle="None"
        Title="MainWindow" Left="100" Top="200" Height="350" Width="525" PreviewKeyDown="Window_PreviewKeyDown">
    <Grid x:Name="grdBrowserHost">
    </Grid>
</Window>

WindowStyle attr None means "borderless with no titlebars" window. Left and Top are for position, and Width and Height are self-explanatory. All those properties can be accessed via code-behind with simple this.Width, etc... PreviewKeyDown I put here because in this example (as you will see), Topmost property will be changed from code behind (dynamically).

Code-behind should look something like using System;

using System.Windows;
using System.Windows.Input;

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

            System.Windows.Controls.WebBrowser browser = new System.Windows.Controls.WebBrowser();
            // you can put any other uri here, or better make browser field and navigate to desired uri on some event
            browser.Navigate(new Uri("http://www.blic.rs/")); 
            grdBrowserHost.Children.Add(browser);
        }

        private void Window_PreviewKeyDown(object sender, KeyEventArgs e)
        {
            if (e.Key == Key.Escape)
            {
                this.Close();
            }
            else
            {
                this.Topmost = !this.Topmost;
            }
        }
    }
}

In this example I have created default WebBrowser control for showing html. If you want some other web rendering engine you must find 3rd-part control and include it in your references. For webkit, you can check How to use WebKit browser control in WPF

Hey thanks, that looks exactly like what I need! One more thing I'm not super clear on - how can I hook into the system window management events (e.g. window lost focus) and can I query the window manager to give me the currently focused window? — moljac024, Sep 04 '15 at 08:33
Deactivated event for window eq this.Deactivated += (sender, e) => { ... } For currently focused window you can use WINAPI functions like on http://stackoverflow.com/questions/115868/how-do-i-get-the-title-of-the-current-active-window-using-c — Igor, Sep 04 '15 at 10:09

score 0 · Answer 2 · answered Sep 04 '15 at 06:34

0

What you need is "UWP Bridge for web apps" ;-)

Look in the Windows Dev Center: UWP Bridge for web apps - Create your app now

answered Sep 04 '15 at 06:34

Asesjix

3,891
3
16
19

How to embed web application into windows app with custom behavior

2 Answers2