For Windows Phone development tutorials: SubramanyamRaju Windows Phone Blog

Wednesday 26 February 2014

Hello World Windows Store app c#

 In order to complete Windows 8 metro style app, our machine need following things:
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.

Logo

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.

SmallLogo

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.

SplashScreen

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

StoreLogo

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

Assemblyinfo.cs

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.

Package.appmanifest

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.

App.xaml

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.
  1. <Application.Resources>
  2. <ResourceDictionary>
  3. <ResourceDictionary.MergedDictionaries>
  4. <!--
  5. Styles that define common aspects of the platform look and feel
  6. Required by Visual Studio project and item templates
  7. -->
  8. <ResourceDictionary Source="Common/StandardStyles.xaml"/>
  9. </ResourceDictionary.MergedDictionaries>
  10. </ResourceDictionary>
  11. </Application.Resources>

App.xaml.cs

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.

MainPage.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.

MainPage.xaml.cs

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

HelloWindowsApp_TemporaryKey.pfx

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:
  1. <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
  2. <StackPanel Margin="151,99,0,0">
  3. <TextBlock Text="Welcome to Windows Apps Tutorial" Style="{StaticResource BasicTextStyle}" FontSize="36"/>
  4. <StackPanel Orientation="Horizontal" Margin="0,20,0,20">
  5. <TextBox x:Name="nameInput" Width="421" HorizontalAlignment="Left" Height="46" FontSize="24"/>
  6. <Button Content="Say "Hello"" Click="Button_Click" FontSize="24"/>
  7. </StackPanel>
  8. <TextBlock x:Name="greetingOutput" Style="{StaticResource BasicTextStyle}" FontSize="24" Foreground="#DEEA510A"/>
  9. </StackPanel>
  10. </Grid>

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:
  1. private void Button_Click(object sender, RoutedEventArgs e)
  2. {
  3. greetingOutput.Text = "Hello, " + nameInput.Text + "!";
  4. }

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:

1 comment:

  1. Hi sir, I am not able to view the image in this page..

    ReplyDelete