I first crossed paths with Windows Presentation Foundation/Everywhere (WPF/E) on Mike Harsh's blog post about the Mix '06 event in March of 2006. I knew about XAML and where Microsoft was going with their presentation layer tools, but our company creates mass-market desktop software that doesn't utilize the .Net Framework yet. This meant any XAML or WPF was off limits for us. That is until MS announced WPF/E.
In Mike Harsh's words "(WPF/E) is a cross-platform, cross-browser web technology that supports a subset of WPF XAML. WPF/E also has a friction-free install model and the download size we’re targeting is very small. WPF/E supports programmability through JavaScript for tight browser integration. The WPF/E package also contains a small, cross platform subset of the CLR and .NET Framework that can run C# or VB.NET code."
So XAML and WPF can now be hosted in Internet Explorer. Since my company's desktop applications host IE for the presentation layer, then our presentation layer can take advantage of XAML and WPF. Unfortunately there was not much to be heard of WPF/E since March, but this month MS released a CTP of WPF/E.
where to get started
Probably the best place to get started is the WPF/E Dev Center on MSDN. Download and install the SDK so you can start trying the examples. The Dev Center has a few that you can look at. Mike harsh has also built a cool little application that let's you test your XAML code, called WPF/E Pad. Once you have the SDK installed you can run the WPF/E Pad and try some of the built in examples. After you get a feel for what can be done try entering some of your own XAML. Try copying and pasting the source from below into the bottom panel of WPF/E Pad and clicking the Load button.
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="_037_bugs_logo" Width="1056" Height="816">
<Ellipse Height="200" Width="200" Canvas.Left="30" Canvas.Top="30"
Stroke="Black" StrokeThickness="10" Fill="SlateBlue"/>
<Rectangle Height="100" Width="100" Canvas.Left="5" Canvas.Top="5"
Stroke="Black" StrokeThickness="10" Fill="SlateBlue"/>
<Line X1="280" Y1="10" X2="10" Y2="280"
Stroke="black" StrokeThickness="5"/>
</Canvas>
You should end up with something like the screenshot to the left. The XAML creates an ellipse, a rectange and a line. This is not a very compelling example (it was taken from the MS SDK download) but it gives you something to start with. What's nice about the technology is that it allows you to interact with the XAML code using JavaScript. So you can create a bunch of objects using the XAML markup and embed it in your web page, then use JavaScript to program those objects. For example you can attach events to the XAML objects (similar to DHTML) and handle those events in your JavaScript. WPF/E Pad doesn't support event handling at the moment, so you have to take the next step and create your own web page to test out event handling. Those steps are covered in detail within the WPF/E SDK.
what's next?
What makes all this really interesting is how Microsoft is backing up this technology with their development tools. They've recently released an entire suite of apps to generate, manage and debug XAML. Check out their Expression Suite. I think the development tools will be able to target WPF/E versus WPF at some point. Exciting stuff.