Getting Started with UWP App Using C# and XAML

The Universal Windows Platform (UWP) framework allows developers to build applications for the Windows device family including PCs, tablets, smartphones, HoloLens, Xbox, IoT, and Surface.

This article is an introduction to UWP and how to build your very first app. If you're already familiar with UWP, you may want to skip this article. 

What is a UWP app?

The apps developed using UWP are called Universal apps or UWP apps. Figure 1 depicts the reach of Universal apps.

                                                                         Figure 1.

• A UWP app can target all or some selected devices. The Core APIs are shared on all devices in the Windows family. There are extension SDKs that provide specialized APIs for each device in the family.
• A UWP app is developed using Visual Studio 2015 or later versions. 
• A UWP app is packaged and distributed using the .appx packaging format.
• A UWP app is distributed to all devices using a single Windows Store.

UWP App Characteristics

UWP apps are similar to iOS and Android apps, but run on the Windows operating system. Some of the key characteristics of UWP apps are:

• Live tiles
• Lock screen live updates
• Push notifications with real-time updates and alerts
• Background tasks execution
• Access to device resources and hardware such as storage, camera, microphone, Bluetooth, and messaging center.
• Voice and speech recognitions.
• Integration with other products and services such as maps, gps, and cognitive services.
• Integration with Windows security, settings, and cloud.

Language Choices for UWP Apps

UWP apps are the way to build applications for Windows 10 and later Windows operating systems that target Windows family devices as shown in Figure 1.
There are three language choices to build UWP apps depending on your expertise and needs.

• JavaScript and HTML
• C# (or VB.NET) and XAML
• C++ and DirectX/XAML

In this article, we will use C# and XAML to build our apps.

Prerequisites

This article is for software professionals who want to build Windows Universal apps for Windows 10 PCs, Tablets, Smartphones, IoT, Xbox, and Surface devices. For our applications, we will use Visual Studio 2017 (RC as of now) Community or other versions of Visual Studio 2017.

Prerequisites for this book are:

1. Understanding of C# language and object oriented programming.
2. XAML language basic programming concepts.
3. Knowledge of Visual Studio 2015 or later IDE.

You may want to download the Visual Studio 2017 Community edition here: https://www.visualstudio.com/

Hello, UWP!

Let’s create a simple “Hello, UWP!” app.

Create a Project in Visual Studio

Open Visual Studio and select File >> New >> Project menu.

In New Project, you will see Installed Templates in the left side templates listing. On the left side, you have a choice to select a language - Visual Basic or Visual C# or Visual C++.

I selected Visual C# -> Windows Universal -> Blank App (Universal Windows).

In the center area, make sure you have .NET Framework 4.6.1 selected in the first drop down list and the Blank App (Universal Windows) selected as the project type template. This template is used to create a Blank UWP app. As you can see from the far right side, a blank project is used to create a single-page Windows app that has no predefined controls or layout.

                                                                  Figure 2.

Now on the Name text box, type the name of your project. For my project, I named it HelloUWP. The Location text below lets you browse the folder where you would like to store your project files. You can even change the solution name, if you would like, by changing the Solution Name field. This field is important when you have multiple projects in a single solution. I kept my Solution Name default.

Now click the OK button.

In the next step, you may see a popup dialog that will ask you select a target version and minimum version of the Windows operating system.

Understanding Project and Files

Once you click the OK button, you will see that the default Visual Studio solution looks like Figure 3.

 

                                                                  Figure 3.

As you can see from Figure 3, there are 3 major areas of Visual Studio – the Code Editor, Solution Explorer, and Properties window. This may look different based on your previous Visual Studio settings.

First, I want to focus on the Solution Explorer. Figure 4 is the expanded view of the Solution Explorer.

 

                         Figure 4.

The Solution Explorer is a TreeView-like control that lists all projects and project files of a Solution. By default you will see the following nodes - Properties, References, Assets, App.xaml, a TemporaryKey, MainWindow.xaml, Package.appxmanifest, and project.json.

The Properties node has a file called AssemblyInfo.cs that stores the general information about an assembly. In this case, it’s the current app.

The References folder lists all the references added to a project.

The Assets folder list all the assets available to this app. As you can see from Figure 4, seven .png files are added by default to the project which are used as default logos for the app.

The App.xaml file is an application file and stores application-related code.

The HelloUWP_ TemporaryKey.pfx is a default certificate of the app.

The MainWindow.xaml and the .cs class is the representation of the main user interface window of the app.

The Package.appxmanifest files defines the app package manifest.

I will discuss these files in more detail in my following articles. In this article, I will focus on the Main Page.

The Main Page

A UWP app consists of one default MainPage.xaml file. This is the default user interface the app users will see when an app launches. The MainPage.xaml is the main user interface of an app. This is the screen users see when they launch their app.

