Please enable Javascript to correctly display the contents on Dot Net Tricks!

Hello World Windows store app using C# and XAML

  Author : Shailendra Chauhan
Updated On : 26 Sep 2016
Total Views : 5,335   
Support : Windows 8

In Visual Studio 2012, there are many templates for developing windows apps using c# and XAML. Let's start with Blank App (XAML) template with c#. First of all create a new Windows Store project with Blank App template with in your VS 2012 as shown below:

Before going to modify this template, let's have look into the structure and elements of this project.

The Reference

As you already know, this folder contains the references of the assembly used in the project.

The Assets

This folder contains the images used in your projects. By default, when you create a new project, the four images are included and each image has its own importance. I have changed the default images with colorful images as shown in the fig.


This is the most common image used by your apps. It is of size 150 x 150 pixels. This is also the default background image for your application’s tile on the user’s Start screen.


This image is used by your apps when a list of application is shown. It is of size 30 X 30 pixels. For example, when you do a search for an apps in windows 8, then a list of related apps will be shown.


This image is shown when your windows app starts. It is of size 620 x 300 pixels.


This image is used to represent your app in the Windows Store. It is of size 50 x 50 pixels.


This file contains all of the assembly information for your app like AssemblyVersion, AssemblyCopyright, AssemblyTitle etc. means all the public information used for your app.


This is the most important file of your windows app that contains all of the configuration, settings, and declarations for your apps. It also defines default background colors, orientations, and specific capabilities that your app required, like access to Location.

The Common

This folder contains the common resources for all the pages with in your apps, like StandardStyle.xml to define styles for app controls like text boxes, radio buttons, application bar icons, and more.


When your windows app starts then first of all App.xaml file is loaded and it contains all of the app-level resources and settings. By default, this has StandardStyles.xaml file as a ResourceDictionary and loads the StandardStyles.xaml file for making the styles available to every page of our app.

 Styles that define common aspects of the platform look and feel
 Required by Visual Studio project and item templates
 <ResourceDictionary Source="Common/StandardStyles.xaml"/>


This file is like as Global.asax file in Asp.Net and Asp.Net MVC where all of the start-up methods define, like OnLaunched(), OnSuspending() and much more. This is the code behind file of App.xaml.


This file acts as the default "home page" for your windows app. This is the page that will be shown to the user after the splash screen has loaded. You can modify this page acc. to your need to make it home page of your app.


This is the code behind file of MainPage.xaml file and contains the event handler method like OnNavigatedTo() for MainPage.xaml.


This is the certificate for your windows app. Each Windows Store app is signed by a certificate. When you first create a new project in Visual Studio it will create a new test certificate automatically. You can also create a new certificates there, if needed.

Modify your start page MainPage.xaml

In the MainPage.xaml file you can define the UI for your app. You can add elements directly using XAML markup, or you can use the design tools provided by Visual Studio. I have added it to one textbox, button and textblock for displaying message as shown below:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
 <StackPanel Margin="151,99,0,0">
 <TextBlock Text="Welcome to Windows Apps Tutorial" Style="{StaticResource BasicTextStyle}" FontSize="36"/>
 <StackPanel Orientation="Horizontal" Margin="0,20,0,20">
 <TextBox x:Name="nameInput" Width="421" HorizontalAlignment="Left" Height="46" FontSize="24"/>
 <Button Content="Say "Hello"" Click="Button_Click" FontSize="24"/>
 <TextBlock x:Name="greetingOutput" Style="{StaticResource BasicTextStyle}" FontSize="24" Foreground="#DEEA510A"/>

Create an event handler for button click

Create an event handler for handling the button click event and showing the message entered with in the textbox as shown below:

private void Button_Click(object sender, RoutedEventArgs e)
 greetingOutput.Text = "Hello, " + nameInput.Text + "!";

Run Windows App

For running your windows apps you have to deploy your apps to one of the three options - local machine, remote machine, simulator. If you have windows store license, you can upload your app to local machine or remote machine. If you don't have the windows store license, you can deploy it to simulator. In this article, I am using Simulator.
Press F5 to build and run the app. After splash screen the home page will be open. Enter your name and press button. Now you have seen the output as shown below:
What do you think?

I hope you will enjoy the tips while developing your windows app. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

Free Interview Books
PPC Marketing (offline)

Sat, Sun 09:00 AM-10:30 AM IST

Know More
AngularJS Development (online)

MON-FRI 08:00 PM-09:30 PM IST.

Know More
26 OCT
ASP.NET MVC with AngularJS Development (online)

MON-FRI 07:30 AM-09:00 AM IST

Know More
24 OCT
NodeJS Development (online)

MON-FRI     06:00 AM - 07:30 AM IST

24 OCT
MEAN Stack Development (online)

MON-FRI     06:00 AM -07:30 AM IST

22 OCT
ASP.NET MVC with AngularJS Development (offline)

SAT,SUN     08:00 AM-09:30 AM

12 OCT
ASP.NET MVC with AngularJS Development (online)

Mon-Fri     09:30 PM-11:00 PM IST

17 SEP
ASP.NET MVC with AngularJS Development (offline)

SAT,SUN     05:00 PM-06:30 PM IST

NodeJS Development (offline)

Sat, Sun     11:00 AM-12:30 PM IST


Professional Speaks