App in a snap: Your first Windows 8 app

Here at Microsoft The Netherlands we’ve created Windows 8 App in a snap to allow developers and non-developers to create their first Windows 8 app with relative ease. The goal here is to provide aspiring Windows app developers with a solid base to create their first app and expand its functionality along the way.

The process is split into four simple steps: Preparation, Development, Registration and Publication. The template and tutorial are only available in Dutch, so this post will serve as a shortened tutorial if our strange language isn’t quite familiar to you, but you too want to get your first Windows 8 app in the Windows Store.

To complete the entire process you will need a Windows 8 PC (one you’re allowed to install software on), an internet connection (which you most likely have if you’re reading this), a Credit Card (to register your developer account) and a Microsoft account (formerly known as Live ID).

Preparation

If you don’t have Windows 8 on your PC, don’t fret, as you have a few options to get it, which are outlined on the Windows Dev Center at the top left. If you own a Mac, you can also get started by following one of the four options outlined in the Installing Windows and the dev tools on your Mac article.

The next step is installing Visual Studio Express 2012 for Windows 8, which is available for free on the Windows Dev Center at the top right. If you already have a license for Visual Studio 2012, feel free to use that version instead.

Last, but not least, we need to install the App in a snap template, which can be found here. When you UnZip the downloaded file, you can double-click on the MijnRssAppInaSnap.exe file to start installing the template. There’s a chance Windows SmartScreen will show you a warning dialog informing you that running this app might put your PC at risk. Rest assured, as this is not the case and you can click on More info to display the button to continue.

Windows SmartScreen

Development

Open up Visual Studio (on the Start screen, start typing “VS Express” and it should show up) and click on “New Project…” at the left hand of the screen. Navigate the tree on the left side of the pop-up windows to Visual C# > Windows Store > Mijn rss app in a snap. Name your project at the bottom hand of the pop-up window and click on OK to create the project.

New project dialog

If this the first time you’re using Visual Studio, congratulations, you’ve just created your first Solution! The file that will automatically open is App.xaml, which we will use to customize our app. On the right hand side of the screen you will find the Solution Explorer, which displays all the files that are in the Solution. If you don’t see a screen similar to the one below, you can open Solution Explorer by navigating to VIEW > Solution Explorer at the top menu.

App.xaml and Solution Explorer

You can start the app by clicking on the Start debugging (Start debugging) button at the top of the screen. If you want to close the app again, go back to Visual Studio and click on the Stop debugging (Stop debugging) button next to it.

Customizing the content

If you scroll down in the App.xaml file, which was automatically opened, you will find the following code snippet:

<data:ApplicationData x:Key="AppData" ApplicationName="MijnRssApp21" SupportUri="mailto:email@jouwemail.nl">
    <data:ApplicationData.Feeds>
        <data:FeedData Name="Frankwatching" Url="http://www.frankwatching.com/feed/"/>
        <data:FeedData Name="Nieuws over Microsoft" Url="http://www.nu.nl/feeds/rss/tag/Microsoft.rss" />
        <data:FeedData Name="Ander Tech nieuws" Url="http://www.techzine.nl/rss/feed.xml"/>
    </data:ApplicationData.Feeds>
</data:ApplicationData>

This is where you can customize the content of the app with your own RSS feeds. You can put any number of RSS feeds in here, if you want to remove one, just delete the entire line. We need to change both the Name=”…” part and the Url=”…” part to customize the feed. For example:

<data:FeedData Name="Make Use Of" Url="http://feeds.feedburner.com/Makeuseof"/>

This is also the place where we edit the name of the app and our contact e-mail address, so be sure to customize the “MijnRssApp21″ and “email@jouwemail.nl” values on this line:

<data:ApplicationData x:Key="AppData" ApplicationName="MijnRssApp21" SupportUri="mailto:email@jouwemail.nl">

After you’ve modified the content, view the results with the Start debugging button.

Customizing the colors

To customize the colors of the app, double-click the ApplicationColors.xaml file in the Common folder in Solution Explorer. You will be presented by a page as in the below image:

Application colors

To customize the colors, simply change the Color=”…” value on the line that represents the color you want to change. The x:Key=”…” part should give you an indication of what that color represents, but spend some time exploring the different color options. You can use Hexadecimal color codes or colors like “Red”, “Blue”, “Green”, etc. When you start typing in the Color value, Visual Studio should give you suggestions on what you can use.

Customizing the image assets

The next step is to customize the tile image, splash screen and Store logo’s. We can find all these images in the Assets folder of our Project in Solution Explorer. To easily access these images, right-click on the Assets folder in Solution Explorer and click on Open Folder in File Explorer. This will open up an explorer window with the Assets folder and all images inside:

Open Folder in File Explorer

The images you will need to customize are:

  • Logo.png
  • 150×150 pixels

  • SmallLogo.png
  • 30×30 pixels

  • SplashScreen.png
  • 620×300 pixels

  • StoreLogo.png
  • 50×50 pixels

Be sure to keep the image names the same and not to change the size of the images (the pixel dimensions are listed above).

Customize the app manifest

Double-click the Package.appxmanifest file in Solution Explorer to bring up the editor for the app manifest. This is where the metadata of your app is stored, such as the Tile title, background color of your tile and splash screen, etc. The important values to change here are:

  • Short name
  • This can be found on the Application UI tab under Visual Assets > Tile and represents the name of your app on the Tile on the Start screen

  • Background color
  • Just below the Short name, this value represents the background color of your tile and splash screen in Hexadecimal color code

  • Internet (Client)
  • This capability can be found on the Capabilities tab and needs to be checked in order to specify we wish to use the Internet connection in our app

Privacy Policy

The Internet (Client) capability we’re using brings us to the last part of our customization: the Privacy Policy. According to paragraph 4.1.1 of the Windows 8 app certification requirements: “If your app has the technical ability to transmit data, you must maintain a privacy policy. You must provide access to your privacy policy in the Description page of your app, as well as in the app’s settings as displayed in the Windows Settings charm.“. Luckily, our app also has a privacy policy included and only the actual content will need to be changed. Open up the PrivacyPolicyFlyout.xaml in Solution Explorer. You’ll find this holds a Dutch privacy policy statement, which can be replaced on line 44 of the XAML (clicking on the text in the designer will take you there) by:

<Run Text="While this app uses the internet connection on your machine, no personal information is collected or transmitted from this app."/>

Registration

Regstration of a Windows Store developer account is needed to publish your app to the Windows Store. This process is outlined on the Windows Store Dev Center. The process is pretty straightforward, so I won’t provide a step-by-step, but if you have any questions, be sure to let me know in the comments or on Twitter.

Publication

To publish our app, we have to go through some steps on the Windows Store Dev Center. Luckily, Ramez Debbas has written an excellent blogpost describing the submission process, so head over there and follow the steps to publish your app.

After you’ve submit your app, you’ll have to wait a few days for your app to be certified. You can check the progress of your submission on the Windows Store Dev Center and will automatically receive an e-mail after certification is done with the good news. It’s possible you receive a e-mail stating your app did not pass certification, in which case you can get a detailed failure report on the Windows Store Dev Center to see what needs to be adjusted.

Localization

One more thing you need to keep in mind is that the template was created initially in Dutch and therefore has all labels/text in Dutch. If you want to put only English content in the app, it’s very well possible that your app might not pass certification due to the conflict in language. Take a look at this blog post of mine to see how you can localize your app to use content in a different language and not be blocked by it in certification.

As always, if you have questions, let me know in the comments or contact me on Twitter!