Enter your search terms

Submit search form

WPF Navigation

SVG to XAML Conversion | Standalone WPF Applications | Silverlight 2 | Project Template for Silverlight 2 | Silverlight Re-use | XAML Introduction | WPF Data Binding | WPF Styles and Templates |

Latest news

14 Oct 2008: Silverlight Version 2 released

22 Aug 2008: SharpDevelop 3.0 Beta 2 has been released - you can get it on Sourceforge as well as at Sharpdevelop downloads.

Links:

• Silverlight Quickstart
• Kaxaml Viewer and Editor

Generating XAML Code

At first sight it seems a little disappointing to find out that existing standards such as Scaleable Vector Graphics (SVG) Files could not be used directly in Windows Presentation Foundation (WPF) and Silverlight (WPF/E). However, once you have a look at the scope of XAML you will see that it is much broader than SVG and is probably one of the reasons why SVG has had limited backing from the major software vendors.

Note - I changed the above to work with Silverlight version 2.0 - and I am now pleased to say that this little test now works in both IE7 and Firefox 3. Now that there is some really excellent free SVG clipart available, it would certainly be advantageous to be able to make use of this particularly in web applications. With the Silverlight version 2 proving to be a very popular web development tool I became even more convinced to go the XAML route. At the moment I am unsure as to whether Firefox 3 will allow SVG images to be embedded in HTML similar to JPG or PNG image files. I suspect not and suspect even more that Firefox 3 will not allow any animation of the images. So in order to jump on board the Silverlight developments there needs to be some tools available to perform these conversions. I am also interested in making use of Charts, typically created by Excel or OpenOffice on some of my web pages. Again it should be possible to take an Enhanced Meta File (EMF) or Windows Meta File (WMF) and generate some XAML code. The following looks at the possibilities and some of the limitations of these tools. This page first looks at how to embed XAML code into your project and then progresses to see how easy it is to animate your XAML code using C#.

Basic Requirements

I started off using the Silverlight 1.0 plugin, but after a short time I found that the Silverlight 2.0 Beta 1 version suited my needs much better. Silverlight 2 uses C# and does not require any javascript to run, so it means I can concentrate all my development effort on one language. Of course it does require some knowledge of XAML but the SharpDevelop (there are also Microsoft applications you can use) development environment means that WPF and Silverlight merge these two languages into a common environment. Javascript does not seem to be integrated in this way. Looking at the Microsoft Quickstart page (which is aimed at Silverlight 1 - javascript based) I saw that all you need is the Silverlight Plugin for your browser and Notepad. For Silverlight 2 I have found the following esssential :-

Silverlight 2 Plugin - free download from Microsoft
Development environment - SharpDevelop 3 can be used to build your application
Microsoft NET 3.0 and 3.5 frameworks - these are required for SharpDevelop

I have found the following Applications and Utilities very useful :-
Notepad++ - to provide colour coded highlighting for HTML and XAML
Silverlight Project Template - I found it was best to write one for SharpDevelop (note I haven't altered the language binding from WPF to Silverlight so there are minor edits to be made to the .csproj file)
Inkscape - For developing and viewing existing SVG Graphics
OpenOffice Calc - For developing Charts to subsequent use in Silverlight applications (if you have Excel then this is preferable but not free)
Paste2Xaml - Used to convert metafile data (such as EMF) to XAML
ViewerSvg or XamlTune - Used to convert SVG to XAML
Kaxaml - A useful viewer for XAML
Note that all the above are free for private use.

Setting up a SharpDevelop Silverlight Project

Unfortunately SharpDevelop does not come with any Silverlight templates so the only thing to do is to make one which can then be used to add your own specific code later. This proved to be a bit more difficult than anticipated - but I managed to develop a template that does most of the work. See Creating Silverlight 2.0 XAPs. If you follow the instruction you will find that you have a skeleton Silverlight project which can then be used to add your own XAML and C# code.

Converting SVG to XAML

I have tried a variety of methods to convert SVG to XAML including some fairly 'dirty' methods involving using PDF files and Adobe Reader or OpenOffice Writer. None of these proved very satisfactory so I was quite pleased when I saw that Inkscape had a Save to XAML feature in the latest edition 0.46. However, this again did not prove to be an ideal solution, so I started looking again and eventually happened across ViewerSvg and XamlTune. At the moment I cannot say which is best as they both have advantages and disadvantages. The picture of the 'Biplane' above was produced on using ViewerSvg, whereas this example uses XamlTune and shows the basic steps involved in creating a Silverlight application which just displays a vector drawing as shown above :-

Generate the XAML code

I chose 'kattekrab_gumleaves.svg' from the Open Clip Art Library because this never rendered correctly with any of the methods using PDF files. Using an Inkscape XAML file caused many problems because line feeds were not generated correctly and I gave up trying to use it. I also tried using ViewerSvg which produced an image, but some of the shading was not rendered accurately. So then I tried XamlTune :-
Load the input file using the input screen
On the Output screen specify 'Silverlight' and check radio button 'Input window'
Press 'Transform' button and you should see the image on the top left of the window and the code on the bottom left
Copy the XAML Output into your Page.xaml between the grid statements of your SharpDevelop project
Edit the first Canvas statement so that all that remains is the Canvas - i.e. remove xlmins etc.
Build Solution
You should obtain an image that looks very similar to the original SVG file when you open the generated TestPage.html

ViewerSvg versus XamlTune

Both of these applications do a very good job at converting SVG to XAML and I am sure whatever I write here will be proven wrong quite soon when new versions of these applications are released. At the moment (May 2008) it seems to me that XamlTune has the edge for the following reasons :-
The source is freely available on CodePlex - I used SharpDevelop to compile the application
Some of the graphics rendering are more faithful to the original SVG

Animations

Once you have your graphic sitting on your web page things become much more interesting when you start animating some of the objects. It is important to realize that all animations can be achieved in C# code as well as XAML (these are in general more complex than can be achieved with XAML alone). The following examples just deal with XAML code animation.

Object Animation

The easiest animation to implement is to simply move an object on the screen,; just as I did with the Biplane example above. First of all assuming you get your XAML code for the object, and moved it in to SharpDevelop the next action is to try moving it about the screen. So we give a name to the top level Canvas object as follows :-

To animate an object in Silverlight all we need to do then is precede our XAML code with the following :-

Note that if your XAML code comprises many objects you can choose to animate selected intermediate objects - maybe it would be nice to animate the prop in some cases!! The DoubleAnimation above refers to the type of object being animated - in this case a Canvas object is of type Double. Also, the animation can be a single loop (the default), multiple loops or if you really want to annoy set the RepeatBehavior to 'Forever'.