Translate C# WPF Applications To HTML5 with WPF.Polymer Part I – The GUI

Hi everyone,

I will show you in this post a concept of how to turn arbitrary desktop software that was written for example in C#/WPF into HTML5 cross platform solutions, with the help of new HTML5 features like Web Components. Or in other words, the next generation of hybrid software.

But before we jump into the details, I will provide some background information, why this technique can save you as developer a lot of time and your company tons of money:

Probably the biggest problem of modern software development

The demand in well designed and intuitive UIs and therefore the complexity in UI development has heavily increased over the last years. For this reason, modern software studios need more than just guys who produce code. Roles like e.g. UI engineers, user experience(UX) designers, graphics designers or usibility testers are highly requested, if you want to develop good software that matches today’s standards. Moreover, from a software engineering perspective it’s a good idea to seperate the GUI development and the application from the beginning. These two circumstances lead to the fact, that you will usuallly have at least two different teams and projects: one for the user interface and one for the application logic.

For this reason, modern programming languages, frameworks, toolkits and tools allow developers to write the GUI in a declarative way, while the behavior and the application logic are written in code. This allows designers and UI engineers to develop the visible parts, without having to write code and enables them to easily share their work with developers. The developers in turn, just have to fill in stubs and method bodies, in the next steps, to get the UI to life.

If you are developing a C# software for Windows then you are really lucky. Microsoft not only provides you with a full feature rich and extremely comprehensive GUI framework, Windows Presentation Foundation(WPF), but also with an extremely powerful IDE (Visual Studio, Expression Blend), that supports you and your team with all technologies in a seamlessly integrated way. But, and this is a but with a capitalized ‘B’, as soon as you are going to leave the Microsoft/Windows world you are forsaken.

Here are the options, i.e. what you can do to get your software running on different devices and platforms:

1. Rewrite everything that you have done in another language. You will then have to use different technologies (IDEs, Frameworks) and target at the specified platform, which can look like this:
SWTeamsMultiPlatforms
(Image description: you will need a bunch of people, that you normally would not need. All with their own unique skill set. You will need developers and designers for every UI toolkit and technology and you will probably try to create an artificial, shared resource base. You will need team leaders for each team as well as engineers since the problems in architecture and design are fundamentally different. Your coordinator will quit her job after two weeks, because the smartphone app for iOS and Android look totally different)

2. … actually, that’s it. A lot of people might want to scream now “that’s not true! you have stuff like Silverlight and Mono”, but be honest, this won’t work:

“There’s absolutely no way you can run full-fledged WPF app on Mac. I’m not even sure if this is possible in Parallels. The best thing you can do is to use Silverlight, which was previously named “WPF/E” and does run on Macintosh.”

Top answer – http://stackoverflow.com/questions/580970/running-a-c-wpf-application-on-a-mac

“Silverlight will continue to be a cross-platform solution, working on a variety of operating system/browser platforms, going forward, he said. “But HTML is the only true cross platform solution for everything, including (Apple’s) iOS platform,” Muglia said.”

Bob Muglis, Ex Microsoft President in charge of the company’s server and tools business

“But in the past few months, Microsoft’s backing of HTML 5 has gotten more aggressive. Microsoft is pushing HTML 5 as the way developers can make their Web sites look more like apps. (“HTML5 enables you to make engaging and interactive sites. With full hardware acceleration of the browser, HTML5 pages feel and run like an app or a game,” said IE chief Dean Hachamovitch during the opening PDC keynote yesterday.)”

http://www.zdnet.com/blog/microsoft/microsoft-our-strategy-with-silverlight-has-shifted/7834

“If you intend to build dynamic interfaces that will last longer than the next model of Windows phone, acquire HTML5 tools — don’t buy into the “it’s not really dead” line. ‘Supported’ isn’t the same as ‘alive'”

“I’m sitting here waiting for Visual Studio to install a bunch of Silverlight crap. Please, Microsoft, kill it. Adobe isn’t even developing the real thing, Flash, for mobile. It’s all HTML5, although the hand-coding in HTML5 is awful.”

https://social.msdn.microsoft.com/Forums/silverlight/en-US/f9e15a37-8c5a-4c32-9d38-1d5b57da68de/is-silverlight-dead?forum=silverlightdevtools

A Concept for Crosscompilation

SWCrossCompilation
This graphic is showing what we would like to have. We would like to develop in “our” language with the tools and frameworks we like and leave the rest to a compiler. I think everyone knows that multi platform development is a creature from hell and no one likes this stuff- wouldn’t it be great to have a compiler doing the work for us? Now, I want to talk about this little black box entitled “compiler” and how it can be developed.

