Project: UWP App (C#) - project's structure, creating basic "Hello world!" app (part 2)

Hello!

In the previous part, we created a UWP application project. 

In this part, I will explain the structure of the project and we will create a very basic application.

To start, however, let's compile and run it as is. To do this, you need to press the 'Play' 'Local Machine' button:

If the process is successful, an empty application with a black screen should launch:

The application should also appear in the list of applications in the start menu:

However, let's close it for now and move on to the structure of our project.

The Assets folder (blue arrow) contains additional elements of our application, such as graphics. In the new project, there are blank icon graphics for our application that can be customised.

But let's move on to the last element, which is Package.appxmanifest (red arrow). This file contains configuration and information about the application. When we open it, we are presented with a screen that allows us to set the application name, description, language information, orientation, generate or set icons, assign permissions, etc.:

There is no need to change these settings now, so I will move on to the most important part - MainPage.xaml and MainPage.xaml.cs (green arrows). Before I show them, however, I will mention that XAML is based on XML.

So let's open MainPage.xaml by double-clicking it:

Let's also click the "Project" button (pink arrow). We will be shown a black rectangle - the screen of our application. The option I have shown with the brown arrow allows us to set different devices and their resolutions to see how the app will look on them.

However, before we edit this element, let's open the MainPage.xaml.cs sub-file:

This file contains the C# code for this screen. MainPage.xaml defines the elements and appearance of the screen, and MainPage.xaml.cs contains the functional code.

Let's go back to MainPage.xaml and add something. Let's open the toolbox on the left (white arrow) - it contains a list of elements that we can place on our screen:

Let's start by placing a button and a text (text block). Simply grab the elements in the toolbox and drag them onto the application screen where they need to be:

To use them, let's name the elements. Click on them once and set their names in the menu on the right (you can also change other parameters of these elements there). I will name the button "Przycisk1" and the text "BlokTekstu1":

But before we add the C# code, let's press the compile button again. Our application will load again, but now with the button and text we added:

However, the button does nothing, after all we have not added any C# code. Let's close the application and return to editing. 

On the MainPage.xaml screen, let's double-press the button which we created. This will open MainPage.xaml.cs and add a piece of code that reacts to the button being pressed:

The code is:

        private void Przycisk1_Click(object sender, RoutedEventArgs e)

        {

        }

The code between the brackets ( { } ) will be executed when the button is pressed. Let's add something there. 

The second element we have put on the application screen is text. Let's program it so pressing the button changes it to the traditional "Hello world!". Let's add:

BlokTekstu1.Text = "Hello world!";

Entire function:

        private void Przycisk1_Click(object sender, RoutedEventArgs e)

        {

            BlokTekstu1.Text = "Hello world!";

        }

Let's save everything and compile the application. If we have done everything right, the application will load. Now pressing the button will set the text to "Hello world!":

That's all for this article. In the next part, we will use more advanced elements to create something better and more useful.

Thank you!

- Wojtekb30

(14.12.2022)

GitHub repository of this project: https://github.com/Wojtekb30/AplikacjaUWP1