This chapter is a crash course in Extensible Application Markup Language (XAML). If you are experienced in writing applications using XAML-based technologies, feel free to skim the chapter and pick the parts that interest you. If you dont have experience writing XAML-based applications, then this chapter is a prerequisite for the rest of the book.
A Brief History of Windows User Interface Design
Before XAML was introduced to the development community, Windows desktop applications were mainly created using the WinForms technology. The WinForms design paradigm is similar to Visual Basic 6style graphical user interfaces (GUIs) of old. You work within a what-you-see-is-what-you-get (WYSIWYG) interface that allows you to drag controls from a toolbox and drop them on the window.
Visual Studio serialized the user interface in the designer as C# code that contained object declarations for all user interface controls along with property values and other details required to represent the user interface. This meant that if you were working in an environment where the team was made up of designers and developers, collaboration between the two groups was difficult. If a designer wanted to apply a common theme to a user interface, they would often create bitmap mock-ups and divide the mock-ups into smaller bitmaps to be used for each control on the form. These bitmaps would then need to be applied to each control as some property, such as the background. This process was tedious and inefficient. Bitmap-based designs dont scale well, and resizing the controls on a form caused the associated bitmaps to resize, which would often result in degraded image quality. Enter XAML.
Extensible Application Markup Language
XAML (pronounced zammle) is based on Extensible Markup Language (XML) and is for designing user interface layouts. XAML is known as a declarative language . It is almost always used in conjunction with another type of programming language known as an i mperative language , such as C#, VB.NET, C++, and so forth.
XAML-based technologies covered in this book include the following:
Windows Presentation Foundation (WPF) : XAML + C# + WPF assemblies
Windows 8.1/Windows Store development : XAML + C# + Windows Store assemblies
Windows Phone 8.1 : XAML + C# + Windows Phone assemblies
Each of these technologies uses XAML in combination with another .NET programming language, such as C# or VB.NET, to create desktop, tablet, and mobile applications with stunning and unique user interfaces as well as elegant and intuitive user experience designs, which were nearly impossible to achieve prior to the introduction of XAML and WPF in .NET 3.0.
Since XAML is an XML-based declarative markup language, it adds a completely new paradigm to Windows-based user interface (UI) development. XAML is verbose and thus easily read by humans. This is helpful when you need to edit XAML by hand. Moreover, the XML basis of XAML makes it an easy language for which WYSIWYG editors can be created.
I know, I knowright now you are probably thinking, XML may be easy to read, but what about the performance of my application? XML is too verbose! This is true. XML can cause performance problems when parsing; however, the XAML parser will compile your XAML into a binary format called Binary Application Markup Language (BAML) that is used during the execution of your application. BAML drastically reduces the size of your XAML code, and this helps to eliminate the performance problems associated with traditional XML parsing. BAML is tokenized as well so that duplicate references throughout the BAML code can be replaced by much smaller tokens. This in turn makes BAML code even smaller and thus faster during application execution.
Separation of User Interface Concerns
One of the great things about this new user interface design paradigm is the synergy it provides between developers and designers. Unlike technologies of the past, XAML includes code-behind associations, although this is not a requirement. In contrast to WinForms, XAML does not require the designer to create a C# representation of the user interface. XAML is designed to be all that is needed to define the look and feel of your user interface. This aspect of XAML, along with important new features such as data binding, routed events, and attached properties, which well discuss throughout the book, allows XAML-based applications to take advantage of user interface design patterns that allow the complete separation of the user interface design (XAML) and presentation layer logic (C#).
This book will focus on the Model-View-ViewModel (MVVM) design pattern, which will be covered in depth in later chapters. There are other design patterns that you can use with XAML based user interfaces that allow you to separate your user interface design from the presentation layer logic, and you should definitely look into some of them. Table provides references to two other great design patterns that you should explore.
Table 1-1.
User Interface Design Pattern References
Design Pattern Name | Reference URL |
---|
Model-View-Controller (MVC) | https://msdn.microsoft.com/en-us/library/ff649643.aspx |
Model-View-Presenter (MVP) | https://msdn.microsoft.com/en-us/magazine/cc188690.aspx |
Declarative vs. Imperative Programming
In declarative programming, the source code is written in a way that expresses the desired outcome of the code with little or no emphasis on the actual implementation. This leaves the framework to deal with parsing the declarative source code and handling the heavy lifting required to instantiate objects and set properties on the these objects, which are defined in the XAML elements.
Imperative programming is the opposite of declarative programming. If declarative programming can be thought of as declaring what the desired outcome is, imperative programming can be viewed as writing lines of code that represent the instructions of how to achieve the desired outcome.
A great example of a declarative language and an imperative language working together is XAML and C#. Whether you are developing a smart client desktop application using WPF, a Windows Store app for use with tablets such as the Microsoft Surface Pro, or a mobile application using Windows Phone, any of these applications can be developed using a mixture of XAML and C#.
Note
When it comes to the imperative .NET languages, you are not limited to C#. Depending on the target platform, you can use C#, VB.NET, and even F#. A search of the Internet reveals that C# is generally the language of choice when using WPF, Windows Store apps, and Windows Phone 8, so thats the language well use for the code examples throughout this book.
Lets begin by looking at the declarative XAML markup used to define a WPF Window . Listing shows a basic WPF Window with a grid and a button control written declaratively in XAML.
Listing 1-1 . Declarative Source Code Written in XAML
xmlns=" http://schemas.microsoft.com/winfx/2006/xaml/presentation "
xmlns:x=" http://schemas.microsoft.com/winfx/2006/xaml "
Title="MainWindow" Height="350" Width="525">