Introduction

This article will help you to develop a basic Universal Windows app, which can work on Windows phone, Windows 10 PC, Surface tab, etc. Let’s get to the work now.

Target Audience

Beginner with basic C# and XAML coding knowledge.

Technical Requirements

Let’s work now on a basic app which we will be developing, using controls like Text Box, Text Field, Button Click etc. and it can work both on Windows and Windows PC.

Run Visual Studio 2015 in your PC.


Click File -> New -> Project


Select Visual C# -> Windows -> Universal -> Blank app (Universal Windows) Visual C#, name your app -> Select the location, where it has to be saved and click OK to create the app project in Visual Studio 2015.


Now, Visual Studio 2015 is ready with all the development related information of Solution Explorer, menu options, coding Window etc.


Clicking on Local Machine will help you to run the UWP app in your Windows machine.





The Blank UWP app is ready now. Let’s work with the control options, which we need now.

Note

Clicking on the Stop button will stop running your UWP app on your PC and you should stop running your app before you switch on to work with your project on Visual Studio 2015.

On your Solution Explorer, you can find two main files named MainPage.xaml and MainPage.xaml.cs. Now, click on MainPage.xaml, where you can find two panes – a graphical designer pane and a coding pane given below.


In the top image, you can find different options given below.

Adding controls in UWP app

You can add the textblocks, textbox, button, etc., using an option called toolbox, which you can find in 'View a ToolBox', for which just select the tools that you need, use drag and drop it towards the graphical designer Window.


You can even simply go with the coding inside the grid on MainWindow.xaml, if you are familiar with the coding.

Code for MainWindow.xaml

  1. <StackPanel HorizontalAlignment="Center">
  2. <TextBlock Text="Hello, C# Corner Members!" Margin="20" Width="200" HorizontalAlignment="Left" />
  3. <TextBlock Text="Your Good Name Please" Margin="20" Width="200" HorizontalAlignment="Left" />
  4. <TextBox x:Name="txtbox" Width="280" Margin="20" HorizontalAlignment="Left" />
  5. <Button x:Name="button" Content="Click Me" Margin="20" Click="button_Click" />
  6. <TextBlock x:Name="txtblock" HorizontalAlignment="Left" Margin="20" />
  7. </StackPanel>

Now, the designer pane will look, as shown below.


Let’s add a click based event handler for the button added here.

Double click on the button in the Designer Window here.


Add a MessageBox.Show code that the given details are saved as such in MainWindow.xaml.cs

Run your app on your own PC

To run your app on your own PC, select the UI, which you need and click on Local Machine to run it.








Now, clicking on the button of 'Click Me' will display your message box that the name has been saved. You can also try the same in Windows phone.

Run your UWP app in Windows phone

Note

Make sure that you have a Windows phone or a Windows phone Emulator installed on your PC.

In Visual Studio 2015, select UI as a phone.


Select device here to run your app on a Windows phone device or if you wish to run it on a mobile Emulator, you can select it.




Keynotes in Short