XAML Jumpstart: Getting Started With XAML

Introduction
Hi, and welcome to the XAML Jumpstart course at Pluralsight. My name is Kevin, and I'll guide you through the rest of this course. Let me start out by telling you what you can expect. With this course we're going to jumpstart into XAML development regardless of platform. XAML is everywhere these days, WPF, Silverlight, Windows Phone, Windows 8, and who knows what's coming next. A lot of the basic ways of writing XAML are the same across platforms. This course is thus aimed at people who want to learn XAML in a way that allows you to immediately apply it. So this is a very practical course. Expect a lot of demos rather than lots of slides filled with theory. This course follows a very practical approach and the goal is that after having completed it you'll have a good understanding of what you can do with XAML and how to do it regardless of platform. Chances are you've heard about XAML before, _____. If you're working with the Microsoft stack you've no doubt noticed that they've invested a lot in this in the last few years. First, we have WPF, or Windows Presentation Foundation, introduced in November 2006 as part of the. NET Framework 3. 0, and together with WPF, XAML was introduced as a way to define the UI. A bit later Silverlight was introduced as a cross-platform, cross-browser plugin, which also relied on XAML. After that we were introduced to Windows Phone development, and after that Windows Store app development came along, both of which can also use XAML. So XAML, even though introduced with WPF, is in reality a larger concept than WPF. It's used across and throughout different. NET Framework versions and different common language runtime versions.

Control Basics and Interacting With Them
Now we know about basic elements, we can continue with controls. In this module we'll talk about control basics and how we can interact with those controls. But what is a control exactly? It's defined by two things. First its behavior, this is what it does, and like the basic elements we talked about in the previous module, a control has a behavior associated with it, a button can be clicked, a textbox can handle text input, etc. Next to that, most controls have a visual appearance associated with them, their template property, which is of type ControlTemplate. It's this ControlTemplate that then consists of the basic elements, like shapes we just learned about, but a ControlTemplate can also exist of other controls who have templates of their own, etc. , etc. Now some classes and controls are in the primitives namespace. These primitives often don't make sense on their own. Primitives can be both controls that are used as part of a control, for example a thumb for a slider, but primitives namespace also contains base classes that provide common behavior for a set of controls. A good example of this would be the ButtonBase primitive. This provides the basic behavior for button controls, but it doesn't make sense on its own. Important here is that template and behavior are separated. This is why you can easily change the way that, for example, a button looks without changing the way it behaves.

Panels and the Layout System
This part of the course is all about laying out elements. We've learned about the most used controls by now, but we haven't dived into how they can be arranged on screen. That's exactly what this module is about, arranging elements in a way that fits your UI needs. Panels are the main type of elements we'll dive into here as they are responsible for laying out their children and are defined by how exactly these children are laid out. But you'll also see that all types deriving from FrameworkElement have properties that can be used to define their position as well, and how all this ties together, well, that's that what we'll get into by looking into the layout system. So, let's dive in shall we?

Data Binding Essentials
It's time to talk about data binding, one of the most important concepts you should know about when you're serious about building XAML apps. It isn't a XAML-only concept of course, data binding exists in WinForms, ASP. NET, etc. as well. There's a longstanding problem we have when building applications, keeping our UI in sync with our backing classes. If a user changes a value in the UI, we need to make sure that that value is synced to the backing class instance. We're used to writing repetitive code for this, read out text from the text box, check if it's valid, and assign it to the backing class instance. And also the other way around, assigning the value of say a name property on a person class instance to a text box's text property in the UI. Data binding is a way to eliminate the need to write code to keep these two in sync. When we use data binding we no longer have to assign changes from the UI to the underlying model or the other way around. The instance is bound to the UI, and depending on how we define the binding, changes in the UI are synced down to the underlying object instance and/or the other way around. It's one of the most powerful features provided by the XAML framework and it's a concept that will save you tremendous amounts of time if done right. It will definitely reduce the amount of repetitive code you have to write and it should result in less error prone apps. Next to that, the concept itself allows for better decoupling, testing, and reuse, allowing for popular design patterns like the Model-View-ViewModel design pattern to work. DependencyObjects and properties provide the underlying functionality that makes data binding work, it's all this what we'll look into in this module.

Working With ItemsControls
Have you ever seen a line of business app that didn't display lists of data? Well, neither have I. In XAML it's ItemsControls we use to display lists of data, and this module is all about that. It's a bit of a combination module, we'll combine what we've learned about a content model and about data binding, and that'll result in us being able to display lists of data. So what's an ItemsControl? Well you might remember from the Control Basics module that there are different content model classes controls adhere to. The content model classes all inherit control and act as base classes for the actual controls we're using, depending on what the control's behavior should be like, a different content model is used by set controls. For example, a button uses the control model that contains one single item as content, the ContentControl. Well, ItemsControl is one of those content models. It's the content model class, the base class, for controls that are used to display lists of data, like a combo box, a list box, etc. They all derive from this ItemsControl class. So what you'll learn here applies to all of those. ItemsControl also exposes a property ItemsSource. Through this property we should assign an IEnumerable, and that one acts as the underlying list of data that's displayed by the ItemsControl. Let's dive straight in with a demo.

Debugging and Analyzing XAML
It's an often returning question, can we debug XAML? When that question gets asked it's often to try and find a error in data binding, your data doesn't show up on screen and you don't know why. Another interesting case is related to somewhat more complex layouts. As you know by now, XAML code for say a ListBox template can get quite extensive. In those cases it might be hard to find out why a certain part of your template doesn't look the way you want it to look, there might be an alignment issue, an issue with the margin, color, overlays, etc. There's a tool that can help with this. And lastly, there's performance, what can we do to ensure our code runs smoothly? These three things are what we'll look into in this module. So debugging XAML is something you typically do to check if your bindings work, and it they don't, to check what's wrong. Unfortunately setting breakpoints in XAML bindings isn't possible except in Silverlight, but we can use the Output window to check for data binding errors. Let's check that with the demo.