.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
Melody Anderson

Home >> Articles >> Metro Apps >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Create Your First Windows Store app using C#/XAML

Posted By:Ravi Ranjan Kumar       Posted Date: November 30, 2013    Points: 200    Category: Metro Apps    URL: http://www.dotnetspark.com  

This article help beginner to learn how to write code for first windows store apps.


1) To make your first windows store app,

  • you need Windows 8 or Windows 8.1 Operating System
  • you need Visual Studio 2012/2013

2) To Download the tools Click Me!
3) You also need a developer license. Click Me! to see the instruction
4) This article is using XAML so it is assumed that you know at-least basic of XAML.

Steps to Creating your first application

Step 1: Create a new project in Visual Studio
Launch Either Visual Studio 2013 or Visual Studio 2012.
Select File > New Project.
The New Project dialog appears. The left pane of the dialog lets you select the type of templates to display.

In the left pane, expand Installed > Templates, then expand Visual Basic or Visual C# and pick the Windows Store template type. The dialog's center pane displays a list of project templates for Windows Store apps.
In the center pane, select the Blank App template.
The Blank App template creates a minimal Windows Store app that compiles and runs, but contains no user interface controls or data. You add controls and data to the app over the course of these tutorials.
In the Name text box, enter "HelloWorld".
Click OK to create the project.

Although the Blank App is a minimal template, it still contains a lot of files:

  • A manifest file (package.appxmanifest) that describes your app (its name, description, tile, start page, and so on) and lists the files that your app contains.
  • A set of large and small logo images (Logo.scale-100.png and SmallLogo.scale-100.png)to display in the start screen.
  • An image (StoreLogo.scale-100.png) to represent your app in the Windows Store.
  • A splash screen (SplashScreen.scale-100.png) to show when your app starts.
  • XAML and code files for the app (App.xaml and App.xaml.cs/.vb) .
  • A start page (MainPage.xaml) and an accompanying code file (MainPage.xaml.cs/.vb) that run when your app starts.

These files are essential to all Windows Store apps using Visual Basic or C#.  Any project that you create in Visual Studio contains them.

Step 2 : Make The UI(User Interface)

Double click the MainPage.xaml file. This will load the page in to the built-in designer for Visual Studio.

Here, you see two views. One is the design-view, where you can see how the app looks like. Here you can select controls and make modifications. You also see the code-view, where you can write markup code that defines the UI.
Logic will be made in the code-behind file.

Note : The MainPage in the Blank App project template is based on the Blank Page template. It contains the minimum amount of XAML and code to instantiate a Page. However, when you create an app for the Windows Store, you must do more.

From the Toolbox located at the Left Side of Visual Studio IDE. Drag One Button, One TextBox and One TextBlock. and Place in an arrange way as you want. No Offence.

Now, press the TextBlock and open the properties pane (found where you found the Toolbox pane). Ins Same way design other controls like Button and TextBlock. You can change background, foreground, text size of controls and many more.

If you are not able to see ToolBox, you can use Shortcut command to make it visible Ctrl+Alt+X  or fine from View Menu

Steps 3 : Adding Event or Write Code to make UI functional 

Here we bind everything together by using C#.

What we want to make is that whatever you type in the TextBox will be displayed in the TextBlock below (where Hello Anonymous is written) when the user clicks the button.

To do this, we need to give all the controls a name, and create an event that fires when the user clicks on the button.
Click on the control in design-view and check the properties-panel.

Here I've given name as given below, you can give as you want but using naming conventions.
TextBox - txtname
TextBlock - txtshow
Button - btnok

Once this is done, double-click the button. This will autogenerate a click event for the button and take you to the Code Behind for MainPage, the MainPage.cs file.
The fuction you see is the function that will fire when the user clicks on the button.

private void btnok_Click(object sender, RoutedEventArgs e)

Now, write the following line of code in the function:

txtshow.Text = txtname.Text;

The final function will look like this:

private void btnok_Click(object sender, RoutedEventArgs e)
     txtshow.Text = txtname.Text;

This will take the Text that exist in the txtname(where you enter value) control and replace it with the content of the txtshow(where Anonymous is already written) text.

Now, run the app again (either on your local system, or using the simulator). The UX will be presented. Try typing some text in to the textbox and click the button. You will see output as given below.

 Subscribe to Articles


Further Readings:


No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend