.NET & Funky Fresh

Syndication

News

  • <script type="text/javascript" src="http://ws.amazon.com/widgets/q?ServiceVersion=20070822&amp;MarketPlace=US&amp;ID=V20070822/US/bluspiconinc-20/8001/8b68bf4b-6724-40e7-99a5-a6decf6d8648"> </script>
Images in this post missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at imagehelp@codebetter.com
.NET 3.0 Crash Course - Part 3: Down and Dirty With Xaml

               Xaml stands for eXtensible Application Markup Language.  You can think of it as HTML for Windows applications, but it is really quite a bit more expressive and powerful.  For those of you code junkies out there, Xaml is really no more than a special type of CLR object serialization.  It was intentionally architected to serialize CLR object graphs into an Xml representation that is both verbose and human readable.  The reasoning behind this was to make it possible for developers to easily edit the markup by hand and enable the creation of powerful graphical tools that could generate markup for you behind the scenes.  When you compile an application that contains Xaml files, the markup gets converted into Baml.  Baml is a tokenized, binary representation of Xaml.  This binary representation is then stored inside the application’s resources and loaded as needed by WPF during the execution of your program.  The main advantage of this approach is that you get a faster UI load time by reading a binary stream than through parsing Xml.

                The best way to get to know Xaml is by looking at some examples.  So without further ado, let’s begin by comparing two markup fragments:

Html Fragment:

<div style="border: solid 5px black; margin: 10px; padding: 5px">

   <input type="button" value="Click Me!" />

</div>

Xaml Fragment:

<Border BorderBrush="Black" BorderThickness="5" Margin="10" Padding="5">

   <Button>Click Me!</Button>

</Border>

A Very Basic UI

Both of these fragments accomplish the same effect on their respective platforms: creating a button with a border around it.  I started with this example so that we could compare Xaml to something more familiar, Html.  I think that if you are honest, however, you’ll agree that the Xaml fragment is much more expressive than the Html fragment.  It’s intuitive.  One of the reasons for this is that, generally speaking, the element tags map directly to objects and the attributes map to properties on those objects.  Since WPF’s class hierarchy was very carefully designed, you’ll find that many elements have the same available attributes.  This consistency makes for smooth, natural learning.

                Using Xaml you can represent a wide variety of UI related constructs.  These include things like controls, layout panels, graphics primitives, 3D content and even animations.  Let’s look at another example.  This time we will draw a graphics primitive:

<Ellipse Width="200" Height="150">

   <Ellipse.Fill>

      <LinearGradientBrush>

         <GradientStop Offset="0" Color="Teal"/>

         <GradientStop Offset="1" Color="Aqua"/>

      </LinearGradientBrush>

   </Ellipse.Fill>

</Ellipse>

A Graphics Primitive

The first line of this example is pretty simple.  We have an ellipse whose height and width properties are being set.  The child element of ellipse, on the other hand, is something different than what we’ve previously seen.  In this case we wanted to represent a linear gradient brush for filling the ellipse.  But how could we represent all of that information using the standard attribute syntax?  It turns out that this is a very common scenario, and to solve the problem we have something called ‘Property Element Syntax’.  In Xaml, you can turn any attribute (property on the class) into a child element by using this pattern: ElementName.AttributeName (ClassName.PropertyName).  So in this case we are assigning the enclosed linear gradient brush to the ‘Fill’ property of the the ellipse.  If you’re very keen, you’ll notice that there is a discrepency between what I just told you and what is happening with the child nodes of ‘LinearGradientBrush.’  I have defined a set of gradient stops for the brush, but what property are they being assigned to on the brush?  In fact they are being assigned to the ‘GradientStops’ property, but where is the element name ‘LinearGradientBrush.GradientStops’?  How does the Xaml parser know to assign to this property?  Again, we have a common scenario.  Any object can delcare a default content property to which its child nodes will be assigned automatically.  In this case ‘GradientStops’ is the default content property.  You have actually seen this in action in the very first example:

<Button>Click Me!</Button>

On button there is a property called ‘Content’ that is set as the default content property for the button.  This is how the Xaml parser knows what to do with the text “Click Me!” 

Let’s do one final example.  This time we’ll do something different with the button’s content, since it is a bit of a special property:

<Button>

   <Ellipse Width="200" Height="150">

      <Ellipse.Fill>

         <LinearGradientBrush>

            <GradientStop Offset="0" Color="Teal"/>

            <GradientStop Offset="1" Color="Aqua" />

         </LinearGradientBrush>

      </Ellipse.Fill>

   </Ellipse>

</Button>

A Button with Content

It happens that ‘Button’ (and many other controls) inherits from a class called ‘ContentControl.’  This is where it gets its ‘Content’ property, mentioned earlier.  The type of ‘Content’ is ‘object’, which allows you to fill it with any CLR type.  For most objects, WPF will simply call ToString() and render the value.  However, you can also set the content to anything that inherits from UIElement.  This means that the button’s content could just as easily have been an image, a 3D animation or video.  This is not a feature of Xaml, but is part of the design of WPF, sometimes referred to as the ‘Content Model.’  The flexibility of this architecture makes for seemingly endless possibilities when composing WPF UI’s.

I hope this gives you a decent idea of how Xaml works.  If it hasn’t totally clicked yet, don’t worry.  You are going to see many more examples in upcoming posts.  The more you look at it, the more it will make sense.  Nevertheless, the best way to learn Xaml is to play with it yourself.  For that, I can recommend two similar tools.  One is XamlPad; a text editor that renders your Xaml on the fly.  It comes with the SDK.  The other is Xaml Cruncher, Charles Petzold’s version of the same tool.

NEXT POST: WPF Layout


Posted 10-02-2006 7:49 AM by Rob Eisenberg
Filed under: , ,

[Advertisement]

About The CodeBetter.Com Blog Network
CodeBetter.Com FAQ

Our Mission

Advertisers should contact Brendan

Subscribe
Google Reader or Homepage

del.icio.us CodeBetter.com Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl CodeBetter.com Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of Devlicio.us
Red-Gate Tools For SQL and .NET

NDepend

SlickEdit
 
SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
LiteAccounting.Com
DevExpress
Fixx
NHibernate Profiler
Unfuddle
Balsamiq Mockups
Scrumy
JetBrains - ReSharper
Umbraco
NServiceBus
RavenDb
Web Sequence Diagrams
Ducksboard<-- NEW Friend!

 



Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers

 

Community Server (Commercial Edition)