Building Your First Windows Store App

Since the launch of Windows 8, Windows Store apps are the new way to build applications for Windows and Windows Phone. C# Corner has over 400 articles on Windows Store apps.

Learn Windows Store App development >>

For the last few months, I've been working on a C# Corner Windows Store app and side by side writing a book and these articles.

In this article, you will learn how to write your first “Hello World!” application for Windows Store. You will need Visual Studio 2013 or Visual Studio 2014 to follow this tutorial. I used Visual Studio 2014.

Let's create a simple “Hello, Windows!” app.

Create a Project in Visual Studio

Open Visual Studio and select the "File" >> "New" >> "Project..." command.

In New Project, you will see Installed Templates in the left side templates listing. In the left side, you have a choice to select a language, either Visual Basic, Visual C# or Visual C++.

I selected "Visual C#" -> "Store App" > "Windows App".

In the centre area, make sure you have .NET Framework 4.5.1 selected in the first drop down list and the Blank App (Windows) is selected as the project type template. This template is used to create a Blank Windows Store app. As you can see from the right most side, a blank project is used to create a single-page Windows app that has no predefined controls or layout. See Figure 1.

Figure 1 Visual Studio Store App Project Templates

Now on the Name text box, type the name of your project. For my project, I named it HelloWindows. The Location text blow lets you browse to the folder where you would like to store your project files. You can even change the solution name if you would like by changing the Solution Name field. This field is important, when you have multiple projects in a single solution. I keep my Solution Name as the default.

Note: As you can see in Figure 1, there are three types of Windows Store Apps, Universal Apps, Windows Apps and Windows Phone Apps. Windows Apps deploy and run on Windows 8 (or later versions) PCs and tablets only. Windows Phone Apps run on Windows Phone devices only. The Universal Apps run on both Windows PCs and Windows Phone devices. Right now, the Universal Apps have limited functionality.

Now click the OK button.

Understanding Project and Files

Once you have clicked on the OK button, you will see the default Visual Studio solution that looks like Figure 2.

Figure 2 Visual Studio 2014 IDE

As you can see from Figure 2, there are 3 major areas of Visual Studio; the Code Editor, Solution Explorer and Properties window. This may look different based on your previous Visual Studio settings.

First I want to focus on the Solution Explorer. Figure 3 is the expanded view of the Solution Explorer.

Figure 3 Solution Explorer

The Solution Explorer is a TreeView like control that lists all projects and project files of a Solution. By default you will see the four nodes, Analyzers, Properties, References, Assets, App.xaml, a TemporaryKey, MainWindow.xaml and Package.appxmanifest.

The Properties node has a file called AssemblyInfo.cs that stores the general information about an assembly. In this case, the current app.

The References folder lists all the references added to a project.

The Assets folder list all the assets available to this app. As you can see from Figure 4, there are four .png files added by default to the project that are used as default logos for the app.

The App.xaml file is application file and stores application related code.

MainWindow.xaml and the class is the representation of the main user interface window of the app.

Package.appxmanifest files define the app package manifest.

Assembly Information

AssemblyInfo.cs file stores all assembly information. If you double-click on the AssemblyInfo.cs in the Solution Explorer, you will see Listing 1. The AssemblyInfo file defines the app attributes such as the title, description, company name, copyright and version. I know many developers ignore this but in today's world, you must specify all the information including your company name, copyright and trademark, if any.

using System.Reflection;
using System.Runtime.CompilerServices;
using System.Runtime.InteropServices;

// General Information about an assembly is controlled through the following
// set of attributes. Change these attribute values to modify the information
// associated with an assembly.
[assembly: AssemblyTitle("HelloWindows")]
[assembly: AssemblyDescription("")]
[assembly: AssemblyConfiguration("")]
[assembly: AssemblyCompany("")]
[assembly: AssemblyProduct("HelloWindows")]
[assembly: AssemblyCopyright("Copyright ©  2014")]
[assembly: AssemblyTrademark("")]
[assembly: AssemblyCulture("")]

// Version information for an assembly consists of the following four values:
//
//      Major Version
//      Minor Version
//      Build Number
//      Revision
//
// You can specify all the values or you can default the Build and Revision Numbers
// by using the '*' as shown below:
// [assembly: AssemblyVersion("1.0.*")]
[assembly: AssemblyVersion("1.0.0.0")]
[assembly: AssemblyFileVersion("1.0.0.0")]
[assembly: ComVisible(false)]

Listing 1

The version is probably the most important part of this file. It allows you to define assembly and file versions that is a combination of Major Version, Minor Version, Build Number and Revision. As you can see from the Listing 1, by setting the value “1.0.*” it will automatically increment the build number every time you rebuild the app.

