XAML 101: Our First App (Part 2)

FacebookTwitterGoogle+Share

Source code for this sample is at GitHub here: https://github.com/billreiss/xamlnative/tree/master/Xaml101/002_OurFirstApp_Part2

In the last post we created a new C# Universal Windows Platform (UWP) app, ran it, and took a look at what gets generated. We also disabled the frame rate counter. Now it’s time to really get in to the XAML part of the app. MainPage.xaml contains the layout for the home page of the app. Let’s take a look.

This is what gets generated in MainPage.xaml:

<Page
    x:Class="HelloXaml.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloXaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    </Grid>
</Page>

So the first thing to notice are these xmlns attributes. These are XML namespaces and this is how XAML finds what it needs. Generally these map to .NET namespaces and assemblies and you can think of it similar to the “using directive” in C# (for example “using System.Collections.Generic;”),  more about these later. The “x” namespace is a special one used by XAML for internal built-in extensions. We see “x:Class”, and this is used to declare the class name for this class. This will match the namespace in the code behind in the MainPage.xaml.cs file:

namespace HelloXaml
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }
    }
}

So we have a code behind class of HelloXaml.MainPage, and we have a MainPage.xaml file with an x:Class of HelloXaml.MainPage. This links these two files together. Now a little about how the sausage is made. Even though you really don’t have to worry about this, I think it helps to know what is going on.

The MainPage.xaml file has a Build Action of “Page”. This tells Visual Studio to generate a partial class that is compiled along with MainPage.xaml.cs to create our HelloXaml.MainPage class. This generated file, named MainPage.g.i.cs has an InitializeComponent() method which is called from the MainPage constructor (see above). Any named entities (we will get to this later) will have generated code here, there is also code to load the XAML file into the object (known as deserializing or hydrating).

The root control inside the MainPage is a Grid control. You can change this if you want to, but the Grid is a pretty good choice for the root element in your page. A Grid has rows and columns (defaults to 1 row and 1 column) and you can think of it like a Table in HTML. Grid inherits from Panel, and there are a few other types that also inherit from Panel, and we will see these as we move on. The important thing about Panel (and Grid, since it inherits from Panel) is that it can have children. The various controls that inherit from Panel differ in how they treat the arrangement of their children.

Let’s add some text to the Grid. This is done with a TextBlock control. Inside the Grid, add a <TextBlock/> like this:

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock/>
    </Grid>

Now with this selected, let’s look at the Properties pane of Visual Studio. I’m a big fan of the Properties pane, especially when we get to data binding later. I like to arrange the properties By Name, but that’s up to you, whatever you prefer. When arranged by name, we can scroll down and find the Text property. Let’s set it to “Hello XAML!”. You will see in the XAML window that this change has been applied there:

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock Text="Hello XAML!"/>
    </Grid>

Run the app again, it will look something like this:

image