Double click on MainPage.xaml file in Solution Explorer. The page opens in the designer with the XAML view.

 

                                                                     Figure 5.

As you can see from Figure 5 XAML, the MainPage is derived from the Page class. The XAML also shows there is a Grid element added to the interface automatically that works as a container for the child controls.

Now it’s time to add controls to MainPage.

There are two ways to add controls to a page at design time. Firstly, it can be done by simply dragging and dropping controls from the Toolbox to the page; and secondly, by typing the XAML code by hand.

Now, drag and drop a Button, a TextBox, and a TextBlock control from Toolbox to MainPage. After moving and placing controls around, the final MainPage looks like Figure 6.

 

                                                                        Figure 6.

Now you may have noticed something when you were dragging and positioning these controls in MainPage. The designer was writing XAML code for you. After placing controls as shown in Figure 6, the XAML code looks like Listing 1. 

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

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Height="600" Margin="10,33,0,10">
   <Button Content="Button" HorizontalAlignment="Left" Margin="57,172,0,0"
   VerticalAlignment="Top" Height="99" Width="277"/>
<TextBox HorizontalAlignment="Left" Margin="384,175,0,0" TextWrapping="Wrap"
   Text="TextBox" VerticalAlignment="Top" Height="91" Width="439"/>
<TextBlock HorizontalAlignment="Left" Height="208" Margin="60,313,0,0"
   TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"
   Width="763"/>

</Grid>
</Page>

                                                                          Listing 1

As you can see from Listing 1, there is one XAML element for each Button, TextBox, and TextBlock control. Each element also has Width, Height, Margin, VerticalAlignment, and HorizontalAlignment properties set for these controls.

Setting Controls Properties

The next step is to set control properties. There are two ways to set the control properties. The first and the easiest option is to use the Properties window, and in the second option, you can write the XAML code by hand. For the sake of simplicity, we will use the designer for now.

To open the Properties window, select a control and click on the Properties tab in Solution Explorer. For example, select the Button control and then click on the Properties tab. The Properties window for the Button control looks like Figure 7.

 

                                 Figure 7.

Figure 7 shows the Properties window that lists all the properties of a control. You can simply set these properties by selecting the property and its value.

I selected the Button control and changed its Name to “HelloButton,” the Brush background to red, and the Content property to “Click Me!” as you can see from Figure 8. I also changed the font size to 36.

 

                                                      Figure 8.

If you look at the XAML code, the new XAML of the Button looks like Listing 2, which shows the values of x:Name, Content, Background, Foreground, and FontSize.

<Button x:Name="HelloButton" Content="Click Me!" HorizontalAlignment="Left" Margin="57,172,0,0" VerticalAlignment="Top" Height="99" Width="277" Background="#FFD52626" Foreground="#FFEFEAEA" FontSize="36"/>

                                                                      Listing 2.

Also, change the Name property of TextBox and TextBlock to HelloTextBox and HelloTextBlock respectively.

Adding Event Handler

To see all control events and add event handlers, click on the Lightening icon on the Properties window. It will open the events. See Figure 9.

 

 

                             Figure 9.

To add an event handler, simply double click on these event TextBoxes. Double click on the HelloButton’s Click event TextBox. It adds the following code to the code-behind file.

private void HelloButton_Click(object sender, RoutedEventArgs e)
{
}

                                                                      Listing 3.

The Button control XAML is also updated and the Click attribute is added to it. See Listing 4.

<Button x:Name="HelloButton" Content="Click Me!" HorizontalAlignment="Left" Margin="60,167,0,0" VerticalAlignment="Top" Height="99" Width="277" Background="#FFD52626" Foreground="#FFEFEAEA" FontSize="36" Click="HelloButton_Click"/>

                                                                     Listing 4.

Add “Hello, UWP!”

Now, in our application, simply clicking on the Button control will display the content of the TextBox control into the TextBlock control.

The Button click event handler code looks like Listing 5 where we set the Text property of the TextBlock to the Text property value of the TextBox control.

private void HelloButton_Click(object sender, RoutedEventArgs e)
{
HelloTextBlock.Text = HelloTextBox.Text;
}

                                                                     Listing 5.

Build and Run

Now let’s build and run our application by pressing F5. The app runs and the output looks like Figure 10. Now, simply type some text in the TextBox and click the Click Me! Button. The output will be displayed in the TextBlock.

 

                                                              Figure 10.

Congratulations!

You’ve just built your first UWP app.

Summary

UWP is the platform for building next generation Windows applications for all Windows family devices. In this article, we discussed the basics of the UWP app and how to build our first UWP app using Visual Studio 2017 and C#.

Visual Studio provides four different types of UWP app project templates. In my next article, I will discuss these project types.