Application Class

The application definitions and events are declared in the App.xaml and its code-behind App.xaml.cs files. App.xaml file declares application level resources and App.xaml.cs defines the application level events. See Listing 2.

<Application
    x:Class="HelloWindows.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloWindows">

</Application>

Listing 2 App.xaml

Listing 3 shows the App.xaml.cs file.

namespace HelloWindows
{
    /// <summary>
    /// Provides application-specific behavior to supplement the default Application class.
    /// </summary>
    sealed partial class App : Application
    {
        /// <summary>
        /// Initializes the singleton application object.  This is the first line of authored code
        /// executed, and as such is the logical equivalent of main() or WinMain().
        /// </summary>
        public App()
        {
            this.InitializeComponent();
            this.Suspending += OnSuspending;
        }

        /// <summary>
        /// Invoked when the application is launched normally by the end user.  Other entry points
        /// will be used such as when the application is launched to open a specific file.
        /// </summary>
        /// <param name="e">Details about the launch request and process.</param>
        protected override void OnLaunched(LaunchActivatedEventArgs e)
        {

#if DEBUG
            if (System.Diagnostics.Debugger.IsAttached)
            {
                this.DebugSettings.EnableFrameRateCounter = true;
            }
#endif

            Frame rootFrame = Window.Current.Content as Frame;

            // Do not repeat app initialization when the Window already has content,
            // just ensure that the window is active
            if (rootFrame == null)
            {
                // Create a Frame to act as the navigation context and navigate to the first page
                rootFrame = new Frame();
                // Set the default language
                rootFrame.Language = Windows.Globalization.ApplicationLanguages.Languages[0];

                rootFrame.NavigationFailed += OnNavigationFailed;

                if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
                {
                    //TODO: Load state from previously suspended application
                }

                // Place the frame in the current Window
                Window.Current.Content = rootFrame;
            }

            if (rootFrame.Content == null)
            {
                // When the navigation stack isn't restored navigate to the first page,
                // configuring the new page by passing required information as a navigation
                // parameter
                rootFrame.Navigate(typeof(MainPage), e.Arguments);
            }
            // Ensure the current window is active
            Window.Current.Activate();
        }

        /// <summary>
        /// Invoked when Navigation to a certain page fails
        /// </summary>
        /// <param name="sender">The Frame which failed navigation</param>
        /// <param name="e">Details about the navigation failure</param>
        void OnNavigationFailed(object sender, NavigationFailedEventArgs e)
        {
            throw new Exception("Failed to load Page " + e.SourcePageType.FullName);
        }

        /// <summary>
        /// Invoked when application execution is being suspended.  Application state is saved
        /// without knowing whether the application will be terminated or resumed with the contents
        /// of memory still intact.
        /// </summary>
        /// <param name="sender">The source of the suspend request.</param>
        /// <param name="e">Details about the suspend request.</param>
        private void OnSuspending(object sender, SuspendingEventArgs e)
        {
            var deferral = e.SuspendingOperation.GetDeferral();
            //TODO: Save application state and stop any background activity
            deferral.Complete();
        }
    }
}

Listing 3 App.xaml.cs

The code-behind file, App.xaml.cs, has the three methods definitions, OnLaunched, OnNavigationFailed and OnSuspending. The OnLaunched method is invoked when the application is launched. The OnNavigationFailed method is invoked when Navigation to a certain page fails. The OnSuspending method is invoked when application execution is being suspended.

The Main Page

Every Windows Store app consists of one default MainPage.xaml file. This is the default user interface the app users will see when the app is launched. The MainPage.xaml is the main user interface of an app. This is the screen users see then they launch their app.

Double-click on the MainPage.xaml file in Solution Explorer. The page opens in the designer with the XAML view. See Figure 4.

Figure 4 Main Page

As you can see from Figure 4 XAML, the MainPage is derived from the Page class. The XAML also shows there is a Grid element added to the interface automatically that works as a container for the child controls.

Now to add controls to MainPage, simply drag and drop controls from Toolbox. I will drag and drop a Button, a TextBox and a TextBlock control from Toolbox to MainPage. After moving and placing controls around, my MainPage looks like Figure 5.

Figure 5 Page Layout

Now one thing you may have noticed when you were dragging and positioning these controls in MainPage. The designer was writing XAML code for you. After placing control same as Figure 5, the XAML code looks like Listing 4.