In order to “compile” or translate a project from C# WPF, we basically have to perform two steps:

  1. Translate the GUI to Polymer
  2. Develop a strategy for the “Code-Behind” (Next Post)

Translate the GUI to Polymer

The declarative language for WPF is XAML, which is a XML dialect. If you are interested, here is a list of user interface markup languages on wikipedia, with a dozen more. All these languages have one thing in common: they can easily be translated into another XML representation. And the XML I’m targeting for is HTML or more precise XHTML.
220px-XSLT_en.svg

All we need to do is to define a XSLT document with translation rules. And you will be surprised how easy it is to translate XAML for example into HTML. The XSLT I used actually has less than 30 lines of code. What I am simply doing is shown in the code below.

As you probably have noticed, the only difference is that I prefixed all the elements with “WPF-“. If you would now open your browser and throw this code into it, it would just ignore everything because span, div, or body are valid tags while WPF-Grid, certainly is not. At least not now.

Enter Polymer

Polymer is an awesome cross-browser framework, created by Google, that enables all the new Web Components features in your bowser today! It allows you for example, to get rid of the “span and div soup” and to create your own tags with readable semantics. All the messy stuff, that is needed for the browser to understand your tag is encapsulated in the so-called shadow dom. That means: I can define my own Grid-Tag with Polymer, which is internally constructed of all the tags that are understandable for the browser, and from now on, every other browser will be able to understand this tag. So I started to define these tags…

WPF.polymer

WPF-Class-Hierarchy

Unfortunately, WPF has a lot of tags. Tags in WPF correspond to classes, since XAML is just another way of constructing and initializing objects. Whenever, I needed a new tag like “WPF-Grid” I implemented all the classes, i.e. Polymer components down the hierarchy path and attached the methods and properties according to the MSDN class specifications. Since Polymer supports inheritance out of the box (and a lot more), it was really easy for me, to came up with a quick proof of concept.

Proof of Concept

The first application that I translated was a MediaPlayer example from the MSDN pages. At the lowest layer, most WPF.polymer components are just wrapper for existing elements.
An early version of the MediaElement for example is this:

As you can see, the MediaElement extends the FrameworkElement. It does not have to specify Width and Height properties since they are inherited. It consists at its core just of a single video tag, which is HTML5 standard conform. And it exposes a new Source attribute to set the content of this element.

If you define the relevant elements and run your slightly modified desktop / XAML code in the browser, you will have the EXACT SAME GUI + BEHAVIOR!

WPFMediaPlayer

WPF.polymerMediaPlayer

Summary and next post

This post tried to explain that a lot of development time of modern software is spend on the GUI and that this is usually done in a declarative way as with WPF & XAML. Moreover, I wanted to show an approach how extensible user interface markup languages can be transformed into HTML5 and how we get the browser to understand the information using Polymer and Web Components.

In the next post I will explain, what to do with the tricky code-behind file. How to deal with local resources like databases. How you manage to write code once and deploy it on Smartphones, a Mac, in the Web, Tablets and all other devices. Last but not least, I will open source my example code and describe the next steps, i.e. what you need to do in order to transform your boring desktop software into a cross platform experience.

Project Files

WPF.polymer @ GitHub
The “UHU” C#/WPF to HTML5 Crosscompiler @ GitHub

4 thoughts on “Translate C# WPF Applications To HTML5 with WPF.Polymer Part I – The GUI

  1. What you promise for the next post seems promising, however I am very skeptic. I do no think that you will be able to translate much of WPF to Polymer. You say that you will post a solution regarding the code-behind. Are you gonna translate C# to JS?

    A better cross platform solution in the case would be https://github.com/rogerwang/node-webkit It would still require a certain amount of translation if you want to move from WPF, but that will be a one time operation.

    1. Thank you for your feedback! You are right to be skeptic – Polymer can only be used to re-use the existing declarative part of the GUI. The part where it is getting tricky/dirty is the code-part of the GUI. There are bascially two approaches, how to deal with it and I decided to write a X-compiler from C# to JS, which I will put on GitHub. So you are completly right in this point!
      Without spoilering too much: the ideal solution would be to only compile a portion of the code (for the GUI) and to work with adapters and routers to make calls to a server-like version of the original version of the app.
      The link is a really good addition to your comment. Thanks for sharing this!

  2. This is great work. I thought this was possible so I searched for “WPF Polymer” and I landed on your project’s page. I think maybe Microsoft is secretly working on a similar thing.

Leave a Reply

Your email address will not be published.

Time limit is exhausted. Please reload the CAPTCHA.