Get Started Building Windows Store XAML/C# Apps

Microsoft's support of both XAML/C# and HTML/JavaScript in Windows 8 makes application development for the Windows 8 platform accessible to a wide range of developers. Regardless of whether your expertise is in desktop or web application development, if you've already worked with XAML technologies (Windows Presentation Foundation or Silverlight), you have a head start on learning the ropes of developing applications for Windows 8—aka Windows Store apps. In this article, I'll cover the basics of building a Windows Store app, with a focus on using XAML/C#.

Windows Store XAML/C# Project Types

Microsoft supports two basic technology approaches to Windows Store app development: XAML/C# and HTML/JavaScript, as Figure 1 shows. As mentioned, here we'll use the XAML/C# approach—thus, you should have some knowledge of XAML and C# to follow along with the discussion.

Figure 1: Windows 8 Technology Stack

Let's get started by looking at the Windows Store project types available in Visual Studio 2012. When you open Visual Studio 2012, you'll see a Windows Store entry under Templates, Visual C#. The Windows Store project templates include six different project types, as shown in Figure 2.

Figure 2: Windows Store Project Templates in Visual Studio 2012

The Blank App project template provides initial starter code and a single page. The Grid App and Split App templates provide quite a bit more code as well as multiple pages for your application. You can use any of the other available projects to create a class library project that runs in Windows Store apps, a Windows Runtime (WinRT) component such as a custom control, and a unit test library project, respectively.

If you're building an application that displays data in tiles, then either the Grid App or Split App project template is a good place to start. Figure 3 and Figure 4 show, respectively, an example of the initial screen generated by the Grid App and Split App project.

Figure 3: The Initial Screen Generated When Running the Grid App Project

In a Grid App, the user clicks a tile to view details about the tile's data. In a Split View app, groups (categories) are displayed; by clicking a group, the user can see a list of all the different items and then drill down into the list, as shown in Figure 5.

Figure 5: Drilling Down into a Split App Screen

For the remainder of this article, I'll focus on functionality provided by the Blank App project. This project template provides a simple way to get started learning the fundamentals of building Windows Store apps.

Blank App Project Walk-Through

Here I will discuss the features that the Blank App project provides out of the box. Once you have the basics down, you can move on to the other project types if you need the functionality they provide.

Figure 6: The Project Structure Created by the Blank App Project

The Blank App project template does exactly what its name implies: It provides you an empty project with a few starter files added to help get you going. This is a good option if you'll be building an app that doesn't fit into the grid layout view that you see a lot of Windows Store apps following (such as on the Windows 8 Start screen). For one XAML/C# Windows Store app I wrote, I ended up starting with the Blank App project template because the app was not displaying data or image tiles (something the Grid App project does well) or drilling down into lists of data (functionality that the Split App project provides).