<Page
    x:Class="HelloWindows.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloWindows"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Button Content="Button" HorizontalAlignment="Left" Margin="57,172,0,0"
                VerticalAlignment="Top" Height="99" Width="277"/>
        <TextBox HorizontalAlignment="Left" Margin="384,175,0,0" TextWrapping="Wrap"
                 Text="TextBox" VerticalAlignment="Top" Height="91" Width="628"/>
        <TextBlock HorizontalAlignment="Left" Height="208" Margin="60,313,0,0"
                   TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"
                   Width="952"/>

    </Grid>
</Page>

Listing 4 MainPage.xaml

As you can see from Listing 4, there is one XAML element for each Button, TextBox and TextBlock controls. Each element also has Width, Height, Margin, VerticalAlignment and HorizontalAlignment properties set for these controls.

Setting Controls Properties

The next step is to set control properties. There are two ways to set the control properties. The first and the easiest option is the use the Properties window and the second, you can write XAML code by hand. For the sake of simplicity, we will use the designer for now.

To open the Properties window, select a control and click on the Properties tab in Solution Explorer. For example, select the Button control and then click on the Properties tab, the Properties window for the Button control looks like Figure 6.

Figure 6 Properties Window

Figure 6 shows the Properties window that lists all the properties of a control. You can simply set these properties by selecting the property and its value.

I select the Button control and change its Name to “HelloButton”, Brush background to Red and Content property to “Click Me!” as you can see from Figure 7. I also change the font size to 36.

Figure 7 Setting Control Properties

If you look at the XAML code, the new XAML of Button looks like Listing 5 that shows the values of x:Name, Content, Background, FontSize and FontFamily.

<Button x:Name="HelloButton" Content="Click Me!" HorizontalAlignment="Left"
                Margin="57,172,0,0" VerticalAlignment="Top" Height="99" Width="277"                  Background="#FFD52626" FontSize="36" FontFamily="Global User Interface"/>

Listing 5

I also set the x:Name, FontName, FontSize and other properties of the TextBox and the TextBlock control. You can proceed and change your control the way you like. The final XAML of the controls look like Listing 6.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Button x:Name="HelloButton" Content="Click Me!" HorizontalAlignment="Left"
                Margin="57,172,0,0" VerticalAlignment="Top" Height="99" Width="277"
                Background="#FFD52626" FontSize="36" FontFamily="Global User Interface" Click="HelloButton_Click"/>
        <TextBox x:Name="HelloTextBox" HorizontalAlignment="Left" Margin="384,175,0,0" TextWrapping="Wrap"
                 Text="TextBox" VerticalAlignment="Top" Height="91" Width="628" FontSize="24"/>
        <TextBlock x:Name="HelloTextBlock" HorizontalAlignment="Left" Height="208" Margin="60,313,0,0"
                   TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"
                   Width="952" FontSize="48" Foreground="#FFE3C855"/>

Listing 6

Adding Event Handler

To see all control events and add event handlers, click on the Lightening icon on the Properties window. It will open the events. See Figure 8.

Figure 8

To add an event handler, simply double-click on the event TextBox. I double-click on the HelloBotton's Click event's TextBox. It adds the following code to the code-behind file. See Listing 7.

private void HelloButton_Click(object sender, RoutedEventArgs e)
{}

Listing 7

The Button control XAML is also updated and the Click attribute is added to it. See Listing 8.

x:Name="HelloButton" Content="Click Me!" HorizontalAlignment="Left"
                Margin="57,172,0,0" VerticalAlignment="Top" Height="99" Width="277"                 Background="#FFD52626" FontSize="36" FontFamily="Global User Interface" Click="HelloButton_Click"/>

Listing 8

Add “Hello, Windows!”

Now, what our application will do is, simply click on the Button control will display the content of TextBox control into the TextBlock control.

The Button click event handler code looks like Listing 9 where we set the Text property of the TextBlock to the Text property value of the TextBox control.

private void HelloButton_Click(object sender, RoutedEventArgs e)
{
   HelloTextBlock.Text = HelloTextBox.Text;
}

Listing 9

Build and Run

Now let's build and run our application by pressing F5. Your app is deployed and runs. Now type some text in the TextBox and click the Button. You will see the output is displayed in the TextBlock area. See Figure 9.

Figure 9

When you build the app, Visual Studio deploys your app to the Windows Store apps. You will see the HelloWindows app installed. See Figure 10.

Figure 10.

Click or touch on app will launch the app.

Now type some text in the text box and click the “Click Me!” button and see the output.

Summary

Windows Store Apps are the new way to build Windows applications. In this tutorial, we learned how to build our first Windows Store app using Visual Studio 2014.