In our earlier tutorial we have seen what are the different languages and templates that are available with Windows Store App development in Visual Studio 2012 IDE. Now we are going to see on how to develop your first Windows Store Application in XAML (Extensible Application Mark Up Language)  and Visual C# as the code base with a Blank Application template. Before stepping into this tutorial have a quick look at the previous tutorial to get a fair idea on different templates and languages Learn Windows Store App Development in 31 Days – Part 2 – Selecting a right Template and Language for your Windows Store App            [more]

How to start developing your First Windows Store Application?

Open Visual Studio 2012 and create a New Windows Store project with Visual C# template and provide a valid Application Name as shown in the screen below.

If this is the first project we are creating in Visual Studio 2012 IDE, then we will be popped up with a Registration for getting a developer license, just click on OK and it will proceed creating the License automatically as shown in the screen below.

Once the registration is done and the IDE gets the developer license after successful login we can see the message as shown in the screen below.

We can see the project is created now with the default files in the project solution as shown in the screen below. The default file and usage of the files are

• 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.png and smalllogo.png)to display in the start screen.
• An image (storelogo.png) to represent your app in the Windows Store.
• A splash screen (splashscreen.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.

Now delete the MainPage.XAML file from the solution explorer and add a new Page by clicking on the project and selecting Add New Item and select the Basic Page as shown in the screen below.

We can see a few default files will be added which are the supportive files to build and execute the application. We can see the Main Page added (basically a baisc page template) and we can see the page review as shown in the screen below.

Let us modify the XAML code by changing the Title, some textbox and labels which are used to get the input and display some user result to the end user who are going to use this application as shown in the screen below. After changes the XAML code looks like below.

XAML:

<common:LayoutAwarePage
    x:Name=”pageRoot”
    x:Class=”Win8SeriesPart2.MainPage”
    DataContext=”{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}”
    IsTabStop=”false”
    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
    xmlns:local=”using:Win8SeriesPart2″
    xmlns:common=”using:Win8SeriesPart2.Common”
    xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″
    xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″
    mc:Ignorable=”d”>

    <Page.Resources>

        <!– TODO: Delete this line if the key AppName is declared in App.xaml –>
        <x:String x:Key=”AppName”>F5debug Win 8 App</x:String>
    </Page.Resources>

    <!–
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    –>
    <Grid Style=”{StaticResource LayoutRootStyle}”>
        <Grid.RowDefinitions>
            <RowDefinition Height=”140″/>
            <RowDefinition Height=”*”/>
        </Grid.RowDefinitions>

        <!– Back button and page title –>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width=”Auto”/>
                <ColumnDefinition Width=”*”/>
            </Grid.ColumnDefinitions>
            <Button x:Name=”backButton” Click=”GoBack” IsEnabled=”{Binding Frame.CanGoBack, ElementName=pageRoot}” Style=”{StaticResource BackButtonStyle}”/>
            <TextBlock x:Name=”pageTitle” Grid.Column=”1″ Text=”{StaticResource AppName}” Style=”{StaticResource PageHeaderTextStyle}”/>
        </Grid>

        <VisualStateManager.VisualStateGroups>

            <!– Visual states reflect the application’s view state –>
            <VisualStateGroup x:Name=”ApplicationViewStates”>
                <VisualState x:Name=”FullScreenLandscape”/>
                <VisualState x:Name=”Filled”/>

                <!– The entire page respects the narrower 100-pixel margin convention for portrait –>
                <VisualState x:Name=”FullScreenPortrait”>
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName=”backButton” Storyboard.TargetProperty=”Style”>
                            <DiscreteObjectKeyFrame KeyTime=”0″ Value=”{StaticResource PortraitBackButtonStyle}”/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!– The back button and title have different styles when snapped –>
                <VisualState x:Name=”Snapped”>
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName=”backButton” Storyboard.TargetProperty=”Style”>
                            <DiscreteObjectKeyFrame KeyTime=”0″ Value=”{StaticResource SnappedBackButtonStyle}”/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName=”pageTitle” Storyboard.TargetProperty=”Style”>
                            <DiscreteObjectKeyFrame KeyTime=”0″ Value=”{StaticResource SnappedPageHeaderTextStyle}”/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <StackPanel Grid.Row=”1″ Margin=”120,49,0,-19″>
            <TextBlock Text=”Enter Your Email to Register”/>
            <StackPanel Orientation=”Horizontal” Margin=”0,20,0,20″>
                <TextBox x:Name=”nameInput” Width=”300″ HorizontalAlignment=”Left”/>
                <Button Content=”Register”/>
            </StackPanel>
            <TextBlock x:Name=”txtresult”/>
        </StackPanel>
    </Grid>
</common:LayoutAwarePage>

Let us proceed to the next step to add the event handler that should be triggered on the Register button click event, to do so just double click on the button or go to the properties windows and select the event handler (Button Click Event). We can see the event assigned as shown in the screen below.

Write our output code to the button event, which basically gets the user entered mail address and gives the success result as shown in the screen below.

Code:

private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            txtOutput.Text = nameInput.Text + ” Successfully Registered!!!”;
        }

Let us run the application now by pressing the Run button at the top ribbon menu, where we need to select where we want to run the application. Run it on Local machine or remote machine or to the emulator. Let us run it locally and test it as shown in the screen below.

We can see the application loaded to the Metro Screen and the application will be opened as shown in the screen below.

So we are done with our first Metro Application and got the expected output as well. Now let us check how it appears in the Metro list by going to the Metro UI of the Windows 8 platform and we can see the application is listed as metro block as shown in the screen below.

Alternatively we can check with the simulator which is installed by default with the SDK, by selecting the Simulator option before executing the application as shown in the screen below.

We can now see the application is loaded in the simulator which basically triggers the local development environment with the application loaded as shown in the screen below.

Hope this tutorial will be useful to you, If interested please don’t forget to connect with me on Twitter, Facebook and GooglePlus for updates. Also subscribe to F5debug Newsletter to get all the updates delivered directly to your inbox. We won’t spam or share your email address as we respect your privacy.