Saturday, July 10, 2010

Intro to XAML Questions

While presenting the Intro to XAML session at recent code camp and user groups, a few questions came up.  Here's some more information on those topics that I didn't have at my fingertips at the time.

FrameworkElement in the Ticker Class
Question: Why does the Ticker class in the demo code descend from FrameworkElement?

Answer: As I noted during the session, the Ticker class exposes the DisplayInterval property as a DependencyProperty.  A DependencyProperty is a WPF/Silverlight construct that adds functionality above a normal property.  This is used for features such as animation, styles, and data binding.  We used it for data binding in our sample.

So where does FrameworkElement come in?  A dependency property can only be added to a DependencyObject (or a class that descends from DependencyObject).  FrameworkElement happens to be a descendent of DependencyObject.  And since it is also the base class for most of the elements in WPF and Silverlight, it also makes a convenient base class for our custom Ticker class.

If you want more information on dependency properties, you can check out MSDN here:

User Controls in WPF/Silverlight
Question: Can you create user controls in XAML that would allow you to use the same control on multiple screens?

Answer: The answer to this is definitely yes.  "UserControl" is one of the common root-level elements in XAML UIs (in addition to "Window" and "Page").  UserControl is now the default root element for Silverlight, but you can create your own user controls and embed them in other screens (whether they are Window, Page, or another UserControl).

I do have an example in Silverlight that creates a UserControl in a separate XAML file and then uses it on a screen.  The sample is available here:  There is a small caveat to this, though: it is Silverlight 2.  Fortunately, the part that shows how to create a user control and use it in your application is still relevant in Silverlight 4 (and WPF as well).  The section on events is also still accurate; however, there is a much easier way to build this particular sample in Silverlight 3 or 4 by using object binding instead of events.

Attached Properties
Question: The XAML syntax for attached properties is intriguing.  How do they work?

Answer: An attached property is a construct in WPF and Silverlight, and how the framework handles it internally is more information that you probably want.  So, let's just take a look at a short sample.

In the demo code, we use an attached property by setting Grid.Row="0" inside of our TextBlock.  Here's a reminder of the code:

To get an idea of how this property gets set, let's take a look at how we would set this property in code rather than in the XAML.  We'll assume that our text block is named "myTextblock".  There are actually 2 ways we can set the property: either from the point of view of the Grid or from the point of view of the TextBlock.

From the Grid's viewpoint, the property is set like this:
Grid.SetRow(myTextBlock, 0);

From the TextBlock's viewpoint, the property is set like this:
myTextBlock.SetValue(Grid.RowProperty, 0);

Although this doesn't explain the internals, it does give you an idea of how it works.  With the first method, we are passing the element (myTextBlock) and value (0) to the Grid's SetRow method.  SetRow is a static method of the Grid class that allows for the "Row" attached property to be set.  With the second method, we use the SetValue method which allows us to set an attached property from the element (myTextBlock) itself.

Of course, there is more info on attached properties available on MSDN:

Question: Where can I get the zooming tool used during the presentation?

Answer: ZoomIt is a tool that was created by a Microsoft employee (Mark Russinovich) for his own use in presentations.  It has several features including zooming the screen (like a magnifier), adding annotations (either drawing or text), and showing a break timer.  I ran across it while watching a webcast where the speaker was using the tool.

You can download ZoomIt for free here:

Additional XAML Samples
Not exactly a questions, but there are additional XAML samples available on my website.  The Target Practice application is a sample I built to see if I could build an application using XAML only.  I did this in both WPF and Silverlight 3.  Here are the links to the walkthroughs:


As with all of my samples, the code can be downloaded from my website:

That's it for now.  If you have any questions, feel free to send them to

Happy Coding!

No comments:

Post a Comment