Today’s task is to build a simple Win10 UWP application, analyze the application structure, become familiar with the Visual Studio 2015 development environment, and get acquainted with the Windows application event response mechanism by adding a button. Before starting this article, let me answer the questions raised by two netizens.

1. What components do Visual Studio need to install to develop UWP applications?

Make sure Windows Universal Application Development is selected. As shown below:

▲Visual Studio 2015 installation interface

In addition, the latest version of the SDK is not included in the Visual Studio installation package and needs to be downloaded online during installation. You can uncheck Tools (1.2) and Windows 10 SDK (10.0.10586). After completing the installation, download the SDK independent installation package from here to install it.

2. Supplementary information about Hyper-V virtual machine support conditions

Whether the CPU supports virtualization technology can be judged through a piece of software. For detailed methods, please refer to "Complete Illustrations of XP Mode Download, Installation, and Settings under Windows 7". In addition, in addition to the CPU needing to support virtualization technology, the Windows 10 Professional version and higher operating systems are also required.

Create your first Win10 UWP app

Open Visual Studio 2015, click the menu File - New - Project, and the "New Project" dialog box will pop up, as shown in the following figure:

▲Visual Studio 2015 New Project Dialog Box

Select Visual C# - Windows - Universal in the template, select a blank application (Universal Windows) on the right, change the name to Hello or other, and finally click OK to generate a blank UWP universal application. The interface at this time is as shown below:

▲Visual Studio 2015 operation interface

The top of the interface is the menu bar and common operation buttons, and the far right is the Solution Explorer pane, which lists all the files in the project. After double-clicking the file, it will open in the left pane, making it easy for us to edit and modify. The lower right corner is the properties pane, which displays the property options of our currently selected target. The lower left pane is used for debugging, and errors in the code will also be prompted here.

Project file structure analysis

Looking at the Solution Explorer pane, a newly created UWP application contains the following files:

▲Visual Studio 2015 Solution Explorer Pane

•Properties, describes the project properties, double-click to open the project properties window for modification;

•Quote, all APIs that need to be used in applications need to be referenced here. By default, the project will reference the APIs required by UWP applications that are common to all devices;

•Assets, storing resource files such as pictures, audio and video files required by the application;

•Packages.appxmanifest, application manifest file, a file used to describe information such as the functions and version of the application.

The following two items are the two most important parts of the application and are also the main objects of our operations:

•App.xaml and App.xaml.cs

•MainPage.xaml and MainPage.xaml.cs

In the project, they defined two classes respectively, namelyapplication class(App) andMain page class(MainPage).

This is a world composed of classes (objects)

Class is a very important concept in object-oriented programming, which is inspired by the real world. For example, humans will be defined by some attributes (such as occupations) or methods (such as skills), and then each individual will be generated based on the definition. The same thing is true in programming, everything is defined through classes, andEvery specific thing is an individual generated according to the definition of the class. This is called an instantiation object of the class..

In object-oriented programming, we need a variety of different objects to complete different tasks, we also need to coordinate the relationship between various objects, and add additional classes (objects) according to our own needs.

In our current project, App.xaml and App.xaml.cs define the application class, which is responsible for maintaining the life cycle of the application, clearly indicating when the application is opened, suspended (after switching from the current application to another application) and suspended. What operations need to be performed in case of recovery, etc.

MainPage.xaml and MainPage.xaml.cs define the main page class of the application.The former is responsible for describing what content is contained in the page, and the latter mainly includes the interaction logic between the page content and the user.Next we add some content to the newly created blank application.

First acquaintance event!

Our commonly used Windows applications are mainly event-driven. For example, clicking a button will trigger the button's click event. All we need to do is to put the operation to be performed in the response function of the corresponding event. Next, we add a button to the main page so that Hello World will pop up after clicking the button! Prompt dialog box.

Double-click MainPage.xaml, and the corresponding page designer will appear in the left pane, as shown below:

▲Visual Studio 2015 XAML page design view

Click the toolbox on the left and drag the Button to the main page area to complete the addition of a button, as shown below:

Select the added button, and the button's property setting options will appear in the properties pane in the lower right corner. Click the lightning icon in the upper right corner of the small pane to display a list of all events:

Find the click item, enter the function name in the text box on the right (customize or leave it blank to use the default name), double-click the text box to add a click event response function to this button, and automatically enter the function editing page (i.e. MainPage .xaml.cs file editing page).

At this time, add the code in the function body (within a pair of curly brackets) according to the following code, and pay attention to adding the async modifier in front of the function name.

private async void button_Click(object sender, RoutedEventArgs e)

{

MessageDialog dlg = new MessageDialog("Hello World!");

await dlg.ShowAsync();

}

In complex projects, we need many classes, and these classes may be written by different people. In order to avoid conflicts, namespaces are used for "classification". Since the MessageDialog class we use is defined in the Windows.UI.Popups namespace, to use this class, you need to add the following line of code to the top part of the code file:

using Windows.UI.Popups;

▲The final code after adding a click event response function to the button

So far we have completed the addition of the button and its click event handler. Click the green play button in the toolbar at the top of the window to compile and run. After running, the main interface will pop up. Click the button in the window to pop up Hello World! Prompt dialog box, as shown below:

Where is the entry point of the program?

Let’s analyze it further below. Friends who have studied languages ​​such as C++ all know that applications have an entry point, so the UWP applications here are no exception. In fact, there is another class in the application created in this article. The so-called entry point is hidden here. Let's find it out below.

Click View in the menu - Class View. The Class View will appear on the right. Expand Hello (namespace) and you will see that in addition to the App and MainPage classes, there is also a Program class, as shown in the figure below. :

Double-click the Program class, and a file named App.g.i.cs will open on the left (it is hidden and automatically generated by the compiler). Part of the code is as shown below:

You can see that the Program class contains a method named Main(), which is the entry point function of the entire application. Earlier we introduced the concept of instantiation of a class, which only becomes meaningful after it is instantiated into an object. However, the Program class here is a static class (modified previously with static). The characteristic of a static class is that you can use the various methods defined in it without instantiating it as an object (of course they are all static), then Main( ) function can be run directly.

The relationship between various classes or objects

Continuing to observe the statements in the Main() function, you can find that it instantiates an object of the App class (new APP();), which is alsoThe only App class instantiation object in the entire application. With the App object, how is the program page presented? (i.e. How does the MainPage class come into play?)

Actually in the UWP app App object contains aWindow object, which provides various operation methods for windows. When the application starts, anotherFrame objectAssigned to the Window object (Content property). In addition to the MainPage main page in the application, we can also add other custom pages, and the role of Frame includes allowing the application window content to navigate between different pages. The definitions of the Windows class and the Frame class are contained in the assembly we referenced, so these two classes are not displayed in the application's class view. The relationship between the above classes or objects is reflected in the OnLaunched method of the App class. The OnLaunched method represents a series of actions that need to be completed when the application starts. The main code (in the App.xaml.cs file) is as follows:

The above is a simple analysis of the UWP application structure. If you don’t have a C# language foundation, it doesn’t matter if you can’t understand the code. Now you only need to have an overall understanding of the entire structure. Next time we will learn the basic points of the C# language.