Scott Hanselman

Firefox, WPF and XBAP

February 2, '08 Comments [27] Posted in Microsoft | Programming | Windows Client
Sponsored By

WoodGrove Finance Explorer - Mozilla FirefoxI 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.

image

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

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.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web
Saturday, February 02, 2008 7:03:32 AM UTC
I have to agree with you, thats one cool application ;) XBAP would fit perfectly into my current personal project, I'll play with it later this week.
Marlun
Saturday, February 02, 2008 7:32:34 AM UTC
Awesome!

I was spinning Scott like a Top :)
Saturday, February 02, 2008 9:24:54 AM UTC
Hi,
For both the applications above, I'm prompted by Firefox to open using the 'WPF Host' in a new tab. Selecting Ok begins triggers another tab to open, same prompt, same result and son on until either I stop, hit cancel and close all the empty tabs or I let Firefox die under the burden of 50 tabs....

Am I alone with this problem ? It's an issue I've always had with Firefox, Vista and XBaps....

Cheeer
ian
Saturday, February 02, 2008 5:11:17 PM UTC
Dear Scott,

Just an out of topic comment....

With all the work you do, all the articles you write, I often wonder how you get to manage your time. I think an article on your blog about how practically(efficiently!) you manage your time would be very useful to noobs like me and others who follow your blog. I hope you make time for that and write one very soon.

Wish you a great time and good luck.

Krishna Vangapandu
Saturday, February 02, 2008 8:54:08 PM UTC
Can you provide any insight into why someone would want to make an XBAP app? If you decide you need a rich UI and cross-platform does not matter to you (hopefully you are thinking internal deployment only), what advantage does this have over a regular ClickOnce smart client?
What is that advantage of constraining the application to within the browser's window (and yet not following any of the conventional browser rules)?
Sunday, February 03, 2008 3:22:40 AM UTC
Joshua - It's mostly about choice. I wouldn't say it "doesn't follow conventional browser rules" as there's lots of apps (word, acrobat, full screen flash, SQL Reporting, etc) that live in the browser, but aren't HTML. From my point of view, if you've got an occasionally used application, perhaps for Line of Business or an Intranet application and it needs less Trust than a ClickOnce app, XBAP might be a good choice. ClickOnce is kind of ClickThrice, more if you need local storage or some other FullTrust security stuff. XBAP is nice for the visualization portion of apps for finance or banking. It's more powerful than Silverlight for 3D and I think would be a good "compliment" to an existing web-based app. A CickOnce App would be jarring if added to a web app just for one or two new pages of functionality.
Sunday, February 03, 2008 3:45:23 AM UTC
Hmmm, interesting. So this is WPF for the web...

I always like to know what happens behind the scenes, i downloaded the xbap and the exe.manifest and it worked locally, I'm assuming the first time i requested the page it downloaded an exe and hid it somewhere? where is that?

I wanted to suggest a XamlViewFactory for MVC, but I'm not sure how that would work if it's just a compiled exe. It would be great to have rich content like this embedded in a page and be able to pass data to it. any thoughts?

I guess you'll say this isn't traditional web development anymore, it's Client development but deployed in a browser?
tgmdbm
Monday, February 04, 2008 1:01:31 AM UTC
This looks like it will be very useful.
Monday, February 04, 2008 12:21:16 PM UTC
Rob Relyea asks to comment here if we have insight about there to use XBAP as opposed to ClickOnce applications. For us, it's all about deployment: We have scenarios where our users go to an internet café and want to log in the application and have as much functionality as possible. Before WPF, it meant developing an ASP.NET application, thus rewriting the whole UI and webclient-to-webserver communication layer. With XBAPs, we can have the same, minimum impact deployment than with a ASP.NET application, but share a lot of code (probably around 85%) with the desktop "installed" client. Note that we also have a scenario for ClickOnce deployment, which we intend to use for our Intranet-based users.

(For the records the 15% (more or less) code we cannot share with the desktop client include security-induced workarounds (because XBAPs in Internet cafés run in partial trust) and of course the webclient-to-webserver communication. In that case however, we can use WCF and enjoy a much nicer communication that using standard SOAP and JavaScript-based web services.)

HTH,
Laurent
Monday, February 04, 2008 1:13:46 PM UTC
One of our developers designed an XBAP app, however, after putting it into TFS and bringing it down, it complains about the manifest not being signed correctly. Works well under Cassini, but not IIS, so more reading to be done on my behalf.
Monday, February 04, 2008 8:04:17 PM UTC
Biggest problem with XBAPS is they don't support browser session cookiess, which makes them useless for most real life web scenarios. Your better off using click once, silverlight, or old ajax style applications until they add this support. I once tried to do a website purely with xbaps and it's impossible unless you want the user to download your entire website on the first click (IE single xbap) or you don't require logging into your website (otherwise everytime you switch xbaps the user has relogin!).
Monday, February 04, 2008 11:07:10 PM UTC
Works for me in firefox!
his has potential when paired (or even to replace) with my click-once apps.
Ben
Tuesday, February 05, 2008 8:58:46 AM UTC
Bret - That cookie thing was fixed in .NET 3.5: Hey, got this message from the PM for XBAPs and I'll post samples soon.

We did work in .NET 3.5 to unify the browser and XBAP cookie stores, to allow XBAPs to access session and persistent cookies from the browser cookie store and vice versa. Cookies set by the browser for domains that XBAP web requests make will be attached automatically to those requests. So, you can pass session state in XBAPs via cookies.

