XBoxReveal HTML5 Windows Phone Sample: Store Certification

In this final article of the XBoxReveal HTML5 Windows Phone sample, I’ll be going through some of the things you need to do as a developer to get ready for Windows Store Certification.

If you have not read the previous articles, here is a list for some background

Getting Ready for Store

The first thing you want to do to get ready for Windows Phone Store certification is read the App Certification Requirements for Windows Phone article on MSDN. Lucky for the people who don’t like going through the entire document (like me 🙂 the Windows Phone SDK comes with a Store Test Kit to help go through the cert process.

The test kit allows you to

Validate your store tile and application screenshots
Run some automated tests to validate your XAP, icons, screenshots
Lists some manual testing that should be completed by the developer

The good thing about this tool is the test team does the same thing when testing your app, so you definitely want to go through this.

About Screen

Section 5.6 of the App Certification Requirements for Windows Phone states the following

An app must include the app name, version information, and technical support contact information that are easily discoverable.

The Nokia Developer site has a great sample available called Advanced About Page for Windows Phone apps which has a great About page that you can leverage. I removed some of the MVVM code because I thought it was a bit much for this app and wanted to keep simple.

Add a page called About.xaml and change the content to this

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel Grid.Row="0" Margin="12,17,0,28">
        <TextBlock Text="#xboxreval" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock Text="About" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>

    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <StackPanel Margin="0,-12,0,24">
            <TextBlock Style="{StaticResource PhoneTextExtraLargeStyle}" 
                        Text="#XBoxReveal"
                        Foreground="{StaticResource PhoneAccentBrush}" />
            <TextBlock Style="{StaticResource PhoneTextLargeStyle}"> 
                by RedBit Development
            </TextBlock>

            <StackPanel Orientation="Horizontal" Margin="0,18,0,0">
                <TextBlock FontWeight="Bold" 
                            FontSize="{StaticResource PhoneFontSizeMedium}" 
                            Style="{StaticResource PhoneTextNormalStyle}" Text="Version: 1.0.0.0" />
            </StackPanel>

            <TextBlock Style="{StaticResource PhoneTextNormalStyle}"
                        FontSize="{StaticResource PhoneFontSizeMedium}" 
                        Margin="12,12,0,0" FontWeight="Bold"
                        Text="Copyright (c) 2013 RedBit Development" />

            <TextBlock Style="{StaticResource PhoneTextNormalStyle}" 
                        Margin="12,24,0,0"  FontSize="{StaticResource PhoneFontSizeSmall}"
                        TextWrapping="Wrap">
            This application is for XBox enthusiasts around the world waiting for the reveal of the new XBox. NOTE: This application has no affiliation with Microsoft.
            </TextBlock>

            <TextBlock Style="{StaticResource PhoneTextNormalStyle}" 
                        Margin="12,24,0,12" FontWeight="Bold"
                        Text="More informations:" 
                        FontSize="{StaticResource PhoneFontSizeMedium}" />

            <HyperlinkButton NavigateUri="http://www.redbitdev.com/" 
                                Foreground="{StaticResource PhoneAccentBrush}"
                                TargetName="_new" 
                                HorizontalAlignment="Left" 
                                Content="Website" />

            <HyperlinkButton NavigateUri="http://www.redbitdev.com/about/contact-us/"
                                Foreground="{StaticResource PhoneAccentBrush}"
                                TargetName="_new" 
                                HorizontalAlignment="Left" 
                                Content="Support" />

            <HyperlinkButton NavigateUri="http://appsnowmobile.com/appprivacypolicy/"
                                Foreground="{StaticResource PhoneAccentBrush}"
                                TargetName="_new" 
                                HorizontalAlignment="Left" 
                                Content="Privacy Policy" />

        </StackPanel>
    </Grid>

</Grid>

After the modifications, this is what we end up with.

To show the about page, open Main.xaml.cs find ApplicationBarMenuItem_Click() and add the following

NavigationService.Navigate(new Uri("/about.xaml", UriKind.Relative));

Now when you run the app and click the about menu icon, you should get the new about page.

Images

There are a whole set of images that are required for your app such as icons, splash screens and screen shots. For more background read App Submission Requirements for Windows Phone.

Tiles

You definitely want to read Tiles for Windows Phone as it gives you all the details on the different tile types supported. For certification requirments, read section 4.7 – Required App Images

For the purpose of our app we have created the following files

FlipCycleTileMedium.png
FlipCycleTileSmall.png
storeTile.png
ApplicationIcon.png

Using this graphic

Splash Screen

Since Windows Phone supports multiple resolutions, there are different sizes you can provide for your splash screen which are

SplashScreenImage.Screen-WVGA.jpg
SplashScreenImage.Screen-WXGA.jpg
SplashScreenImage.Screen-720p.jpg

For the purposes of our app, we created one splash screen called SplashScreenImage.jpg at a resolution of 768×1280 and added it to the project

Screen Shots

Section 4.6 – App Screen shots of the App Submission Requirements for Windows Phone states the different screenshots that are required for app submission. Key thing to remember here is if you are supporting multiple resolutions, you will need to provide WVGA, WXGA and 720p images with your submission.

Real #xboxreveal App Certification

As expected, the app we submitted for certification has failed because of section 3.1 Licensed Content, Name, Logo & Trademarks since we used the XBox Logo in the page.

What I didn’t expect is to fail because of section 2 Prohibited Applications requirement

Your app and metadata must have distinct, substantial and legitimate content and purpose. Your app must provide functionality other than launching a webpage and must not be unreasonably priced in relation to the functionality of the app.

The tester put the following reason

The application has limited or no functionality. The application is a countdown to the release of XBox Reveal.
The application’s only interactive feature is a link to an “About” screen.

Source Code

Since this app will not make it into the store, you can download the entire source code from GitHub at https://github.com/marteaga/xboxreveal.

Hope you enjoyed this mini-tutorial on building a small Windows Phone 8 HTML5/CSS/JavaScript app.