OakLeaf Systems: Windows Azure Mobile Services Preview Walkthrough–Part 4: Customizing the Windows Store App’s UI

Saturday, September 15, 2012

Windows Azure Mobile Services Preview Walkthrough–Part 4: Customizing the Windows Store App’s UI

Previous members of this series:

Windows Azure Mobile Services Preview Walkthrough–Part 1: Windows 8 ToDo Demo Application (C#) - 9/8/2012
Windows Azure Mobile Services Preview Walkthrough–Part 2: Authenticating Windows 8 App Users (C#) - 9/9/2012
Windows Azure Mobile Services Preview Walkthrough–Part 3: Pushing Notifications to Windows 8 Users (C#) - 9/12/2012, updated 9/15/2012

Part 4 of 5: According to the MSDN Library’s Packaging your Windows Store app topic:

By using the Store menu in Visual Studio, you can access the Windows Store and package your Windows Store app for distribution. You will use the Store as the primary way to sell or otherwise make available your apps. For more information, see Previewing the Windows Store and Selling apps.

You must package and prepare your app before you can upload it to the Store. The packaging process gets started when you create a Windows Store project or item based on a template. When you create a Windows Store app, Visual Studio creates a source file for the app package (Package.appxmanifest) and adds that file to your solution. The first time that you build the project, Visual Studio transforms the source file to the manifest file (AppxManifest.xml) and puts it in the output folder for the app. The manifest file describes your app, including its name, description, start page, splash screen, and logos. In addition, you use the manifest file to add capabilities and declarations to your app, such as the ability to access a webcam. You can use the Manifest Designer in Visual Studio to edit the properties in the Package.appxmanifest file. For more information, see Using the Manifest Designer (Windows Store apps). [Emphasis added.]

Emulating a commercial Windows Store app requires customizing the UI to replace default tile and splash-screen images with custom *.png or *.jpg logo images, such as this:

Prerequisites: Completion of the following OakLeaf Systems Walkthroughs:

You must also create 150 x 150 and 310 x 150 logo, as well as a 620 x 300-px splash screen image files and save resized 24, 30, 50-px square logo files for other purposes in the \Documents\Visual Studio 2012\Projects\ProjectName\SolutionName\Assets folder, which contains the default logo files.

Assigning Images to Tiles and Splash Screens

1-1. Launch Visual Studio 2012 with your version of the OakLeaf ToDo app, and choose Project, Store, Edit App Manifest or double-click the Package.appxmanifest item in Solution Explorer to open the file in the App Manifest Designer and click the Packaging tab:

Note: This capture is from step 1-1 of Windows Azure Mobile Services Preview Walkthrough–Part 2: Authenticating Windows 8 App Users (C#).

1-2. Change the Package Display Name to OakLeaf ToDo, click the … button to open the Select Image form, and select the 50-px square image file:

1-3. Click the Application UI tab, type the Display Name, Short Name and Description, and select the image of the appropriate size for the Logo, Wide Logo, and Splash Screen:

Note: Assigning a 24-px image as the Badge Logo requires adding a Background Task, as described in MSDN’s Background task sample application, which is beyond the scope of this Walkthrough.

1-4. Press F5 to build and run the app, display the Start window and scroll to the location of the former default tile:

1-5. Type oa to search for the OakLeaf ToDo app, which displays the 50-px square tile:

1-6. If you specify the wide tile, the 150 x 310-px image file appears in the Start menu:

1-7. Right-click Solution Explorer’s Package.appxmainfest item and choose Open With, XML (Text) Editor to open the XML file in Visual Studio’s XML Editor:

The VisualElements element contains the name and location of each custom image.

I was surprised to discover that packaging and submitting the app to the Windows Store broke the user authentication feature described in the Windows Azure Mobile Services Preview Walkthrough–Part 2: Authenticating Windows 8 App Users (C#) post, which causes the landing page to appear briefly and then disappear. Following is the app’s status in the Windows Store Dashboard as of 9/17/2012 9:00 AM PDT: