Click here to Skip to main content
16,016,180 members
Articles / Desktop Programming / Windows Forms
Article

Embedding a .NET WinForms Application in an Internet Browser Using WPF

Rate me:
Please Sign up or sign in to vote.
4.88/5 (38 votes)
2 Dec 2008CPOL4 min read 279.5K   6.9K   112   42
Embedding a .NET WinForms application in an internet browser using WPF.

Introduction

This article will describe how to embed a .NET Windows Forms application in a web browser using a WPF browser application. Basically, this article will show you how to web enable any Windows Forms .NET application with very few modifications to your project and no code modifications to your WinForms app.

Now, I realize that this is cheating, this article does not actually show you how to convert a .NET Windows Forms application to WPF. If you want to take advantage of all the features that come with WPF, eventually, you will need to re-write your GUI into WPF. However, if in the short term it is not feasible to convert all of your GUI code into WPF, then this solution is a primitive workaround that enables you to host your applications online.

Creating a sample Windows Forms application

The first step in this article will be to create a simple Windows Forms C# application. This can be any WinForms application, but for the purpose of this article, I will create a small application that calculates a Fibonacci number and displays it on the user interface. This WinForms application can be in either .NET 2.0 or 3.5.

1_VisualStudioCreateWinFormProject.jpg

My application will have a form called MainForm, a button called btnCalculate, and a text box called txtResult.

2_Fibonacci_WindowsForm.jpg

Here is the code for the button click event and the Fibonacci calculation:

C#
static int Fibonacci(int x)
{
    if (x <= 1)
    {
        return 1;
    }
    return Fibonacci(x - 1) + Fibonacci(x - 2);
}

private void btnCalculate_Click(object sender, EventArgs e)
{
    txtResult.Text = Fibonacci(10).ToString();
}

Now that we have our sample application, the next step is to convert it to a Class Library. Right click on your project and choose Properties. Under the Application tab in the Output type combo box, choose Class Library, save, and rebuild.

3_ChangeProjectTypeToClassLibrary.jpg

Note, in order to have your application be referenced in WPF, this is the only change you will have to make to your Windows Forms project.

Creating a WPF browser host application

The next step will be to create a WPF browser application. You can do this within the same solution as your Windows Forms application, or in a new solution. In this sample, I am simply going to add the WPF browser application project to the same solution. I have called this new project WPFHost.

4_CreateWPFBrowserApplicationProject.jpg

The first thing we are going to do is add a reference from our WPFHost project to our WinForms Fibonacci application.

5_AddReference.jpg

Since the WinForms project is in the same solution, we will add the reference to the Fibonacci project. If the WinForms application was in a different solution, we would browse to the created DLL and add a reference to it.

6_AddReference.jpg

We will also need to add a reference to the Windows Forms Integration and System Windows Forms Component in the .NET tab.

7_AddReferenceWindowsFormsIntegration.jpg

8_AddReferenceSystemWindowsForms.jpg

The next step will be to add a StackPanel to our Page1 XAML window.

Image 9

The full XAML for Page1.xaml is:

XML
<Page x:Class="WPFHost.Page1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Page1">
    <Grid>
        <StackPanel Margin="0,0,0,0" Name="stackPanel" 
           HorizontalAlignment="Left" VerticalAlignment="Top" />
    </Grid>
</Page>

OK, we are almost there. The next step will be to add some code to Page1.xaml.cs in our project. The magic will happen in the Page1 constructor. Our code will create a WindowsFormHost object and assign the previously created MainForm object from our Fibonacci assembly as the child. The WindowsFormHost will then be added as a child to our WPF StackPanel. The only other obscure line of code sets the TopLevel property of the MainForm object to false. I am not sure why this is required, but you will get a compile error if you do not add this step.

The code looks as follows:

C#
using System.Windows.Controls;
using System.Windows.Forms.Integration;
using Fibonacci;

namespace WPFHost
{
    /// <summary>
    /// Interaction logic for Page1.xaml
    /// </summary>
    public partial class Page1 : Page
    {
        private readonly MainForm mainForm = new MainForm();

