Hands on UWP-Universal WIndows Platform

Pre-requisite Knowledge

Before we start with the understanding of Hands-On UWP, we should know-

1. Understanding of UWP
2. Understanding of an Visual Studio IDE (Optional)

Hands- On UWP (Universal Windows Platform)

Before starting anything make sure to enable the Development from the Windows Settings

Go to Settings > Update & Security > For Developers > “Select the Developer Mode” from the list of Developer Features.

Let’s dive in to create a Hello Word UWP Application.

1. Open Visual Studio (I’ll be using Visual Studio 2019 for this article).
   Note: The IDE is Visual Studio Community Edition, not the Visual Studio Code (It’s a smart Text Editor)
   
2. After opening Visual Studio, click on Create a New Project
   
3. On the next screen, Search for “UWP” in the top given search bar and then select “Blank App (Universal Windows)”, then simply click on Next
   
4. Give your project a name, then click on Next
   
5. Here we can select the versions accordingly, but for this demo, I’m keeping it untouched.
   
6. Here we can see that there are 2 important files in the name of “MainPage”
   1. FrontEnd: MainPage.xaml
   2. Backend: xaml.cs

7. Now after opening the FrontEnd file, here are again 2 views,
   1. Code View (We’ll use this view for this demo)
   2. Design View

8. Now place the below code in the Code View of the MainPage.xaml file.
9. FornEnd Code for the Button and the TextBox:
   <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
   <TextBox Text="Press the Below Button" x:Name="btnCounter"
                           Height="200" Width="500" FontSize="45" IsEnabled="False" />
          
               <Button x:Name="clickBtn" Content="Click Me"
                           Height="200" Width="500" FontSize="100" Background="Aqua" />
    </StackPanel>
   
10. Now double click on the Button from the Designer Panel, what this will do?
    1. It will automatically create a function inside the Backend file (i.e. MainPage.xaml.cs) which will be triggered automatically after the button is clicked.
    2. Use the code in the selected fields from the Image.

11. Now press F5 key to run the program.

Thank you so much for tuning in. Stay tuned for further articles, I’ve got something really exciting on UWP in the next series of Articles.

Conclusion - In this article, we have learned about:

1. 1. Created a UWP Hello World Application
   2. Used XAML language for Front End
   3. C# for the Backend