Scott Hanselman

I finally got around to trying a .NET 3.5 XBAP (XAML Browser App or "WPF Browser Apps") in Firefox, and it works just as advertised. I put together an incredibly useful and powerful application consisting of a picture of me and a button. I think everyone will want to run it. ;)

Seriously though, it's very easy to deploy apps like this. This reminds me of the year I spent working for Aurum (then a division of Baan) creating a large application using VBPs - ActiveX Documents.

These were the same basic idea. Your application would run - then IE4, methinks - using the Browser as it's Window Frame, much the way Word or Acrobat can open up a document inside the Browser. This is all still very old-school ISite COM stuff.

Anyway, XBAPs aren't Silverlight, they are the Full .NET Framework in your browser. With .NET 3.5 that means IE or Firefox. Think of XBAPs as ClickOnce applications that never jump out of the browser.

Keep in mind that mine is a silly example, and yes, this one could be done with DHTML, however the Woodgrove Finance Application (a .NET 3.0 WPF Application, seen above in Firefox) would be more challenging, hence the idea behind WPF Browser Apps.

I fire up VS2008 and hit File | New Project | WPF Browser Application.

Then, I drag an image on the Page and a Button. I use Split Screen View so I can see the XAML being written a the same time. I double-click on the surface, then go back and double-click on the button. That adds the Loaded= and Click= event handlers you see below. I could have typed this manually also.

<Page x:Class="WpfBrowserApplication1.Page1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Page1" Loaded="Page_Loaded">
    <Grid>
        <Button Height="57" Margin="70,0,70,24" Name="button1" 
             VerticalAlignment="Bottom" Click="button1_Click">What a great App!</Button>
        <Image Name="image1" Margin="50,18,48,96" >
            <Image.RenderTransform>
                <RotateTransform Angle="0"
                     CenterX="100"
                     CenterY="100" />
            </Image.RenderTransform>
        </Image>
    </Grid>
</Page>

I'm going to do two things. One, I'll load a picture from an Embedded Resource. I could have loaded it from a location like my web server, but this is harder and educational for me. Then, two, I'll make the picture turn when I push the button. I could add an Animation declaratively but again, this is a little harder and more interesting.

First, getting the embedded graphical resource. This might look familiar if you've done it with WinForms.

System.IO.Stream stream = this.GetType().Assembly.
                GetManifestResourceStream("WpfBrowserApplication1.MyFile.jpg");
JpegBitmapDecoder bitmapDecoder = 
           new JpegBitmapDecoder(stream, 
               BitmapCreateOptions.PreservePixelFormat, 
               BitmapCacheOption.Default);
ImageSource imageSource = bitmapDecoder.Frames[0];
image1.Source = imageSource;

I've made it more lines than is needed, but basically, get the stream, decode the graphic (Gif, Jpeg, PNG) and grab the Frame. If it were a Gif, it might be animated, hence Frames[0].

Ok, easy. Now to make it spin. And not just turn in a chunky way, but smoothly turn 60 degrees with each button press. I make an animation, set a From and To value as a double and tell it to last a half second. Then I grab the RotateTransform off the image and begin the animation.

private int angle = 0;
private void button1_Click(object sender, RoutedEventArgs e)
{
  DoubleAnimation ani = new DoubleAnimation();
  ani.From = angle;
  angle += 60;
  ani.To = angle;
  if (angle >= 360) angle = 0;
  ani.Duration = new Duration(new TimeSpan(0, 0, 0, 0, 500));

  RotateTransform tran = (RotateTransform)image1.RenderTransform;
  tran.BeginAnimation(RotateTransform.AngleProperty, ani);
}

There's a pile of good articles and books out there on WPF. What strikes me is how many high level it is. It's nice to think of constructs like angle and RotateTransform rather than doing the math.

The silly result of this code is at http://www.hanselman.com/clickonce/takethree/WpfBrowserApplication1.xbap and it works in both Firefox and IE if you have .NET 3.5 installed.

Related Posts

• WPF Contest and Prizes! Ends Feb 29th, 2008!
• 3D Chess in the Browser by Valentin Iliescu
• 3D Physics XBAP by Chris Cavanagh and Source
• It's been one of those Old School Weeks - ActiveX Documents 

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

About   Newsletter

Hosting By