The learning curve for WPF an XAML is steeper than Microsoft might have you believe.
This is largely because developers used to coding up a Windows Forms interface primarily worked with a built in designer that wrote code for you (in the InitializeComponents method). This is how it has been for well over a decade now. With XAML, the interface is created and exists completely independent from any code.
This brings about many new concepts to learn to get a firm grasp of XAML:
- Templates
- Resources
- Dependency objects
- Visual trees
These constructs and more are necessary to support an "codeless" interface. Don't worry we'll discuss all of them in detail in later tutorials. So what does XAML actually look like?
Here we see a simple button expressed in XAML. Those familiar with ASP.NET may find this eerily similar. The objects you create using this markup correspond to a collection of classes in the .NET Framework. This XAML produces this:
The canvas object created above is the container for the button object. Containers and panels in XAML are mainly in charge of the layout and flow of the elements they contain. This canvas has no specific UI elements set so you won't be able to see it.
Well this is just an ordinary button, nothing exciting. Well lets spruce it up a little.
We have done a few things here, added a bitmap effect, and a stack panel to display some controls as the button's content.
All classes that inherit from UIElement have the ability to add an effect such as this. The DropShadowBitmapEffect is a built-in object that defines a specific bitmap effect. It has properties such as color, direction, noise, softness, etc. In this example we have just used the default values.
The button, like most WPF controls, has a content property. It is explicitly shown in this example with the <Button.Content> XAML element. I say explicitly because this particular element can be omitted. Here we have 2 items that we want displayed as the button's content; 1) an image, 2) and some text. We use the stack panel as the first child element of the button's content to arrange these 2 items. The StackPanel is a container just like the canvas. Here we tell the StackPanel we want our items displayed in a horizontal fashion. The order in which we place the items inside the StackPanel element dictates the order in which they will be displayed (left to right).
The
TextBlock control is unique element, it is simply an object that says "Hey I want some text here".
The
Image control here simply uses its source attribute to point to an image that is located in your project.
Our result is this button:
As with any useful button it needs to be wired up to a click event. The attribute "Click" on our button points to an event handler in the code associated with our XAML file. The signature for this method is as follows:
The
RoutedEventArgs parameter inherits from EventArgs as you can imagine. You will find this parameter on most events from WPF controls.
Feel free to play around with the items in the stack panel and be sure to check out the properties these controls expose.
XAML
Programming
