Random geekery since 2005.

Husband, father, programmer, speaker, writer, blogger, podcaster, collector, traveler, golfer.

31 Days of Windows 8 | Day #1: The Blank App

Written in


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.



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.



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.



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.



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.



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.


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.


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.


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.


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.


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.


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.


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.


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.


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!



13 responses to “31 Days of Windows 8 | Day #1: The Blank App”

  1. […] on November 1, 2012 by Dan Rigby | Leave a reply Windows Store App Development31 Days of Windows 8 | Day #1: The Blank App (Jeff Blankenburg)“In the first article of this series, Clark and I thought it was important […]

  2. […] 31 Days of Windows 8 | Day #1: The Blank App – & Day #2: Orientation & Snap – Jeff Blankenburg kicks off another series of daily posts over November, exploring Windows 8 development using HTML5/JavaScript and XAML with C#. The first part introduces the blank project template, and part two explores the important concets of orientation and snap required by the Windows Store. […]

  3. […] Read original post by Jeff Blankenburg at Blankenblog […]

  4. Sam Avatar

    Gents – Great start to the series .. looking forward to the rest.

    Curious though, as to why you suggest starting with the Blank template always? Is it not easier to start with the Grid template, and immediately knock out the things you don’t need? That way, you get the LayoutAwarePage & SuspensionManager dropped in Common folder by default .. Thoughts?


    1. jeffblankenburg Avatar

      I personally find it easier to add the things I need rather than hunting to find the things I don’t. Just a personal preference.

  5. […] together (and replaced the default image set…you did that right?  Don’t you remember Day #1?  You can still download that set of images here.)  Now we’re going to add Search to […]

  6. Rick Avatar

    Good starting place. You mentioned that you use the wide logo in your projects. When does this get used? When I have the Logo pinned to my start screen, I can’t make it wide.

    1. jeffblankenburg Avatar

      If you provide a WideLogo, you will be able to make your tile wider. It’s required for that functionality.

  7. […] 31 Días de Windows 8 | Día 1: La aplicación en blanco by Amin Espinoza on Nov 15, 2012 • 1:07 pm No Comments Este artículo es una traducción de “Día 1: La aplicación en blanco” de Jeff Blankenburg. Pue… […]

  8. […] Версия на английском языке доступна здесь. […]

  9. Amit Avatar

    Awesome. I was looking for something like this. Is it ok to follow your style and create similar content in my native language? It won’t be copy-paste of course.

  10. bryce Avatar

    How do you replace the logos?

  11. bryce Avatar

    How do I download the code files? WHen I try to download them it just downloads a link to their github page. Sorry I am new to Github.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a website or blog at WordPress.com

%d bloggers like this: