This guide explains how to create a desktop application using WPF (Windows Presentation Foundation) that integrates a web application hosted in MVC (Model-View-Controller).
- Visual Studio
Microsoft.Web.WebView2
package for WPF
-
Create WPF Application:
- Start by creating a new WPF application project in Visual Studio.
-
Install WebView2 Package:
- Install the
Microsoft.Web.WebView2
package in your WPF project. This package enables embedding a Chromium-based WebView control into your WPF application.
- Install the
-
Set up Communication:
- In your MVC project, add JavaScript code to send messages to the WPF application. This can be done in the layout page (
_layout.cshtml
) or any relevant JavaScript file. For example:
if ( window.chrome && window.chrome.webview && window.chrome.webview.postMessage ) { window.clientAdapator = { processUICommand: (c, d) => { window.chrome.webview.postMessage( JSON.stringify({ command: c, meta: d }) ); }, }; }
- In your MVC project, add JavaScript code to send messages to the WPF application. This can be done in the layout page (
-
Handle Messages in WPF:
- In your WPF application, handle the messages sent from the WebView control. This can be done by subscribing to the
WebMessageReceived
event. For example:
private void SystemWebView_WebMessageReceived(object sender, CoreWebView2WebMessageReceivedEventArgs e) { // Process the received message string message = e.TryGetWebMessageAsString(); // Handle the message as needed }
- In your WPF application, handle the messages sent from the WebView control. This can be done by subscribing to the
-
Run the Application:
- Build and run both your MVC and WPF projects. The WPF application will embed the MVC web application and communicate with it using the WebView control.
-
Web Integration: Embeds a web application into a desktop environment, enabling access to web-based features and resources.
-
Desktop Functionality: Provides access to desktop-specific features and resources, such as local file access or system notifications.