WPF Navigation

Latest news

10 Jul 2009: Silverlight Version 3 released

Windows Presentation Foundation (WPF)

I started to find a lot of articles about some new applications with names such as WPF, WPF/E, Silverlight, XAML, Net Framework 3.0, WinFX, Net Framework 3.5, Expression Design, Expression Blend, SVG and many more. Discussions were often accompanied by what sounded like 'sour grapes' presumably from the anti Microsoft camps. So I decided to take a look and see whether any of this was useful to me and just as importantly was it going to cost an 'arm and a leg' to get on board.

My first look see was at Silverlight since I knew this was targeted at the web and I was hoping to find something that would liven up up the web browser experience. I have noticed that Firefox 3.0 is coming along which brings with it a new graphics engine called Cairo supporting vector graphics. But here was Silverlight available here and now offering vector graphics which allowed developers to start building their own applications. I then discovered Silverlight used XAML which anyone (supposedly) can create just using a text editor. The other component is javascript which again is text based and so to get off the ground should not take too much effort. Also Microsoft has a nice little tutorial explaining some of the basics - see the links section. I decided to learn a step at a time so apologies if all this is rather basic; hopefully in the coming winter months I can get up to speed and by then maybe SharpDevelop 3.0 which supports WPF will be available.

What is WPF?

WPF was formerly code named Avalon and is the graphical subsystem feature of NET Framework 3.0 (this used to be called WinFX). NET 3.0 still occasionally, totally confuses me because NET 3.0 actually comprises NET 2.0 plus WPF, plus WCF (Windows Communication Foundation), plus WCS (Windows CardSpace) plus WF (Windows Workflow Foundation). So when you build an application using NET 3.0 I guess you can use any NET 2.0 element plus any WPF element in combination, but not anything from NET 1.1 (Just as well!!). WPF uses XAML which stands for eXtensible Application Markup Language to define its graphics. This is pre-installed on Vista but can also be downloaded for free for use with Windows XP SP2. XAML is what is known as a declarative language, which in other words means no procedural logic flow is implied. So for example it can contain a definition of all the vector geometry required to display an object. However, if you want some action to take place when for example you hover the mouse over the object then this has to be written in a procedural language, such as Javascript, C#, VisualBasic etc. So there are two elements to WPF, namely the XAML file which can detail the Windows Form or be embedded in a Browser Window, and the process logic file. I sometimes use the SharpDevelop 2.0 analogy where for any form there is a Source file (say Mainform.cs) which tells the system what to do when the form loads etc. and the Mainform.designer.cs which holds all the instructions for laying out the form. Some commentators seem to make a big fuss about what a wonderful idea it is to separate the Business Logic from the User Interface, but to me this seems nothing new. In fact it seems that this is just transferring a sound design principle based on designing desktop applications to the Internet.

WPF Uses

It is aimed at visual aspects of Windows programs including user interface, 2D and 3D, vector graphics raster graphics animation, data binding, audio and video. The old GDI graphical interface has stood the test of time but now the accent is on better graphics to make applications more intuitive and provide better integration of new media. Of course Microsoft desperately needs to get out of the desktop box, and this is where Silverlight makes its presence felt. Silverlight is a web based subset of WPF, which during development was named WPF/E; E stands for Everywhere. At the moment Silverlight does not support 3D, although this must surely follow later. All graphics will be directed through Direct3D, so although OpenGL can run on Vista it does not seem to be able to be integrated into a WPF solution - somebody will probably prove me wrong on this.

Traditional Standalone Applications

WPF can be used to build traditional standalone applications which are installed on a users personal computer. Users do not need to be connected to the internet to use the application. Previously, I had downloaded the World Clocks WPF application source from the Code Project and had used a SharpDevelop 3 alpha version to compile (Note - you need to have NET 3.0 and NET 3.5 installed). This compiled OK producing a system tray clock application with stunning graphics. However, there were problems viewing some of the the WPF forms using the WPF Forms Designer. It had problems rendering the XAML code. Just recently I have tried a recent version of SharpDevelop 3 Beta 2 (Build 3952) and found that Forms Designer could now render most of the XAML code although there were still some problems with the layout placings. Nevertheless, in my opinion, the Development Environment is coming along very well to the extent that I will stay with SharpDevelop for the forseeable future. If you are developing applications with less visual content, then most people and businesses will probably be totally content with NET 2.0 as this provides a very productive and stable environment for databases and business applications with none of the quirks of XAML. However, there is little doubt that the future lies with WPF and XAML, so it is just a question of when to make the full transition - I can see no great hurry, for the standalone applications.

