Alarm Clock Sample -- Part 3

Last time I mentioned, "There’s an object TraditionalClock defined somewhere", so in this post I want to look closely at how the TraditionalClock object is created.

I supposed that traditionalclock.xaml and traditionalclock.xaml.cs probably hold the key and I'll start with traditionalclock.xaml. The first line is <Window x:Class="Microsoft.Samples.WinFX.AlarmClock.TraditionalClock" so I checked out the XAML Namespace (x:) Language Features which led me to

Configures XAML compilation to join partial classes between markup and code-behind. The code partial class is defined in a separate code file in a Common Language Specification (CLS) language, whereas the markup partial class is created by code generation during XAML compilation.

From this description, I deduced that

• Window is the parent of the class that's going to be defined
• Microsoft.Samples.WinFX.AlarmClock.TraditionalClock indicates the name of the class will be "TraditionalClock" in the Microsoft.Samples.WinFX.AlarmClock namespace

And, actually, looking in traditionalclock.xaml.cs, that deduction, translated into C# exists exactly. Note especially that it's a partial class in C# since from the "x:Class Attribute" we know that when the XAML is compiled a partial class of the same name will be created.

This made me think I could understand myapp.xaml and myapp.xaml.cs a little better too. Going to myapp.xaml, I noticed <Application x:Class="Microsoft.Samples.WinFX.AlarmClock.MyApp" which makes sense now as it will create a partial class MyApp in the correct namespace inheriting from the WPF Application object which is exactly what we came to understand about myapp.xaml.cs in Part 2.

Now, it's my understanding that XAML is about describing the structure of the code and the design of the objects you want generated whereas C# should be used for the logic (this makes me think of the evolution of Web Programming where HTML sets up the structure of the page, CSS designs it, and some program is on the server-side such as PHP to handle the logic). I'm not going to go through the whole XAML file because I think from understanding parts of it, we can understand all of it.

C# uses curly brackets '{}' for sectioning off blocks of code and they, of course, can be nested. XML uses opening and closing tags. In traditionalclock.xaml, notice at the beginning and at the end and (most) tags can be nested. It's also important to remember the inheritance between objects because when I tried to understand XAML as basically a descriptive markup language to autogenerate C# I got lost in some of the assignments I saw.

The Window Class has members for "AllowsTransparency", "Background", and "WindowStyle" but "MouseLeftButtonDown" is not on that page in the framework--you have to follow the inheritance: the Window Class inherits from ContentControl which has the MouseLeftButtonDown event because it (eventually) inherits from UIElement. I now understand the importance of paying close attention to the Inheritance Hierarchy for every class overview in the .NET Framework Class Library.

It seems XAML is relatively straight-forward with every opening tag loading a class object, members of that class being assigned in the tag and other, logically connected, classes being set up within the opening and closing tags. Personally, I think coding everything in C# would be just as easy but I guess XAML is nicer from a maintenance and readability perspective as objects are logically grouped within nested tags.

In traditionalclock.xaml.cs it's easy to see how you can interact with XAML. The first thing I noticed in this file after looking at the XAML for the TraditionalClock class was the line Storyboard clockHandStoryboard = (Storyboard)clockWindow.Resources["clockHandStoryboard"];. "Storyboard" was set up in XAML as well as the name "clockWindow" and the resource "clockHandStoryboard". The event handlers make sense here too. The only thing I didn't understand was InitializeComponent();. It's a well named method because I can immediately deduce that it will initialize a component. But What component. As with most questions, someone has already asked it on the internet and someone has already given the answer.

Basically, these two files work together as expected. The partial class is created in C# which loads the XAML which gets parsed into objects which can be used in further C# code.