Imagine , browsing internet using an app made by you , or watching a video by a Media Player you’ve made. Sounds adorable, But most of the people think like “Oh, No!! create an app?? How?? Am lack in touch with programming, and how can I make a working application?? “. As an answer , Microsoft has came up with one of the most User-Interface as well as User friendly tool called “MICROSOFT VISUAL STUDIO EXPRESS” with WINDOWS 8. One of the coolest feature of Visual Studio is that it provides a Designer view for the programmer so that he/she can decide what all elements should be placed and where it should be placed. All of the above , More than coding and knowledge in programming, Visual Studio demands Logic and skill in creating something which will treat someone’s eyes and mind.
Let’s Start Development
In order to get a fair idea about Windows 8 Metro App Development. Let’s start with a simple “Hello World” application. Here we will be discussing about an app which reads data(For Example: a person’s name) from and text box and displays it with a message “Hello <name>“.
- start Microsoft Visual studio and click on “New Project“.
- Click on “Visual C#” And select a “Blank App(XAML)” from “Windows Store” template.
- Name it as “HelloWorld” and hit “OK”
Now you will get directed to a working platform. You will see some windows named Toolbox(left side)( Contains all working elements), Solution Explorer(Right Side) (Contains all codes and classes), Property window( Defines the property of all elements used in app) . So go to Solution Explorer and here “Double Click” on MainPage.XAML .It will show a designer window where our work starts. Now we’ve loaded a Blank page template. Starts working on this Blank Page template is not a proper method. So, let’s choose a “Basic Page” for our first application. To Start with a Basic Page
- Right click on MainPage.XAML and select DELETE.
- Now go to PROJECT (top Menu) and Select Add New Item.
- Choose a “Windows Store” C# template “BASIC PAGE” type.
- And name it as “MainPage.XAML“.
(Ps: Remember if you leave the name as “BasicPage1.XAML” ,The project won’t work)
After Clicking OK it will show a confirmation message asking “add missing files“. Just click YES.
- Now double click on “MainPage.XAML” In Solution Explorer, Then it will show a window with the following message “Build the Project to update Design view.”
- Just go to BUILD(top menu) and click “Build Solution” or just press F7 Button.
- Wait for the solution to be build , then click on “MainPage.XAML” it will show a Basic Page View As follows:
So let’s start adding our elements. Here we need two TextBlocks, One TextBox and a Button. The purpose of these elements will be discussing on the way.
- TextBlocks: Used for displaying Texts; for example name, item specification etc.
- As discussed above we need two TextBlocks, One for Label and one for Output message display. So drag and drop two Textblocks from Toolbox(you can decide the height and length manually by dragging it in corner)
- Click on one TextBlock then it will show a property bar on right side. Go there and name the Block as “Label” with Common Text “NAME” and Text Size =20.This block notifies the user to enter a name.
- For the next TextBlock name as “OutputBlock” with Text size=48. Remember we’re using this block to display entered name with “Hello” message. So here leave the Content Text blank. Make Sure that this Block is large enough to display 48px text.
2. TextBox: Used for giving input.
- Drag A “TextBox” from Toolbox and drop it near the “Label” Block
- Name it as “InputBox” with Text Size = 24 And leave the Common Type Blank. As we don’t require any pre-defined contents in it.
3. Button: For implementing Click Events. ie, It passes values from input section to the program.
- Drag a Button and drop it near “TextBox“
- Name it as “Submit” with Content “Submit”. Now the designer will look like this (try to align elements in this manner)
We’ll have to define a “Click_Event” for the “Submit” button. Means, what should we get as output when we click on button while the app is running.
- Double click on “Submit” button on designer panel. Then visual studio will automatically create a Click Event for button which will lead to a “MainPage.xaml.cs” page
- Add the following code in between the parenthesis of “Submit_Click” event
OutputBlock.Text = “Hello ” + InputBox.Text + ” !”;
Means, the text the we’re going to display at output is the text Which we’ve typed and with a Pre-Hello message. Now The MainPage.xaml.cs code will look like
We’ve created our first windows 8 app. To Test our application, click on the “Local Machine” Button (top ; Green triangle) Or Press F5. Now you will see a message on bottom left corner “Build Started . .Deploy Started . .Deploy Succeeded” . This shows our app has debugged successfully. Now it will show a default splash screen with a default logo and our first app is now ready to Test. Enter some random name and test your First “Hello World ” Application.
By default we’ll get a “Dark” Theme. If you want to switch to a new “Light” Theme, add the following code on header of “App.XAML”. Add the following code
- And after changing some style property of “OutputBlock”. ie,
- Click on “OutputBlock” and in the property menu select “BRUSH” property and choose a color for your Output Message. Run the program again. Now your app will look like this.
This is all about creating your first Windows 8 metro app. For more metro app tutorials stay connected with Techomag.
Windows 8 Metro App Tutorial[Hello World]