Skip to content

XamlWebPad, View Your Raw Silverlight XAML without Blend or VS.

Updated: at 11:17 PM

Introduction

Silverlight, is the new name for WPF/E which was formally introduced at the  MIX07 conference in Las Vegas a couple weeks ago.  Basically, it's a stripped down version of full WPF Xaml that works on the web by installing a custom plug-in in them most popular browsers in a similar way to how flash works.  The great thing about this technology is that it works cross platform.  Mac's, Linux, etc.  The other major announcement at MIX07  was that it supports programming in .NET.  This means that Silverlight applications can be developed in c#, my favorite programming language.  I'm not that great a JavaScript so this is great news for me because I want to be able to build highly interactive applications, and so far, with asp.net and little JavaScript, this has  been very limiting for me personally.

For those not wanting to read on and just try it, here is the link:  http://xamlwebpad.peterkellner.net/

There is another application that you might try:  Silverlight Pad(Updated 4/19/2008 Peter Kellner)

My First Production Silverlight Project

Fast forwarding to now, I'm currently building my first production Silverlight application.  Believe it or not, my JavaScript skills are significantly better than my actual design skills.  Fortunately, XAML allows me to more easily work with a professional designer who can provide me with Xaml.  I've been very fortunate in this current project to be working with an outstanding designer, who like me, is just learning the new Silverlight platform.  We are of course using the latest beta of

Blend which is very helpful.  There is a problem however.  While the May Beta of Blend provides help in using the correct subset of xaml for Silverlight, it does not give you any errors if you import Xaml from other sources (such as Adobe Illustrator exports).  This means, you feel like you have good Xaml but you really don't.

We are not in Kansas anymore

So, how is this a problem?  The problem shows up when the designer hands off code to the programmer (me in this case).  The code doesn't work and when I send it back to the designer, he has no good way of fixing it.  Microsoft has acknowledged this as a problem and my guess is that in an upcoming release (beta or production) of Blend, they will have something that shows errors if you set your xaml to "Silverlight Mode".  for now though, what do do?

XamlWebPad to the rescue

In comes the new XamlWebPad (obsolete)! Though you can suggest to the designer that he or she review the Silverlight SDK for what tags to use, you will likely not be very popular. It would be very painful to go tag by tag and figure out what works and what doesn't.  To make the designer's life easier, I've created a simple web app using asp.net 2.0 and Silverlight that lets the designer cut and paste their code into a textbox and then press the "Process
XAML" button and see how it will render.  If there are errors, a MessageBox will pop up showing the errors (one at a time, sorry) with the tags that did not work.

Is XamlWebPad Perfect or even done?

Most certainly it's not perfect, or even done (time permitting).  I wrote it on a plane ride from Miami returning from my Gadget Presentation at VSLive in Orlando last week.  One glaring hole is that it does not support showing images. 
That is because you are only uploading your Xaml, not your images.  If you really want to see an image, you can of course point your image to a remote source as I've pasted below.  Then you will see it working but you will have to change it to a relative image in your final Xaml most likely.  It's not a very pretty app, but it does the job.  Feel free to use it and certainly post suggestions to the comments of this blog post.

<canvas xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="640" Height="480">
    <textblock Width="253" Height="72" Canvas.Left="28" Canvas.Top="81" Text="TextBlock"
     TextWrapping="Wrap"/>
    <path Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Width="205.027"
     Height="52.03" Canvas.Left="45.5"
       Canvas.Top="98.47" Data="M46,150 C257,73 250,106 250,106"/>
    <image Width="100" Height="100"
      Source="https://peterkellner.net/wp/wp-content/themes/arzel_xt2/images/bearflag.jpg"
      Stretch="Fill"/>
</canvas>

Feel free to use it as much as you want and good luck with your Silverlight projects.  Look for my posts on the forums and I will of course be looking for yours.  The crew at Silverlight asked me to be a moderator at the Silverlight forums I guess because they think because I'm a moderator on the asp.net forums I know what I'm doing.  It's a great place to get answers, and the more of us that use it, the more useful it will be.

There is another application that you might try:  Silverlight Pad(Updated 4/19/2008 Peter Kellner) Happy coding.



https://peterkellner.net

(Above is a screen shot of what the web page looks like.  Click on it to be taken to the real deal)