This is one topic that I get a lot of attention for as I created a YouTube video tutorial on how to create a Windows Phone app using the original Windows Phone App Studio which has most recently been renamed to the Windows App Studio.

The reason for revisiting this topic is that I have had a lot of questions asking why developers were only showing how to make RSS readers using the App Studio and the quick answer is that the App Studio was in a very basic beta form when it was first released so all samples were tailored for the most basic functionality that was provided.

This tutorial has been split up into multiple parts to make it easier for you to jump in and out of sections without too much information being thrown at you at once. Choose from the selection below to get yourself started or if you’re new, stick around and you’ll be moved onto the next part at the end of each chapter:

  1. Part 1 – Creating a social menu and adding customizing a Facebook section
  2. Part 2 – Add more social media, YouTube videos and collection based data
  3. Part 3 – Adding RSS, custom HTML and Bing News

Let’s take a look at what more you can do with the Windows App Studio after a few revisions of the platform! To get yourself started, head over to the App Studio website and sign up (or sign in) with your Windows Live account. Registering with the App Studio website also makes you eligible to download the Preview for Developers app on your Windows Phone device and get the latest developer version of the Windows Phone OS before general release.

Choosing a template

Choosing a template

App Studio now has over 15 templates to start from

Choosing a template couldn’t be easy enough. On signing into App Studio, hit Start New at the top of the page and you’re ready to pick from over 15 different templates to suit your project. I will quickly go over a few to show you what they are for but feel free to carry on to the next step or explore them for yourself.

  • Contoso Ltd – Create an app about your business
  • Windows App Studio – Create an app about something you care about
  • My App – Create an app that is all about you
  • My Favorite Band – Create apps dedicated to bands you love
  • Movie Review – Create an app about a movie you just can’t stop talking about
  • Web App – Create a web application in seconds

For this look at the platform, I’m going to be showing you the Empty App template.

Content First, Design Later

While you may want to jump straight into designing your application, it’s better to get some content in so you can see what you’d like to do with the design. If you’ve already thought up of your app name though, go ahead and put it in to see what that will look like! For the tutorial, I’m going to be creating a branded application about myself pulling in information from all the available resources in the App Studio.

App Icon

Why not set an app icon?

A great way to finish up the first parts of the personalization of the content is to add an app icon to your title. You can do this by clicking on the icon next to your app title in the editor. You can either select from a range of icons provided through the App Studio, or if you want that extra personalized application, upload your own assets. For the best results, make sure your images meet the recommended size guidelines before uploading and make sure you’re saving any images with transparency as PNG for the best effect.

The Main sections and how to extend them

You’re now ready to start filling your app with as much content as you can. For the main view of your application, you’re limited to 6 sections which may be a few too many than you need if you’re looking at making a bulky app. That’s where menus come into the picture. Although they take up one of your 6 main sections, adding a menu as one of them gives you an extra 6 to play with and is a great way of splitting up your content to make it neat and not too overwhelming to the consumer.

Menus

Adding menus to extend content

You can also customize how the content in your menu is going to look from 3 options. If you hit the edit button underneath the section, you’ll be taken to a page where you can change the look of your menu section.

Section

Section design editor

Until you start populating with content, you’ll not get a feel for how these will look in your app. However, from left to right, the options are:

  • Text List
  • Text List with Icon
  • Tiles with Icon

Depending on what you’re content in the section is going to be will reflect what choice you make for the layout of your menu.

Connecting social networks

One great thing about the app studio is that it can pull information from various locations with relative ease. Facebook is one in particular that is very easy to set up. The Facebook section comes in two flavors depending on what you’re after. If you want to display content from your own Facebook account, you’ll need to set your profile to public, otherwise you’ll need to set up a Page for displaying content. So, to display some Facebook content in your app you need to follow these steps:

  • Copy the url page name you want to display in your app
Facebook Uri

Copy this part of the Facebook page URL

  • Paste this into the App Studio Facebook section editor
Facebook

Facebook Section Editor

If you want to give your Facebook section a personalized name, you can do that too! Now, if you’ve added your Facebook section to a menu like I have, you will now notice that your main page shows the section with a menu option in for your Facebook section. If you’ve chosen a layout that involves an icon, you will also notice a circle icon. This and the Facebook section itself can be customized by clicking the edit button underneath the section.

Edit Facebook

Customize the Facebook section

There is a lot that you can change when you’re editing content sections so that you can get the best feel for your content and the application you’re trying to create. The diagram below shows what is editable for the main view of the Facebook section.

Modify

Making changes to the Facebook section

The preview on the left shows what the content of your Facebook section will look like once the user has clicked on the section through the menu on the main screen. As you can see, it is a list of the data it has pulled from the Facebook page you provided when you created it. From here you can choose a new icon, change the name, change the page you want to pull data from, and update the layout for both the list view and detail page of the content. For the layout, you have a choice of 10 different layouts which range from a basic text list view, to tiled images. For the image based layouts, your Facebook content must contain a photo uploaded as part of the content as it doesn’t pull in external content from the link, only what Facebook provides.

From the image above, if you click where I have outlined ‘Edit Detail View’, you’ll also be able to change how the content looks when a user taps on one of the items in the above list view.

Detail View Editor

Editing the detail view of Facebook content

Editing the detail view including Bindings

With the detail view, we have more options to play around with. Again, you have 6 different content layouts for the detailed view ranging from pure text, to just the image or image and content. We also have the ability to change bindings and add page extras.

Bindings are ways of telling the interface what dynamic content you’re wanting to show from various resources, in this case, Facebook. With bindings, you can change what content is being displayed from the feed content that is pulled from the resources. The image below shows some options for changing content that will be displaying in your app.

Editing bindings

Editing bound content in a section

Going back to the Page extras that are involved with a detail view, you have the ability to give users the option to enable text to speech choosing the content that you want to read out (similar to binding), you can give the ability to share the content through the share feature in Windows Phone and Windows 8, and you can give the option to pin the specific content to the Start Screen. Once you’ve made the changes you want to your section, hit the save button in the top right corner of the App Studio website. Remember to do this often so you don’t lose your progress!

We will carry on the development of your application in part 2.

Author James Croft

James is a .NET developer for Black Marble Ltd. with over 5 years app development experience in Microsoft platforms. He enjoys blogging, helping others learn to code, making YouTube videos, spending time with his girlfriend but most of all, penguins.

More posts by James Croft