2-UWP Development: Create your first UWP app

This is the second tutorial to the UWP series. In this tutorial you will gain the knowledge to create a simple “hello world” UWP App and deploy it. We will finish up the tutorial with a little guidance setting up the emulators we will use in the next tutorial.

Go to File > New > Project

New Project

Select Windows > Universal > Blank App (Universal Windows) – Visual C#
Change Name to “FirstApp”
Hit OK

New Project Window

In the Solution Explorer window find MainPage.xaml >> double click

The first time can take away to load the Designer.
When it finishes notice the white vertical oriented box. This box represents your app General User Interface (GUI).

Test change the layout from vertical arrangement to horizontal and back to get a feel for how it works. Zoom the designer view to user preference.

Solution Window MainPageGUI Layout

Add Button:
Select Toolbox > Common XAML Controls
Click and drag button option to the gui black box.
Notice the XAML code shows code for the button you just added to the interface. The XAML code is the code version of the visual changes you make to the gui.
Select the button you added to change the name of button to AppButton in the Properties Window.
Find “Content” in the properties window and change content to “Click Here”. Notice the words on the button in the gui change.

Add button-XAML code-namechange

Next you will add a Textblock:
Go to toolbox > Common XAML Controls
Click and drag Textblock from tool panel to you GUI.

Go to Properties Window > Common Textblock and change text to “1st Text”.

Add textblock-change block content text

Add First line of Code:
Click the Button we created go to Properties Window and click lightning bolt. Notice all the events the button can handle are listed.

Double Click the box associated with Click.
Notice a code window appears for MainPage.XAML.cs
a blinking cursor will appear in the block of code

Type between the curly brackets the following:

TextBlock.text = "2nd Text";

Find the Green Play triangle at top of window where it says “Local Machine”. Make sure local machine is selected and hit the triangle, which will deploy your first app.
You are now running the code you just created.

double click in rectangleadd code

A window will appear with the GUI we created.
Notice what the textblock says = “1st text”
Click the button
Notice the TextBlock changes to “2nd Text”

You have successfully created an UWP application and added a action function to it.

Close window

FirstApp Deployment

You just created your first UWP app. Now we will download and install a windows 10 phone emulator.

Click the dropdown arrow next to the local machine button
If you do not have Windows 10 listed continue with this tutorial if not feel free to go to the next tutorial in this series.

Select Download New Emulators from the deploy dropdown (Green Triangle).
Save the file that is prompted to be downloaded to a local folder
Double Click emulatorsetup
Specify your install location and hit next – I chose the default location.
Follow the rest of the installation prompts and install.

Now your ready for the next lesson. Feel free to take a break and come back to start the next tutorial, where you will experience an overview of visual studios and all the tools we will be using.

Share this Post

About the Author

Devin Bates

Facebook Twitter Google+

Electrical Engineer, enjoys cookies, invents things in his mind, and thinks the Iguanas are to blame for the weekday.


Leave a Reply