5th December 2006

WPF- WPF/E Hello World

From 2001-2005 I worked on the Avalon team (now called WPF) creating the next generation user-interface and graphics
platform. One of the more disappointing things about leaving in 2005 is that the things I’d been working
on where not ready for prime time yet, and it would be years before it would make sense to really dive in
again for real-world projects. The other issue is just that the size of the platform (huge download) and
big app model changes (Avalon/WPF is mostly code-first so existing web-sites would need to be really rethought
to adopt it.

Yesterday Microsoft put the community preview of WPF/E (E is for Everywhere). They took the core graphics
concepts of Avalon, the XAML language and packaged it in a 1MB download, with an object model designed to work
inside web pages and be programmed from Javascript. Even better it works in Firefox and on the Mac. This is a huge
breakthrough- a 1MB download really isn’t that big of a deal and the broad platform support (hopefully Linux?)
and consistent programming model makes it way easier to buy in to the technology.

Without further delay, here is my first “Hello World” thing in WPF/E. Just a little rotating text on a
gradient, but doing this with existing browser platforms would have been a big pain.

Note- this probably won’t work in most blog readers, if you want to check it out, visit my site. If
WPF/E is not already installed it should take you to the download site. Downloads are available for Windows
and the Mac.

var TheWPF= new agHost(”wpfeControl1Host”, // hostElementID (HTML element to put WPF/E
// ActiveX control inside of — usually a

)
“wpfobj”, // ID of the WPF/E ActiveX control we create
“300″, // Width
“300″, // Height
“#ffB42600″, // Background color
null, // SourceElement (name of script tag containing xaml)
“helloworld.xaml”, // Source file
“false”, // IsWindowless
“24″, // MaxFrameRate
null); // OnError handler (method name — no quotes)

var CurAngle = 0;

function DoTick()
{
wpf = document.getElementById(”wpfobj”);
var rotate = wpf.findName(”RotateID”);

// Determine whether the object was found.
if (rotate != null) {
rotate.Angle = (++CurAngle);
}
window.setTimeout(”DoTick()”, 50);
}

function onHelloWorldLoaded(sender, eventArgs)
{
window.setTimeout(”DoTick()”, 50);
}

Here is the XAML used in this sample:


    Hello, world

And here is the Javascript:


// aghost.js is a library from Microsoft for constructing a WPF/E object on all browsers



var TheWPF=    new agHost(”wpfeControl1Host”,   // hostElementID (HTML element to put WPF/E
                                     // ActiveX control inside of — usually a

)
               “wpfobj”,             // ID of the WPF/E ActiveX control we create
               “300″,                // Width
               “300″,                // Height
               “#ffB42600″,          // Background color
               null,                 // SourceElement (name of script tag containing xaml)
               “helloworld.xaml”, // Source file
               “false”,              // IsWindowless
               “24″,                 // MaxFrameRate
               null);                // OnError handler (method name — no quotes)

var CurAngle = 0;

function DoTick()
{
    wpf = document.getElementById(”wpfobj”);
    var rotate = wpf.findName(”RotateID”);

    // Determine whether the object was found.
    if (rotate != null) {
	rotate.Angle = (++CurAngle);
    }
   window.setTimeout(”DoTick()”, 50);
}

function onHelloWorldLoaded(sender, eventArgs)
{
   window.setTimeout(”DoTick()”, 50);
}

]]>

posted in WPF | 0 Comments

  • Advertising