XAML Browser Applications (XBAPs)

XBAPs are hosted inside a web browser such as Firefox or Internet Explorer. Hosted applications are run in a partial trust sandbox environment and are not given full access to the computers resources. This is a security feature which is designed to protect the user from hacking attacks. Although the XBAP seems to run in the browser it actually runs an out of process executable different from the browser. Compared to Silverlight applications these are fairly heavyweight and make full use of the NET 3.0 framework, so any PC wanting to run an XBAP has to have NET 3.0 installed. Since Silverlight 2.0 has been in beta stages, I have seen fewer and fewer discussions about XBAPs as more features become available in Silverlight, such as controls and binding, with the only notable exception being 3D support where maybe the full weight of NET 3.0 is required. Running an XBAP is a slightly strange experience involving downloading the application to your client where it can be run in the sandbox environment. You actually see the application being downloaded and if you have a Firewall installed and set up correctly you should also see requests to allow temporary folders to be created to hold and run the application. Altogether, a messy process in my opinion, and I hope the need for XBAPs will fade away quickly along with Active X.

Silverlight Applications

Silverlight is the lightweight application which can be thought of as similar to Flash Player, but in my opinion, far superior in concept. I swiftly went from Silverlight 1.0 which uses javascript, to version 1.1 which uses C# as the programming language. From there I migrated to Silverlight 2.0 which is even easier to develop, install and run. Unlike XBAPs, I see Silverlight as being very much part of the present (because there is no NET 2.0 equivalent from Microsoft) and for the future where web sites are going to have greatly increased visual content.

Development Tools

Some people may be surprised to hear that Microsoft does not have a total monopoly on all the tools required to build WPF applications. There are alternatives and part of this brief is to look at some of these.

Microsoft

Naturally Microsoft has the lead in development tools for producing WPF applications both standalone and web based.
Visual Studio 2008 for building WPF apps
Visual Studio 2008 Cider Designer for viewing WPF Design
Microsoft have Expression Design for vector and raster design
Expression Blend tool which is completely written in WPF is used for designing XAML based interfaces for WPF and Silverlight

SharpDevelop 3.0

SharpDevelop 3.0 is an open source alternative to Microsoft and is also able to build WPF apps (currently at Beta 2 version). One thing I have definitely had problems with is using SharpDevelop to build Web Services, although at the moment this is not a priority for me. SharpDevelop 3 will compile almost all Microsoft Visual Studio created projects (including Silverlight) using the .sln and .csproj files. I find that I can safely delete the .suo, and .csproj.user files when compiling with SharpDevelop - I don't believe SharpDevelop uses these.

SharpDevelop 4.0

This is currently at an alpha stage with the Workbench now being written in WPF as opposed to Windows Forms. All new functionality will be written in WPF. For the moment this is at an 'Experimental' level so I would not recommend anyone using this for serious development. However, it is of interest because it shows that SharpDevelop is already thinking about the future being a WPF future.

Kaxaml

There is also the excellent Kaxaml for editing XAML code (now at version 1.0, although there is a Beta at 1.5 which supports Silverlight). Kaxaml is written in WPF, with the XAML editor providing a split view showing both the XAML code and how it is rendered.

Standalone Applications

Until SharpDevelop 3.0 is released it looks like there is are no free open source solutions to WPF development. However, the beta builds of SharpDevelop are showing tremendous progress, so I will certainly continue experimenting using the pre releases available from the SharpDevelop build server. Generating the XAML code will be quite a challenge so it will be interesting to see how this develops. It is already feasible to develop and test XAML code outside of Sharpdevelop and then use the editor to paste the XAML code into the project.

Silverlight 3.0

