I presented a session on WPF at the Arizona .NET User's Group last night, and today have been getting email and calls from several people who wished they could have been in attendance, and wanted to get started with WPF.  So for those that weren't there last night, this post is designed as an intro to get you started.

The version of Windows Presentation Foundation (WPF) included in the June CTP is very polished.  Being this late in the development cycle, the things you learn now in this environment will probably not change very much before it goes RTM.  As well there's many fewer bugs compared with even six months ago.  I've been very impressed with the reliability, anyway.  The same exact bits from this drop are going into the next CTP of Vista.  So altogether it is now a great time to start experimenting with WPF.  This post offers a minimalistic approach to dive straight into rendering XAML on an XP machine by using the neat-o test interface called XamlPad:


(DonXml's analog clock example converted to work with the June CTP bits.)

Prerequisites you probably already have installed:

  • For Windows XP, SP2.  Or if you're running Win2K3 Server, SP1.  Vista Beta2 will work as well with no additional hotfixes.
  • .NET Framework v2.0 (22 megs)
  • DirectX, at least version 9.0c (36 megs.  You need this later “c” rev so that it also includes the DirectX for Managed Code update.)

You probably installed all these like eight months ago when they came out, right?  If not then be sure to put them onboard before going further.  Notice that you don't need Visual Studio installed to experiment with XAML.

Normally you would have to download the gigabyte-sized Windows SDK in order to get to the point that you can use XamlPad.  But in the interest of streamlining everything, I've put all the specific stuff you need into this tidy 11 meg .ZIP:

WPF_Essentials.zip

Once it's extracted, install these two in this order:

  1. wpf.msi (This is the RC1 build of the Windows Presentation Foundation portion from the June CTP of .NET 3.0.  This takes about 6 minutes to install on an average system, mostly because it does a bunch of ngen during the install to optimize everything for speed.)
  2. WIC_X86_ENU.exe (The Windows Imaging Component update that is required to use WPF.  Really small.  This takes about 20 seconds to install.  Without it you won't be able to display images in a XAML panel.)

If you have a really lame video card that does not support DirectX 9 then you will need the to fake out DirectDraw support by installing RGBRAST.  And in that case you won't be able to do any really cool 3D animations and transforms.  But that is probably only like two of you out there.  For everyone else, you're already all set with what you need.

With that, you can now directly run XamlPad.exe, which is also found in the .zip.  And if all goes well, you'll be presented with XamlPad showing a blank screen. So what's next?  I guess the first thing is a simple “Hello World”.  Looking at the lower markup panel in XamlPad, you have a <Page>element, and inside that a <Grid>element.  It's tempting to think that this is just a re-hash of HTML.  But these elements actually represent .NET types.  Unlike the very forgiving environment of HTML, XAML  is case-sensitive, and also gets really cranky if you don't properly nest objects.  For instance, if you try typing “Hello World” directly in there, it complains that you can only put in objects of type UIElement inside this UIElementCollection.  The Grid itself is really a System.Windows.Controls.Grid.  The things you add inside become part of a public property it exposes called Children.  So you can see that in every respect XAML is very closely tied into the .NET framework, as it instantiates objects the same as you could have done in C#.  To put some text out there, we should be using a System.Windows.Controls.TextBlock object.  Simply add this:

<TextBlock>Hello, world!</TextBlock>

Not too exciting yet, but at least it does the job.  Let's now try to add another TextBlock and see what happens.

<TextBlock>Well hello to you, too!</TextBlock>

Note that the new text is overlaid directly on top of the first text we wrote!

The reason for the overlap is that the pieces are being rendered in the same cell of this grid.  We could get our hands dirty and define some columns and rows, but instead let's use a different kind of panel than the default <Grid> that XamlPad includes for us.  Change it to be a <StackPanel>, and the two objects will be stacked vertically, looking as you might have expected it to.

There are several kinds of panels we can use.  In addition to Grid and StackPanel, there is Canvas, DockPanel, TabPanel, ToolBarPanel, VirtualizingPanel, and VirtualizingStackPanel.  Okay, there are a couple others that are a little esoteric, like UniformGrid and ToolBarOverflowPanel.  Each has a little different way of rendering the controls that make their way into its Children collection.

Regarding the TextBlock, the text we typed between the element tags becomes a part of the default property of the System.Windows.Controls.TextBlock object, which is Text.  We can also add attributes to define how things look, the same way that we use ASP.NET server controls.  For instance, we can spice up the presentation with a larger font and some color by adding these attributes in a TextBlock element:

FontSize="20" Foreground="#FFFF9933"

Note that the color designation has eight hexadecimal digits.  What's that all about?  Normally in HTML you use six, which translates into three bytes of information for red, green, and blue respectively.  In this case we have four bytes, and the first is the “Alpha” channel, which defines the level of opacity that this text will have.  This example color is a completely opaque orange.

FF FF 99 33
Alpha Red Green Blue

So with this XAML code as a starting point, you can write event handlers and other logic.  It's possible to dynamically add in controls using C# or VB.NET.  No longer do we have to bend over backwards to translate objects for presentation.  For instance, the majority of what ASP.NET does for us is to bend .NET objects into a format that can be presented in an HTML browser, providing all the funky persistence mechanisms that are necessary like ViewState and cookies.  It's a great solution if you're sending content to a browser, but often forces you to know some HTML tricks to get things rendered just right.  In contrast, WPF offers a clean presentation environment designed to integrate perfectly with .NET, so in this environment all interaction with the user is done directly with .NET objects.

One of the interesting things that you can do with XAML with 100% declarative code is create animations.  Here is a sample block of XAML you can paste in XamlPad to have the analog clock pictured at the top of this post:



It was originally written by Chris Maynard and Don Demcsak in SVG, and then Don ported it to XAML in early 2004.  As far as I know it hasn't been upgraded since then...  Until today when I took some time and worked out the kinks so that it would display properly with the latest bits.  (The animation part had to be totally re-done.)  Anyway, from this you can get the feel as to the code that's used to make the sidebar clock gadget in Vista, and what it looks like to write declarative code with animation.

A final note about .NET 3.0: Up until now when you install the .NET framework all the DLLs get stashed in C:\WINDOWS\Microsoft.NET\Framework.  Although some features for rasterizing content are still placed in DLLs there, the .NET assemblies we program against from managed code now have a new home: C:\Program Files\Reference Assemblies\Microsoft\Framework\v3.0.  In that folder you can find a plethora of functionality.  For instance, all the types in the System.Windows.Controls namespace used by WPF are found in PresentationFramework.dll.  So by adding a reference to that DLL or opening it up in Reflector, you can start getting to know how it's all organized.  If you want to quickly see how the inheritance is organized then just use my Assembly Hierarchy Explorer program to navigate through and take a look at all the contents.  (Compile the program in VS2005, run it, and use the menu option Assemblies / Open From File.)

Hope that you've enjoyed this introduction to XAML.  For a video walkthrough of more XAML features you can test in XamlPad, check out this great screencast done by Tim Sneath that's out on Channel 9.  It's a little dated...  He did this back in September of last year.  For instance, he uses the now-defunct TextFlow element.  Replace that instead with the FlowDocument and some Paragraph elements if you are following along with his code.  Same kind of thing with some of the Rotate tricks he does.  Also note that you must have Media Player 10 or later installed if you want to use video snippets in your XAML.

Next time: integrating XAML with C#.  If you want to get a head-start on things then on a system in which you have WPF installed, also install the Orcas updates for Visual Studio, and then check out some great free samples.


Feedback

# re: Start experimenting with XAML on your XP machine in under 15 minutes!

Nice article Lorin! 7/6/2006 3:49 PM | Chris Martin

# re: Start experimenting with XAML on your XP machine in under 15 minutes!

Thanks Lorin, I was very disappointed to miss this presentation. 7/6/2006 5:35 PM | Steele

# re: Start experimenting with XAML on your XP machine in under 15 minutes!

I just updated the post to include an analog clock sample you can use with XamlPad. It includes animation for the minute and second hands. 7/6/2006 8:23 PM | Lorin

# re: Start experimenting with XAML on your XP machine in under 15 minutes!

Thanks for the kind words, Steele and Chris!

Steele -- I agree with your post in that this is safe enough to use on whatever system is your "daily driver".

http://blog.steeleprice.net/archive/2006/07/06/898.aspx

By the way, when it comes time to upgrade to a newer CTP or the RTM version of .NET 3.0, in Add/Remove Programs just uninstall the thing that's listed as "WPF RC 1 v3.0.6507.0". 7/6/2006 8:53 PM | Lorin

# re: Start experimenting with XAML on your XP machine in under 15 minutes!

Lorin, I absolutely love it - excellent post!

The next missing link is how to hook up the presentation/UI to actual business logic/code. Most everything I find out there with a cursory search only demonstrates the neat tricks/features of WPF. The next point of interest is hooking code up to buttons, combobox selections, changes to cells in a datagrid, etc.... 7/7/2006 12:12 PM | Paul Schroeder

# re: Start experimenting with XAML on your XP machine in under 15 minutes!

I would like to ask question...
I am using Windows XP and I would like to try make website using only XAML, but the problem is that it doesn`t work for me. What I must isntall on my machine, that I coul try write website?..

I have installed .NET 3... When I try to upen using IE 7 I always get errors:
Startup URI: C:\Documents and Settings\David Abdurachmanov\Desktop\index.xaml
Application Identity: file:///C:/WINDOWS/Microsoft.Net/Framework/v3.0/WPF/XamlViewer/XamlViewer_v0300.xbap#XamlViewer_v0300.application, Version=3.0.0.0, Culture=neutral, PublicKeyToken=ed9f9a6c9f3a9db8, processorArchitecture=msil/XamlViewer_v0300.exe, Version=3.0.0.0, Culture=neutral, PublicKeyToken=ed9f9a6c9f3a9db8, processorArchitecture=msil, type=win32

System.Windows.Markup.XamlParseException: The tag 'Canvas' does not exist in XML namespace 'http://schemas.microsoft.com/2006/xaml/'. Line '1' Position '2'.
at System.Windows.Markup.XamlParser.ThrowException(String message, Int32 lineNumber, Int32 linePosition)
at System.Windows.Markup.XamlParser.ThrowException(SRID id, String value1, String value2, Int32 lineNumber, Int32 linePosition)
...
...
...

So, what I should do?.. 7/10/2006 8:42 AM | david

# re: Start experimenting with XAML on your XP machine in under 15 minutes!

Very good of you to provide WPF_Essentials.zip. I tried to locate Xamlpad.exe in (an administrative install of) the Windows SDK July 2006, but couldn't find it. Is is just me, or did contents change? 7/27/2006 9:47 PM | Toine de Greef

# re: Start experimenting with XAML on your XP machine in under 15 minutes!

Toine -- XamlPad is not compatible with the July CTP build, so Microsoft didn't include it in the SDK. But you can use Charles Petzold's “XAML Cruncher” tool for the same net effect! Click-once deployment available from this link:

http://www.charlespetzold.com/wpf/XamlCruncher/XamlCruncher.application

David -- Still looking into your issue. 8/2/2006 10:53 AM | Lorin

# re: Start experimenting with XAML on your XP machine in under 15 minutes!

Excellent Post! You Rock!! I've been towing with the idea of getting started and Honestly I would have kept "towing" with it for another month or so if I wouldn't have come across this post! THANKS A BUNCH! 9/9/2006 11:42 AM | rajiv

# re: Start experimenting with XAML on your XP machine in under 15 minutes!

Great intro.
Would love it if you did an update per: http://rrelyea.spaces.live.com/blog/cns!167AD7A5AB58D5FE!647.entry 9/11/2006 7:28 PM | Rob Relyea

# re: Start experimenting with XAML on your XP machine in under 15 minutes!

i am not able to download essentials.zip file. can you please check this missing link. 9/26/2007 8:45 PM | :(

# re: Start experimenting with XAML on your XP machine in under 15 minutes!

I fear for the 15 minutes I was not able to))) 7/20/2009 5:14 AM | cleocin cream prescription

# re: Start experimenting with XAML on your XP machine in under 15 minutes!

You have a guide for vista? 8/13/2009 11:49 AM | driver updater

# re: Start experimenting with XAML on your XP machine in under 15 minutes!

I am assuming that the OS is written as well, as the linux filesystem is incomplete since the failure. 11/6/2009 11:17 PM | DDos Protection

# Great website

"You do your best work if you do a job that makes you happy." - Bob Ross n Monica Bellucci 11/8/2009 12:26 AM | Monica Bellucci

# Love your site

"Cherish each hour of this day for it can never return." - Og Mandino
Paris Hilton Sex Video 11/11/2009 2:08 PM | Demi Moore

# Love such great site

"Creativity is a drug I cannot live without." - Cecil B. DeMille
Angelina Jolie Sex Video 11/11/2009 4:43 PM | angelina jolie sex photos

# Cool

"A single day is enough to make us a little larger." - Paul Klee
11/13/2009 9:37 PM | brad pitt & angelina jolie

# Great site

"Man is distinguished from all other creatures by the faculty of laughter." - Joseph Addison
cat names 11/15/2009 5:21 PM | cats

# Great site

"Man is distinguished from all other creatures by the faculty of laughter." - Joseph Addison
cat name 11/15/2009 6:02 PM | cats names

# Nice

"Never be haughty to the humble; never be humble to the haughty." - Jefferson Davis
11/17/2009 11:00 AM | free antivirus

# Great site

"Retirement at sixty-five is ridiculous. When I was sixty-five I still had pimples." - George Burns
11/17/2009 9:40 PM | buy diazepam

# Nice

"Be not afraid of growing slowly, be afraid only of standing still." - Chinese Proverb
alice goodwin 11/19/2009 5:48 AM | alyson hannigan nude

# Love your site

"Happiness is not a station you arrive at, but a manner of traveling." - Margaret Lee Runbeck
11/20/2009 9:59 AM | cameron diaz videos

# Nice

"Forgive many things in others; nothing in yourself." - Ausonius
11/20/2009 5:47 PM | free antivirus

# Good website

"You don't have to cook fancy or complicated masterpieces - just good food from fresh ingredients." - Julia
11/21/2009 8:41 AM | celebs archive

# Hi

You have great site
11/26/2009 3:39 PM | Jessica Alba

# re: Start experimenting with XAML on your XP machine in under 15 minutes!

Bamboo window blinds is something this confirms the character of the individual. I'll have to bring it back as soon as when you hear the phrase, "I love plantation blinds" you wouldn't think of a store dedicated entirely to motorized skylight blinds. I'm a prominent member of this community. By whose help do elites chalk up killer blind roller procedures? It's all how you look at it. I'm still in shock over cheap bamboo blinds. How do chums hit upon the choicest roll up blinds clues? After all, all roads lead to bamboo window blinds. Bamboo window blinds has a lot to do with doing it.


1/24/2010 9:34 AM | Dork

# re: Start experimenting with XAML on your XP machine in under 15 minutes!

Very cool stuff! 8/12/2010 3:17 PM | Allen Rad

# sell scrap iron

Thank you fro the information.... 8/27/2010 7:01 AM | Pulkit Agrawal

Post a comment





 

 

News


Welcome to my blog.
Here's what we've got on the menu today:

Tag Cloud


Article Categories

Archives

Post Categories

Image Galleries

Syndication: