This article is Day #1 in a series called 31 Days of Windows 8. Each of the articles in this series will be published for both HTML5/JS and XAML/C#. You can find additional resources, downloads, and source code on our website.
In the first article of this series, Clark and I thought it was important to cover the inner workings of a Windows Store Blank App template in Visual Studio 2012. We will cover each of the files, why they are important, as well as many of the settings that may be hidden in each one. This should give you a solid foundation for the rest of the series, where we will be using each of these files heavily.
There are also several other project templates in Visual Studio 2012, but we’re of the opinion that those are excellent reference templates rather than starting points for a real application. They were built with a specific type of application in mind, and it’s generally unlikely that your idea fits that architecture perfectly. We almost always recommend starting with the Blank App template when you’re building a real app.
Here is a view of the Solution Explorer for a brand new Blank App template in a XAML solution.
The Images
Let’s start with the easy ones, the images in the Assets folder. There are four images inside every new project, and they each serve a specific purpose. We have created different versions of these images (as well as one additional), so that it’s very obvious which image is which when you run your application. We highly recommend downloading these images and replacing the default ones. You can download all five of them here. Once you have replaced the default images, run your project to see these images in each of their locations, as described below.
Logo.png
This is probably the most common image your application will use. This is the default background image for your application’s tile on the user’s Start screen. It is 150 x 150 pixels in size.
SmallLogo.png
This image is used when an application list is shown. For example, when you search for an application in Windows 8, or in the Share menu. The SmallLogo.png is 30 x 30 pixels. At such a small size, you want to make sure this icon really represents something familiar to your user. I highly recommend just a logo or some other obvious imagery.
SplashScreen.png
This is the initial image that loads when your application is started. There are some neat tricks you can do with this, and we will cover those later in this series. For now, remember that this image will ALWAYS be 620 x 300 pixels, and will be vertically and horizontally centered on your user’s screen, regardless of size.
StoreLogo.png
To save space in the store, we have a smaller icon that is used. This image is 50 x 50 pixels, but might be the most important 2500 pixels in your entire application. This is the icon that users will see when they are deciding which new apps to add to their device. A poor icon indicates a poor application to most users. Spend some time on this one.
WideLogo.png
This is an additional icon that I include in my initial projects. You will need to add it to your project by right-clicking on the Assets folder and choosing “Add Existing Item…” This image is 310 x 150 pixels, and is used to allow your application to have a wider tile than the standard size of Logo.png.
Assemblyinfo.cs
This file contains all of the, wait for it, assembly information for your app. Things like version numbers, titles, descriptions, etc. But remember…these are the values for your assembly. All of the official names, etc. that are publicly used for your app are stored in the app manifest, our next file.
Package.appmanifest
This file contains all of the configuration, settings, and declarations for your application. It is where you will go for almost every single thing that is related to your app running on a Windows 8 machine. For example, this is where you define that the search contract is enabled, or which icons to use in each situation. It also defines default background colors, orientations, and specific capabilities your app will require, like access to Location.
Make sure you are intimately familiar with this file. You’re going to need it.
StandardStyles.xaml
This 1,830 line behemoth is nothing more than a giant pile of default XAML styles for you to use. Styles for text boxes, radio buttons, application bar icons, and more. I highly recommend becoming familiar with these styles, but it’s also important to remember that any of the styles can be changed to fit your needs. Don’t want a white border on all of your buttons? Remove it!
You may also consider adding your own styles to this file, just remember that these styles will be available to every page of your application thanks to our next file: App.xaml.
App.xaml
This file is where it all starts. It’s the first file to load when your application is started, and it contains all of the app-level resources and settings for your app. By default, this file only really contains one valuable line of markup:
<ResourceDictionary Source="Common/StandardStyles.xaml"/>
This loads our StandardStyles.xaml file as a ResourceDictionary, making those styles available to every page of our application. The real magic of App.xaml is buried in its code-behind file: App.xaml.cs. Let’s take a look at that one next.
App.xaml.cs
This file, just like it did in Windows Phone, is where the action begins. This is where all of your app’s startup methods reside, like OnLaunched(), OnSuspending() and more. This is also the place where your application’s startup page is referenced. You’ll see a few lines in the OnLaunched() method that look like this:
if (!rootFrame.Navigate(typeof(MainPage), args.Arguments))
{
throw new Exception("Failed to create initial page");
}
The “MainPage” parameter refers to our next file, MainPage.xaml.
MainPage.xaml
This file is the default “home page” of your application. It’s the first one the user will see after the splash screen is done loading. In your project, it basically contains nothing except a base Grid control with a style applied. You’re going to want to add more to this page almost immediately, and there’s some great controls to use. We recommend looking at the GridView or FlipView controls for starters, but use whatever makes sense for your app.
MainPage.xaml.cs
Again, like MainPage.xaml, this file is practically empty. We have a constructor method for the page, as well as an OnNavigatedTo() event handler method. In Windows Phone, this was always available to use (and highly recommended), but now it’s there by default, meaning that many more developers will start using it instead of the page’s constructor method.
Day1-TheBlankApp_TemporaryKey.pfx
Every Windows Store app is signed by a certificate. When you first create a new project in Visual Studio it will create a new test certificate automatically. In our case this test certificate is called Day1-TheBlankApp_TemporaryKey.pfx where Day1-TheBlankApp is our project name. Again you can find this set in the package.appxmanifest file under the Packaging tab. You can even create new certificates there, if needed.
Once your ready to submit to the store you will need to associate your application with the Microsoft Store and your Developer Account. You can do this by going to Projects, Store, Associate App with the Store…
You can find more information about signing an app package here.
Summary
So that’s it! We’re only just getting started in this series, but you’ve now gotten a solid understanding of each of the files found in a default Blank App template for XAML. In case you haven’t yet installed Visual Studio 2012, but still want to take a look at the code files for this project type, you can download them here:
Tomorrow, we are going to focus on orientation and snapping, two important aspects of your application that often go overlooked. If you haven’t already, download the free tools to build apps for Windows 8 from the link below. See you tomorrow!
JEFF BLANKENBURG 
Leave a Reply