Creating a ‘Hello World’ UWA on UWP

HTML code

(Image by hgdlawfirm.com) HTML code over deep blue background

My previous post might have helped to create a new application environment in Visual Studio. If you didn’t get the chance to view it, you may re-check it here. This article will help you to move one step a head and create a ‘Hello World’ application. We will use Visual Studio 2015 on Windows 10 Operating System for this demo. As of now, you may have a free update to Windows 10 from your existing system if it is Windows 7, Windows 8 or Windows 8.1, thanks to Microsoft. If you don’t have Visual Studio 2015, you may get Visual Studio 2015 Community Edition for FREE.

Aim of the app: In this blog, we will create a text-block and a button on the front-end. When the button is pressed, it will change the contents of the text-block to ‘Hello World!’.

Steps: Continuing from the previous post, once you have created a blank Universal Window application (UWA), you will have to follow these steps to create a Hello World application.

Following is a screenshot of the solution which you will see once you’ll create a blank application. As you may see the solution is named as ‘Hello World’ which contains only one project named ‘Hello World’ of type ‘Universal Windows’.

Hello-World-solution

Following are the details of file structure we see above

Properties: This carries all the settings of the application which includes:

  1. Application settings such as general assembly name and default namespace, targeting version and minimum version for the application
  2. Build configuration
  3. Build events such as pre-build and post-build events
  4. Debug information
  5. Reference paths
  6. Signing
  7. Code analysis

References: References added in the project

Assets: Assets such as images added to the project

App.xaml: Application XAML and .cs file

MainPage.xaml: Main page XAML and .cs file

We will be working on MainPage.xaml and .cs file in this blog.

  1. Double click on MainPage.Xaml and it will open in the designer view. You might see a window with XAML code in it, ignore it for now. This is what you see at this moment: XAML Designer View
  2. Expand toolbox and it will now load different tools as shown below Toolbox
  3. We now need to add a Text-block first and then a button which when pressed will change the contents of the text-block. Scroll down and select the text-block from the toolbox, drag it on to the XAML designer. You may place the text-block anywhere you feel like, we will adjust the position later on. You will notice that it has added the content as ‘TextBlock’ by default. It will display the layout as below: Text-box added
  4. As the text-block has been added, we will now change the properties of it. With textblock selected, open the Properties Tab. It will be displaying the properties of the selected item, in our case, it is textblockProperties Tab Change Name to txtMessage
  5. Open the layout tab and you will notice the following options Properties Tab - Layout
    Width: this is the width of the text-block selected in pixels
    Height: this is the height of the text-block selected in pixels
    Horizontal Alignment: this is the horizontal alignment of the text box
    Vertical Alignment: this is the vertical alignment of the text box
    Margins (in pixels) : Left, right, top, bottomSelect ‘center‘ for Horizontal Alignment
    Select ‘top‘ for Vertical Alignment
    In Margin, change all the values to 0 (Zero)
  6. Now we will change the font-size of the text-block. Expand Text and select the font-size to 24 pt. Also select Bold and Italics option. The text options window will look like the following. Properties Tab - Text
  7. Now we will add a button to the layout. Go back to the Toolbox and select Button and drag it on the layout anywhere. Keep the button selected and you will see the properties of the button in Properties tab.
  8. Following is how the properties tab will look like. Button - Properties Tab
    Change name to btnPress
    Change content to Press Me
    Select Horizontal Alignment to Center
    Select Vertical Alignment to Center
    Change all margins to 0 (Zero)
  9. After making all the above changes, following is how the final layout should look like. Layout Look
  10. If we look at the application in emulator, here is how it will look like. Phone-screenshot-11
  11. As no code has been added behind the button at this moment, no action will take place if the button is pressed. Our next step is to add a code behind the button. To do that, go back to Visual Studio and close the running instance (if incase you ran it to check the output in the emulator), select the ‘Press Me‘ button and double click it. This will right away display the code behind the button. Following is what you should see.
    private void btnPress_Click(object sender, RoutedEventArgs e)
    {
    
     }
    
  12. We will add more code to it so we may change the text of text-block when the button is clicked. Following line will be added to the above function.
    txtMessage.Text = "Hello World!";
    
  13. Here is a final code of the function how it should look like.
    private void btnPress_Click(object sender, RoutedEventArgs e)
            {
                txtMessage.Text = "Hello World!";
            }
    
  14. Now when we run the application in the emulator and click the button, it will change the text to ‘Hello World’. Here is the final output you’ll see.
    Windows Phone  - Final output

 

I hope this article helps you get a better understanding of working on C# and XAML code for beginners.

Enjoy coding :)