The Blank App project provides images for the tiles and splash screen (you'll definitely want to change these), a StandardStyles.xaml resource dictionary that includes many helpful styles such as buttons for the AppBar (a special type of menu in Windows Store apps), an App.xaml file, and the app's main page—MainPage.xaml. The Blank App project also adds a Package.appxmanifest that's used to define functionality that your app requires, app information used in the store, and other information. Figure 6 shows the files created by the Blank App project.

The App.xaml, App.xaml.cs, and StandardStyles.xaml Files

The App.xaml file handles the loading of a resource dictionary named StandardStyles.xaml, shown in Listing 1, which has several key styles used throughout the application. StandardStyles.xaml has style definitions for different text styles and AppBar buttons.

If you scroll down toward the middle of the file, you'll see that numerous AppBar button styles are included, such as one for an edit icon, as shown in Listing 2.

Figure 7: An Example of Using a Style to Create an AppBar Button

Figure 7 shows an example of an edit button. Button styles like this let you quickly and easily add professional-looking icons and buttons into your application without requiring you to be a design expert.

The App.xaml.cs file includes some code to help get you started quickly. An OnLaunched() method handles creation of a frame that child pages such as MainPage.xaml can be loaded into. The frame has the same overall purpose as the one found in Windows Presentation Foundation (WPF) and Silverlight applications: It's used to navigate between pages in an application. Listing 3 shows how a frame is created and used in App.xaml.cs.

/// /// Invoked when the application is launched normally by the end user. Other entry points/// will be used when the application is launched to open a specific file, to display/// search results, and so forth./// /// Details about the launch request and process.protected override void OnLaunched(LaunchActivatedEventArgs args){    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 first page    rootFrame = new Frame();    if (args.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    if (!rootFrame.Navigate(typeof(MainPage), args.Arguments))    {        throw new Exception("Failed to create initial page");    }    }    // Ensure the current window is active    Window.Current.Activate();}

Notice that in addition to creating a frame, the code in Listing 3 also checks to see whether the app was previously terminated, so that you can load any state/data that the user might need when the app is launched again. Another method in App.xaml.cs named OnSuspending() can be used to store state as the user switches to another application, as shown in Listing 4.

/// /// 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./// /// The source of the suspend request./// Details about the suspend request.private void OnSuspending(object sender, SuspendingEventArgs e){    var deferral = e.SuspendingOperation.GetDeferral();    //TODO: Save application state and stop any background activity    deferral.Complete();}

To briefly review the lifecycle of a Windows 8 app, when a user switches from the currently running application to another app, the former app will be suspended in memory. The app may stay suspended or may be terminated, depending on how much memory the OS thinks it needs. (For a recap of the lifecycle of Windows Store apps, refer to Figure 8, which shows how an app can be running, suspended, or terminated.) Thus, it is important to save state in the application in case it is ultimately terminated and has to be started fresh. Although I won't cover saving application state here, you can find additional information on this topic in the Windows Dev Center - Windows Store apps section.

Figure 8: The Windows Store App Lifecycle

The MainPage.xaml and MainPage.xaml.cs Files

The Blank App project adds a file named MainPage.xaml that acts as the initial screen for the application. This file doesn't include anything aside from an empty XAML element in it. The code-behind class named MainPage.xaml.cs includes a constructor as well as a method named OnNavigatedTo() that is called once the page is displayed in the frame.

If you're experienced with XAML, you can switch to Design mode and start dragging and dropping XAML controls from the Visual Studio Toolbox. If you prefer to type XAML, you can do that as well. Many of the controls available in WPF and Silverlight are included, such as Canvas, Grid, StackPanel, and Border. Standard input controls are also included, such as TextBox, CheckBox, PasswordBox, RadioButton, ComboBox, ListBox, and others. MediaElement is available for rendering video or playing audio files. Figure 9 shows some of the commonly used XAML controls that are included out of the box for Windows Store apps.

Figure 9: Common XAML Controls Available in Windows Store Applications

Although XAML/C# Windows Store apps don't include all the functionality available in Silverlight 5, the core functionality required to build Windows Store apps is there, with additional functionality available in open source projects such as Callisto (started by Microsoft's Tim Heuer), Q42.WinRT, and others. You can use standard XAML data binding to bind C# objects to controls, use converters to manipulate data during the data-binding process, and apply custom styles and templates to controls to customize them. Although Visual Studio 2012 doesn't support visually creating styles or templates, Expression Blend 5 handles that task very well.

To get started building the initial screen of a Windows Store app, you can start adding controls, as mentioned earlier. Simply place them inside of the element that's included. You can arrange controls in a stacked manner using the StackPanel control, add a border around controls using the Border control, arrange controls in columns and rows using the Grid control, or absolutely position controls using the Canvas control. The sky's the limit here!

One of the controls that might be new to you is the AppBar. It can be used to add menu or toolbar functionality into a Windows Store app and keep the app clean and focused. You can place an AppBar at the top or bottom of the screen. A user on a touch device can swipe up to display the bottom AppBar or right-click when using a mouse. Listing 5 shows some sample code that defines an AppBar containing an Edit button. The EditAppBarButtonStyle is available in the StandardStyles.xaml file that I discussed earlier.

As with standard XAML controls, the control in the AppBar can be wired to an event handler method in the MainPage.Xaml.cs file or even bound to a ViewModel object using "commanding" if your app follows the Model-View-ViewModel (MVVM) pattern. (Check out the MVVM Light package if you're using MVVM with Windows Store apps). You can use the AppBar to navigate to different screens, show and hide controls, display dialogs, show settings screens, and more.

The Package.appxmanifest File

The Package.appxmanifest file contains configuration details about your Windows Store app. By double-clicking this file in Visual Studio Solution Explorer, you can open the settings screens where you modify the Package.appxmanifest settings, as shown in Figure 10.

Figure 10: Modifying Package.appxmanifest Settings in Visual Studio

Here you can define the splash screen image, small and wide logo images used for tiles on the Start screen, orientation information, and more. You can also define what capabilities the app has—for example, whether the app uses the Internet, supports geolocation functionality, or requires a microphone or webcam. App declarations such as background processes, file picker functionality, and sharing can also be defined. Finally, you can define information about how the app is packaged for deployment to the Windows Store.

Use Your Existing XAML Skills

If you already have some experience working with XAML technologies, you'll find that getting started building Windows 8 applications is pretty straightforward. If you need further guidance, you'll find it among the many available resources for Windows 8 and Windows Store application development—including the articles, podcasts, and other information found on Dev Pro's Windows 8 Development page.