#Win8Dev Tutorial: Begin with your First “Hello World” Windows Store app


In this 3rd chapter of WinRT tutorial series, we will learn how to develop our first Windows Store application using the C#/XAML template. We will also learn how to build and run it inside a simulator that comes with the Visual Studio 2012 IDE. - Article authored by Kunal Chowdhury on .

logo

Today in this tutorial series, we will learn how to develop our first Windows Store application using the C#/XAML template. We will also learn how to build and run it inside a simulator that comes with the Visual Studio 2012 IDE.

 

Don’t forget to follow the complete tutorial series of Windows Store apps (WinRT) development and share the chapters with your network friends.

 

 

If you didn’t yet setup your development environment with Windows 8 RTM and Visual Studio 2012 RTM, follow the steps mentioned here: “Getting Started with Dev Environment Setup”. To begin with our first Windows Store application, we will chose Visual C# template with XAML. There are different templates available for you to start with and if you want to know more about those, read the last blog post: “Understand Project Templates and Structure”.

 

How to create your first Windows Store application?

Let’s open the Visual Studio 2012 IDE and go to File – New – Project to create a new Windows Store project. From the Visual C# category, we will select the Windows Store template category. In the right panel, chose Blank App (XAML) and give a good name (in our case, it is “HelloWorld”). Now click “OK” to continue. Momentarily the IDE will start creating your first project.

 

Create HelloWorld Windows Store app in Visual Studio 2012

 

Once the project has been created by the IDE, open the MainPage.xaml file and add a TextBlock from the toolbox inside the Grid as shown below:

 

Design the UI of the Application with a TextBlock

 

Select the TextBlock and move to the Properties panel. There you can set the text property of the control. Visual Studio 2012 gives a proper way to bind styles from the local resource. Click the small rectangle near to the Style property, navigate to Local Resource and from the secondary menu, select a style (e.g. HeaderTextStyle) as shown in the below screenshots:

 

Use the properties panel to style the control     Style the TextBlock with Local Resources

 

Styled TextBlock in the designer window

 

Here is the XAML code of what we have designed just now:

 
<Page x:Class="HelloWorld.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock HorizontalAlignment="Left" Height="101" Margin="81,99,0,0" 
                   TextWrapping="Wrap" Text="Hello World" VerticalAlignment="Top" 
                   Width="598" Style="{StaticResource HeaderTextStyle}"/>
    </Grid>
</Page>

 

Now in the design window, you will see similar to the above screen. You can drag other controls too and create your own UI for your first “HelloWorld” Windows Store application. Once your application design is ready, you can build and run that app to see what we developed just now.

 

Building and Running the Windows Store application

It’s time to build the project and run it to see our application running inside Windows 8. You can chose any one of the three options that Visual Studio 2012 provides to test our app. You can chose between the following locations:

      • Simulator – The app will be deployed in a simulator
      • Local Machine – The app will be deployed in your local development machine
      • Remote Machine – The app will be deployed in a remote Windows 8 PC

When you move your mouse to the debug option menu inside your Visual Studio 2012 IDE, you will see all the three options as shown below:

 

Choose the deployment environment

 

You can chose the one where you want to deploy and test your application. In our case, we will deploy it to Simulator to see how it looks inside a tablet. Here is the screenshot of the application hosted in the simulator:

 

Run the application inside Simulator

 

Now you are done with your first Windows Store application using Visual C# (XAML) and now you will be able to develop more applications using that simple project template.

 

End Note

In the next chapter, we will learn more about Windows Store application configuration and then we will proceed towards the other templates and coding tricks. Till then enjoy doing your hands dirty developing Windows Store applications.

 

Stay in touch with me on Twitter, Facebook and Google+. Also subscribe to my blog’s RSS Feed and Email Newsletter to get immediate updates. Don’t forget to follow the Tutorial series and share it to your network friend and help them to learn on this latest application development.

Have a question? Or, a comment? Let's Discuss it below...

Thank you for visiting our website!

We value your engagement and would love to hear your thoughts. Don't forget to leave a comment below to share your feedback, opinions, or questions.

We believe in fostering an interactive and inclusive community, and your comments play a crucial role in creating that environment.