Please see http://msdn2.microsoft.com/en-us/library/ms750478.aspx#Cookies
What’s new in WPF in .NET 3.5 http://msdn2.microsoft.com/en-us/library/bb613588.aspx
Tuesday, February 05, 2008 9:41:44 AM UTC
(1) A smart, yet thin client which contains the presentation (and perhaps some computation) logic and communicates with a server to do transactional work, would indeed be very useful in an enter-/extraprise setting. Kudos to Scott for taking the scenary route, too! I wonder if this could be made to work with a browser window in kiosk mode, a la .HTA applications?

(2) It is not a total panacea, though. Setting: Newly installed Windows XP sp2, with .NET Framework 3.5 and updated Firefox 2. When I open the example application, all I got is a "Mac-like" error message that "An error occurred". Attempting to restart of course does not help as this occurs on startup. When I click on the More Information button, nothing happens. My concerns are that you are just trading one set of deployment problems for another.
Roland Kaufmann
Tuesday, February 05, 2008 4:20:44 PM UTC
That's great news on cookies scott. I spent 6-7 months working with WPF/xbaps last year trying to use them for all kinds of web applications and eventually gave up because the session cookie limitations in .NET 3.0 just made xbaps not practical. Do you know if .NET 3.5 is included in the Vista SP1 or is it an optional download? If it's an optional download I'm not quite sure if it's going to solve the issue, because the casual user doesn't seem download optional updates.
Wednesday, February 06, 2008 3:27:24 AM UTC
I got an error on this line of code:

RotateTransform tran = (RotateTransform)image1.RenderTransform;

ERROR:

Unable to cast object of type 'System.Windows.Media.MatrixTransform' to type 'System.Windows.Media.RotateTransform'.

Do you have any ideas on why I would get this error. I just copied your code into a test app and used a jpg of mine.
JohnO
Wednesday, February 06, 2008 4:56:53 AM UTC
JohnO - That's weird. That makes me think you don't have an Image.RenderTransform in your XAML.
Wednesday, February 06, 2008 11:01:59 AM UTC
Update on the launching issue: Even though you are running in Firefox, there is still an Internet Explorer component performing the work behind the scenes. Installing .NET Framework 3.5 will inherit any strict security settings in IE and adjust accordingly (a good thing, I presume). It was all a matter of doing Start | Control Panel | Internet Options | Security and setting XAML browser applications to Enable. Obvious, in hindsight. What scares me is how bad the error message was that was delivered. (Viewing the source code of the message gave the necessary clues).

Great app, BTW! ;-)
Roland Kaufmann
Wednesday, February 06, 2008 6:01:56 PM UTC
Scott - thanks for the reply. I don't know how I missed that when looking at the code. I didn't notice that section in your code. I am still new to WPF and XAML. I was able to get it to work by manually adding the RenderTransform XAML. Is there a way to add this transform through the GUI and not through XAML editing?

Thanks for your help!
JohnO
Wednesday, February 06, 2008 7:49:14 PM UTC
1) So, which code gets executed on the Server and which on the client?

2) Is it possible to place ASP.NET Server control onto XBAP page?

Thank you.
Eugene
Friday, February 08, 2008 3:02:01 AM UTC
Dear Scott,

this web site is very good for us....but we need more Console Application.....in c# 2005 video than we can inprove more ......
so, plz ...
keep the video of console application ,

thankyou......
Rojariya..
Rojariya
Sunday, February 10, 2008 12:17:00 AM UTC
Hi Scott and anyone else with an opinion,

This is off topic, sort of. Do you feel ASP.NET and the .NET 3.5 Framework are ready for production applications? In this case, the redesign of our Intranet. WPF looks quite attractive, especially for our dashboard.

Thanks in advance,

Robert Hankin
Sunday, February 24, 2008 9:34:56 AM UTC
That cookie thing was fixed in .NET 3.5: Hey, got this message from the PM for XBAPs and I'll post samples soon.
LOST
Sunday, February 24, 2008 9:36:31 AM UTC
That cookie thing was fixed in .NET 3.5: Hey, got this message from the PM for XBAPs and I'll post samples soon.

That's nice but there's no OO abstraction to access cookies. Just two methods.
LOST
Wednesday, February 27, 2008 10:17:40 PM UTC
Hey Scott,

Locked up Firefox 2.0.0.12 with the No Script add on. A reload (restore session) did a download and it worked.

I am looking into this for a lob app i am writing. Kind of new to wpf altogether...any issues with writing something like this that consumes client application services (for auth?).

thanks - Rob H.
Rob
Friday, February 29, 2008 7:12:46 PM UTC
Scott - You might find this post interesting:

http://chriscavanagh.wordpress.com/2008/02/29/wpf-animated-gif-and-javascript-filmroll/

It's a short example using my "SkinBuilder" utility to generate animated gifs and/or javascript-driven filmrolls from WPF 3D animations, with anti-aliasing! :)

It's also a way of getting some WPF love to the needy people who are without WPF or Silverlight 2.0 :) (or an excuse to play with WPF for website design).

Chris
Wednesday, March 19, 2008 4:00:00 PM UTC
Are there any plans to get this working on Firefox for the Mac?

WPF would be great for content management, but most web-developers need to support all of the major browsers on Windows, Mac and Linux at least.
Brent
Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.