        public Page1()
        {
            InitializeComponent();

            //Create a Windows Forms Host to host a form
            WindowsFormsHost windowsFormsHost = new WindowsFormsHost();
            
            stackPanel.Width = mainForm.Width;
            stackPanel.Height = mainForm.Height;
            windowsFormsHost.Width = mainForm.Width;
            windowsFormsHost.Height = mainForm.Height;
          
            mainForm.TopLevel = false;

            windowsFormsHost.Child = mainForm;

            stackPanel.Children.Add(windowsFormsHost);
        }
    }
}

Don’t forget to Save.

OK, this is the last step, I promise. It is also the most obscure one that took me some time to figure out. When I first created the WPF project, I could get this code to work in a regular WPF application, but I always received a weird error when I tried it in a WPF browser application. I almost gave up, thinking that maybe it is not possible to host a Windows Forms application in a web browser. At the end, I found a post on Google groups that gave me the solution. The last step is to right click on the WPFHost project, choose Properties, and navigate to the Security tab. In the tab, change the radio button from “This is a partial trust application” to “This is a full trust application”.

10_FullTrustApplication.jpg

OK, I lied, there is one more step. Right click on your WPFHost project and choose “Set as Startup Project”.

Save, Compile, and Run. You should see your default web browser open with the following page:

11_FinalOutput.jpg

Conclusion

That’s it. If you wish to embed the created .xbap in an HTML web page, you can use the <iframe> tag as follows:

XML
<iframe src="WPFHost.xbap" width="329" height="443" />

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Canada Canada

Comments and Discussions

 
QuestionFix Form Move? Pin
NguyenTrungHieu19-Oct-09 6:34
NguyenTrungHieu19-Oct-09 6:34 
GeneralThank you so mcuh. I have a question regarding the 2 "disabled" navigation buttons above "MainForm" Pin
kwandalara12-Feb-09 19:16
kwandalara12-Feb-09 19:16 
GeneralFull-Screen hosted WinForms Pin
Ronchen7773-Feb-09 22:23
Ronchen7773-Feb-09 22:23 
GeneralThanks Pin
silver_surfer14-Dec-08 16:41
silver_surfer14-Dec-08 16:41 
GeneralThanks Pin
ronzulu13-Dec-08 14:00
ronzulu13-Dec-08 14:00 
GeneralCannot create instance of 'Page1' defined in assembly 'WPFHost Pin
AndrusM9-Dec-08 8:49
AndrusM9-Dec-08 8:49 
GeneralRe: Cannot create instance of 'Page1' defined in assembly 'WPFHost Pin
Adam Berent12-Dec-08 3:29
Adam Berent12-Dec-08 3:29 
GeneralRe: Cannot create instance of 'Page1' defined in assembly 'WPFHost Pin
je_gonzalez25-Dec-08 8:17
je_gonzalez25-Dec-08 8:17 
Did you get any further with your error? I get the same...
GeneralRe: Cannot create instance of 'Page1' defined in assembly 'WPFHost Pin
Adam Berent2-Jan-09 3:27
Adam Berent2-Jan-09 3:27 
GeneralRe: Cannot create instance of 'Page1' defined in assembly 'WPFHost Pin
ahaid@hotmail.com27-Feb-09 8:42
ahaid@hotmail.com27-Feb-09 8:42 
GeneralSystem.Windows.Markup.XamlParseException: Cannot create instance of 'Page1' defined in assembly 'WPFHost, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null'. Exception has been thrown by the target of an invocation. Error in markup file 'Page1.x Pin
sandeshmanohar2724-Apr-15 8:23
sandeshmanohar2724-Apr-15 8:23 
QuestionFull .NET framework in a web browser? Pin
Qwertie8-Dec-08 15:23
Qwertie8-Dec-08 15:23 
GeneralCool Pin
Anipro8-Dec-08 10:40
Anipro8-Dec-08 10:40 
GeneralCertificate not found Pin
Ravi Bhavnani2-Dec-08 14:04
professionalRavi Bhavnani2-Dec-08 14:04 
AnswerRe: Certificate not found Pin
Bizounours2-Dec-08 23:01
Bizounours2-Dec-08 23:01 
GeneralRe: Certificate not found Pin
Ravi Bhavnani3-Dec-08 2:10
professionalRavi Bhavnani3-Dec-08 2:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.