I started off using the Silverlight 1.0 plugin, but after a short time I found that I really wanted to try version 1.1, so rather than having two versions on my PC I changed everything in the following to work with the September alpha Refresh 1.1 and then when Version 3 was released changed again. Looking at the Microsoft Quickstart page I saw that all you need is the Silverlight Plugin for your browser and Notepad. I would change this just a little bit as follows :-

Silverlight Plugin - from Microsoft
SharpDevelop 3.1 Beta 1 - for compiling projects

Addtionally I have found the following useful :-
Inkscape - For SVG Graphics
Visifire - for Charts (Microsoft Silverlight Toolkit is also a popular choice)
Paste2Xaml, ViewerSvg - obtained from WPF-Graphics website (note - there are also commercial versions which are not free)
Kaxaml - for editing XAML

Note that all the above are free for private use.

Silverlight and ASP NET

I noticed that projects built with Visual Studio often contain the following folders :- folder containing the control, a Test Application and a TestApplication_Web. I try to compile in SharpDevelop and I get a warning for the TestApplication_Web that 'the project file cannot be found' whilst the control and Silverlight applications compile just fine. I guess the TestApplication_Web is something to do with writing a control that runs on the server using the ASP NET framework. At the moment I have not investigated this any further, so whenever I see a folder with a Web suffix I straightaway remove the reference from the SharpDevelop project tree and then delete the Web folder. However some applications require the Web server part of the project to function properly e.g. when using a web service to obtain local time and or weather from a server to be fed back into the Silverlight application.

Converting SVG to XAML

The Microsoft Quickstart page gives a fair indication of how to produce a basic Silverlight application with an introduction to XAML. What I wanted to do was found out how easy it is to convert SVG to XAML and what if any are the drawbacks. The Open Clip Art Library contains quite a large collection of SVG images so I started off looking at converting some of these. I used a variety of methods, all with varying degrees of success :-

Method 1 - Using Inkscape and Adobe Reader

1. Open the SVG in Inkscape.
2. Save it as a PDF.
3. Open the PDF in Adobe Reader.
4. Print the PDF to "Microsoft XPS Document Writer" (I changed the paper orientation to landscape, otherwise the image is rotated by 90 degrees and did not use scaling).
5. Rename the xps to zip.
6. From the zip extract out /Documents/1/Pages/1.fpage
7. Rename the fpage to xaml
8. I then used the XAML file to feed into a SharpDevelop template (my own) to create the .XAP file

Method 2 - Using Inkscape export to XAML

The new version 0.46 of Inkscape now allows SVG files to be directly exported to a XAML file. This is much less cumbersome than going via a PDF file.

Method 3 - Using OpenOffice

As far as I can see there is no reason why you can't use OpenOffice Draw with the SVG Import filter instead of Inkscape to produce a similar result. In fact the OpenOffice export to PDF seems to give a more faithful representation of the image when viewed in PDF; some experiments to follow. Unfortunately, I tried to import a 600 line SVG file using the OpenOffice filter, but this failed to load with an input output error so it was back to Inkscape.

Method 4 - Using ViewerSvg or XamlTune

I used ViewerSvg to read the SVG file and to produce a XAML 2.0 file. I was impressed that this was very simple and was used to render markc09_Blue_biplane_with_red_wings_1.svg (obtained from OpenClipArt library). See below - it may be of interest to note that the converted XAML file was 37 Kb and the generated compressed XAP file was only 18 Kb. XamlTune on CodePlex also produces a very acceptable result; this time the resultant XAP file came out at 20 Kb. You need the Silverlight 2 plugin for this to work.

However, I found ViewerSvg had problems with some of the more complex images particularly regarding rendering of shading, which seems to be a common problem when converting from SVG. Of the four methods described here, I have found ViewerSvg and XamlTune provide the best and most consistent results.

Performance

There have been some interesting experiments looking at the performance of animations using different browsers and operating systems. Firefox did not do well against IE6 although it performed nearly as well as IE7; Opera and Safari were the front runners if you exclude the Appollo alpha results. XP was way ahead of Vista and all the other operating systems including Mac and Linux. WPF was front runner ahead of WPF/E and Flex. You can have a look at test results at Metalink Bubble Test Results

ePlaice / For the Best Software on the Net

Mainly Free and Open Source Software