Updating WinForms with WPF… Getting Started

The intent of this blog entry is provide some guidance for WinForm developers wanting to migrate their apps to a more modern application architecture without throwing the existing app out and starting over completely.  I think that there is also some help here for XAML developers wondering how to make use of their spectacular UX design skills in updating an existing WinForm application (again without throwing out everything).

I hope to have an entry for each step in the process and you can feel free to jump in and out as you wish.  Once you have the basics, you might not care about adding MVVM but it’s here for you should you need it.

Updating WinForms with WPF/XAML

1. Getting Started
2. Adding MVVM
3. Adding Commands
4. Messaging between Technologies
5. XAML Islands – Where we want to be!

XAML Islands

Microsoft recently announced XAML Islands at Microsoft Build 2018.  This nifty technology lets you essentially embed UWP XAML inside WinForms and WPF applications.  This is really wonderful technology that lets you bring Fluent Design language to WinForms and WPF.  It lets you bring design patterns like MVVM to WinForms.  This is truly awesome stuff but there is one caveat.  Your new updated app with XAML Islands will only install and run on systems running Windows 10 with .NET Core 3.  This is totally understandable as you simply cannot add Fluent design to a WinForms application that is primarily being used in a corporate Windows 7/8 environment or even a Windows 10 environment that hasn’t been brought forward by your IT department yet due to operating system limitations.

But there is a short term solution that will get you on the right track in WinForms.  It will let you start creating XAML pages that have full separation of UI and code using design patterns like MVVM with little or no trouble.  Once you have these pieces in place it becomes trivial to move forward to a fully Fluent Design when your Windows Platform catches up with your code.

Adding WPF/XAML

In this blog I’m going to discuss how adding WPF controls to your existing WinForms application can be achieved and what some of the benefits you can gain will be.  Not only will your UI gain a bit more of a modern look and feel but the relationships of your data with your views will be more separated yet work together with so much less code.

I have a customer with a legacy WinForms (VB/C# mix) application that needed updating.  The code had been in development for close to a decade and was becoming increasingly difficult to maintain.  When we discovered that one VB.net WinForm needed to be re-engineered, we wanted to implement it using a more modern WPF (XAML)/MVVM pattern.  There were several reasons behind that preference:

First, they want to eventually move the application to Windows 10/UWP but it’s such a complicated application that moving it all would be prohibitively complicated and expensive.  However the one form that has to be done can be replaced now.

Second, most, if not all, of their desktop systems are now running Windows 10 so we are not restricted in what we do by older operating systems.  I do want to stress that “most, not all” which prohibits us from using XAML Islands which are in preview for insiders as of this writing and not practical yet in a production environment.

Lastly, while the preference was to jump to UWP, the XAML Islands only supports a very few number of controls today (with more on their way) and is still in “Developer Preview”.  We might make use of them if they are relevant but the four controls currently in preview, the WebView, InkCanvas, InkToolbar and MediaPlayerElement were not something we needed for this particular application.  (although the Ink controls might be soon, once the hardware investment in ink enabled screens happens).

So WPF it was.  Adding WPF to a Windows Form is surprisingly simple.  The big thing is to carefully consider what exactly you are trying to accomplish.  So lets list our the goals.

1. Use XAML to define the UX so it has a more modern feel and can be moved forward to UWP XAML without too much pain.
2. Separate XAML from the Business logic that allows the form to do what it needs to do and providing a simple way to move that business logic forward to UWP without having to completely rewrite everything.

I really wanted the MVVM design pattern, a pattern particularly well suited to the XAML style of UX.  This would allow me to easily carry forward any code I made in the model and view model to any UWP application wanted in the future.  Here is how we did it as a mock-up.  You could easily start with an existing application but I find the first time I try something different it helps to get rid of the clutter by using a mock-up.

Tutorial

1. Open Visual Studio 2017 (I’m using version 15.8.3).
2. Click on New Project.
3. Select Visual C#/Windows Desktop/Windows Forms App.  (Up to this point you could and quite likely will use your own existing WinForms application)
4. Inside your Solution Explorer add the following folders:
1. Views
2. View Models
3. Models
5. Inside Views folder, add a New Item
6. In the tree, select Visual C# Items/WPF/User Control (WPF)
   
1. Essentially we are going to create a user control in WPF that does everything we want it to and embed that in a WinForm using the included ElementHost control
2. So, add a simple TextBlock and good ‘ol “Hello World” to your control.
7. Build the Application.  This will cause the control to appear in the “Toolbox” so you can add it to your WinForm.
8. Open the WinForm
9. Open the “Toolbox” and find your WPF control, probably called “UserControl1” unless you renamed it and drag and drop onto your form.
10. Dock the control and you now have a WPF UX inside your WinForms App.

Of course, this just adds a really simple WPF form and you can go ahead and modify the XAML anyway you like.  Make sure you make it responsive (no fixed height or width if you can avoid it) so that it resizes with your WinForm.  Basically best practices for creating a WPF UX that is fully responsive is the way to go.

For those of you who are WPF developers you are off to the races.  In our next blog I’ll show you how to add the MVVM pattern.

Next –> Updating WinForms with WPF… Adding MVVM.