The Making of Vids an App Studio App

comments 2
App Studio / Phone / SoulPancake / Windows Phone 8


Vids is an app I built using App Studio.  Pulling data from SoulPancake channel on YouTube.  If you haven’t checked out SoulPancake please do.  These videos are a great way to start your day and that’s why I built this app.  I built Vids to get people watching and sharing the joy and humor these videos bring.  Let’s make an app

Bringing Vids to life

Before you get started you might want to have a look at the following: the How To guide; Sample Apps ;  OS preview for developers ; and what apps in the store have been built using this tool.  Start a new Project 

  1. To start a new project you can either click the start new tab  or start new project button.
  2. Sign in with your Microsoft email (Live, Outlook, or Hotmail).
  3. Select a template of your choice(please note I will be using the video template for this app). Place image of screen shot One of the nice features of App Studio is every template has a emulator(watch video to see how it works).

Select Template

Adding the Content 


  1. Enter  App title
  2. Enter the  App Content. Content is the  Data Source of an app.  A  Data Source is simply the content that will display in each section of an app.  Data Sources are displayed in an app through sections.  Every section you create is connected to a Data Source.  For more info on Data Sources  and types this please click here.  If you are looking to add data that doesn’t depend on websites please have a look at collections. Content for Vids:  For this app I pulled my content from SoulPancake a YouTube channel.  And I had the following sections: SoulPancake main page; SoulPancakes Kid President;   Soul Pancake Little Kids Big Question ;  SoulPancakes SideWalk Sessions; and Share Video section(about page).
  3. Adding a Video:
  • Delete all the existing sections
  •  Click on the Youtube button.
  • In the Add Youtube section add the following information:  Section Name;  Data Configuration (use either search term or exact username); and the search term and click confirm.  Do this for  all  YouTube sections.
  • To change the layout , data binding or video pulled click the edit link that appears under the the SoulPancake section. Do this for  all  YouTube sections.

Add Youtube Section

Edit Section

Edit Section

Editing the template Themes Customizing an app  is really simple in App Studio.  You can choose to customize your background,  or  pick a dark or light style.  I used the custom style for vids app.  You have the option to either use an background image or use a color for  background, foreground and application bar.  A resource I found incredibly usefully when selecting my color palettes of my apps is  Adding Tiles Tiles

Tiles Flip template :The flip Tile template flips from front to back, offering application additional data.   You will need to create the following  icons:

  • Small Image – 160 X 160 px
  • Normal Image – 340 X 340 px
  • Back Image – 340 X 175 px

Cycle template: The tile cycles through up to nine images. You will need to the following to complete this  template

  • Small Image – 160 X 160 px
  • Image Source (optional)

Iconic template: The iconic template displays a small image in the center of the tile, and incorporates additional data if needed.

  • Normal Image – 340 X 340 px

Splash Screen Typically, you should use a splash screen in your app only if your app is unusually slow to load or if you want to add additional branding to the app. If you’re using a single image, you should add an image file that is 768 × 1,280 and named SplashScreenImage.jpg to your app project. The phone automatically scales the image to the correct size. For more details click  here.


Publishing your app


  1. Gavin says

    Did you happen to modify the lists so that you get more than the default 20 or 25 videos or did you just leave the defaults? I am trying to make a youtube app similar to this but want to be able to load all of the videos as a user scrolls, or just load them all at once.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>