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).
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.
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.
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.
You can start the app by clicking on the (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) 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:firstname.lastname@example.org"> <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
<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@example.com” values on this line:
<data:ApplicationData x:Key="AppData" ApplicationName="MijnRssApp21" SupportUri="mailto:firstname.lastname@example.org">
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:
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:
The images you will need to customize are:
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
- Background color
- Internet (Client)
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
Just below the Short name, this value represents the background color of your tile and splash screen in Hexadecimal color code
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
<Run Text="While this app uses the internet connection on your machine, no personal information is collected or transmitted from this app."/>
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.
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.
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!