XAML 101: Our First App

FacebookTwitterGoogle+Share

Source code for this sample is on GitHub here: https://github.com/billreiss/xamlnative/tree/master/Xaml101/001_OurFirstApp_Part1

Let’s do the obligatory “Hello World” app and use it to show what gets generated by Visual Studio out of the box when creating a Windows 10 Universal App. Before we get started, a few things you will need:

Now in Visual Studio, select File->New Project. Under Templates->Visual C#->Windows->Universal and select Blank App (Universal Windows) and call it HelloXaml. Click OK.

image

This creates a project structure that looks something like this:

image

Run the app. You should see a blank window like this:

image

There are a lot of supporting files in the project, such as icons, configuration information, and more, and we will dig into some of these later through the course of this series. The most important files for us right now that get generated are App.xaml, App.xaml.cs, MainPage.xaml, and MainPage.xaml.cs. Here is a brief description of each of these:

App.xaml – Contains application-wide resources such as styles. Putting control styles here can keep the look and feel of your app consistent across different pages. Not much here by default except whether the app should use the light or dark theme.

image

App.xaml.cs – This is run on startup, creates the default frame for all of your app’s pages, navigates to the first page. Also handles app suspend and resume.

MainPage.xaml – The layout of the home page of your app.

MainPage.xaml.cs – The code for the home page of your app.

If you run the app in the debugger, you will see something like this in the upper left corner:

image

This is a frame rate counter, and can be useful when troubleshooting performance problems, but generally it’s just annoying. We can get rid of it pretty easily. In App.xaml.cs, at the top of the OnLaunched method, you will see the following:

#if DEBUG
            if (System.Diagnostics.Debugger.IsAttached)
            {
                this.DebugSettings.EnableFrameRateCounter = true;
            }
#endif

Let’s change this to:

#if false
            if (System.Diagnostics.Debugger.IsAttached)
            {
                this.DebugSettings.EnableFrameRateCounter = true;
            }
#endif

This way it’s easy to turn it back on again if we need it, but until then it will stay out of our way. This is a good place to stop, in the next post we will start digging in to the actual XAML of the app.