Windows app templates

Templates in Window App :

1. Create an empty app, which allows you to build an app from scratch by adding Sections and Data Sources and configuring its content and style using your own creativity.
2. Create an app from a template, which allows you to start with a previously generated app as a guide. Use a pre-configured app setup with your own customized content and layout, and you can also add new Sections and Data Sources. Click on a template tile in order to display more information about that app’s layout and purpose as well as screenshots.
Once you have selected the type of app you want, insert a name, add a description, and select an icon. The icon must be in .png format and measure 160 x 160 px. Now it’s time to add Application Sections and Data Sources.

What is a Data Source?

 

A Data Source is what you want to be displayed in your app – YouTube videos from your favorite channel, your store’s inventory, images from your Flickr account, etc. Data Sources are displayed in your app through Sections. Every Section you create must be connected to a Data Source, and multiple Sections can be connected to a single Data Source. When you create a new Section, you will be given the option to use an existing Data Source (if one exists) or to add a new one. You can edit your Data Sources by clicking on the name of the source you’d like to change.

What are the different Data Sources?

 
RSS – A list of sets of information based on an RSS feed that you enter when creating the data source.
Youtube – A list of videos with titles and descriptions based on a YouTube channel or search that you enter when creating the data source.
Flickr – A list of images and their corresponding data based on a Flickr UserId or search that you enter when creating the data source.
Bing – A list of news search results based on a Bing search that you enter when creating the data source.
Html – A single page of static text that you enter.
Collection – A list of items with columns of characteristics. This is your personal data that does not depend on a website.

What can I do with a Collection?

 

A Collection is the Data Source that allows you to upload data that does not depend on a website – store inventory, contact info, daily diet, favorite musicians, etc. Before entering any data in a Collection, you can edit the possible columns of data. Add a column for every bit of information you want to display for each item and select what type of data it is. There are many types of information you can add: Address, Album Name, Artist Name, Image, Int, E-Mail, Phone Number, Song Name, and String. Changing the data type for each piece of information is important because it allows you to include a variety of additional actions in your app. Your data can be static or dynamic.

Static Resources vs. App Studio Data Services

For Collections, there are two data storage options: Static Resources and App Studio Data Services.
Static Resources means the data will remain constant and does not depend on an internet connection. If you change the data in App Studio, your app will not automatically update.
App Studio Data Services means the data is stored in App Studio and depends on an internet connection. If you update your data in App Studio, your app will automatically update. This allows you to create live apps that don’t need to be updated when you want to change data.

What is an Application Section?

 
Application Sections are the pages of your app. You can add up to 6 distinct Application Sections to your app. There are two types: Sections and Menus.
A Section is a group of pages that are connected to one Data Source. All Sections have a main page that shows your data on a high level and can also have additional pages with more detailed data. Your detail pages act as a pivot and will thus display side-by-side once you click on an individual item on your main page. For example, the main page of your Starters Section shows an image with the name of the dish. Click on a dish, and you can see the image enlarged and with a description below. Swipe to the right to see the price or the recipe…whatever you want to show! This is very useful, especially when there is more information about an individual item than what can optimally fit on a single page.
A Menu is an individual page that contains a list of items that can be either Sections or Actions. Section Items link you to a new Section in the app. Action Items let you link to an external website or complete a variety of different actions (link to What are the different actions). You can also create a custom Action Item. Each Section listed in the Menu can be connected to a different Data Source. Menus let you show more information because they can have multiple Sections, so they are very useful when you want to show more information than what can fit in 6 Sections.

Panorama Control

Navigation in Windows Phone 8 apps starts with a Panorama. A Panorama is a list of sections the user will see when he or she opens the app. Everything an app can have can be displayed in a different section.

What does "Bind to data" mean?

When you start editing a page in your app, you’ll see a bind to data icon () next to each Content item. Binding means you connect part of a Data Source to a certain area of a page. You can see the options that are available for each Content section by clicking on the binding icon and hovering over Data.

What does "Add an Action" mean?

When you start editing a detail page that depends on a Collection with certain data types, you’ll see a small add an action lightning bolt icon () for each Content item. An action is something that will occur on your phone when you click on that piece of information in your app – call a number, send an email, etc. There are a variety of possible actions, but keep in mind that only the actions that correspond to the types of data in your Collection will appear.

What are the different Actions?

 
Call Phone: Call the number (data type phone) that you entered for that item.
Email: Send an email to the email address (data type email) you entered for that item.
Nokia Music - Play Artist Mix: Play a music mix in Nokia Music for the artist (data type artist) you entered for that item.
Nokia Music - Artist: Display the Nokia Music singer information for the artist (data type artist) you entered for that item.
Nokia Music - Search: Search in Nokia Music for the artist (data type artist) or album (data type album) you entered for that item.
HERE Maps - Directions: Open a map to show directions from your current location to the address (data type address) you entered for that item.
HERE Maps - Address: Open a map that shows the location (data type address) that you entered for that item.

Configuring Application Sections

Add a new Section or Menu by clicking on the plus sign () near Application Sections. Then you can edit an Application Section by clicking on its name. For a Section, you will see its corresponding Data Source and Section Pages. Edit the parts of a Section by clicking on the pencil next to its name. For a Menu, you will see its Menu Page and Menu Items that can each be expanded. To edit Menu Items, you must first click on the pencil next to the Menu name and then click on the pencil next to the item you want to edit. When you edit a Section, you can change the content through binding and add actions. You can also change the layout that determines the available content fields and add Extras to the application bar, like share, text to speech and pin to start.

What are Style, Tiles and Splash?

 
Style: Change the colors of your text, background, foreground and application bar or select an image for your background.
Tiles: A Tile is an image that represents your app and acts as a shortcut on the Start screen of your device. All apps have a default Tile to be displayed (the smallest icon). You can also add a few more tiles:
Cycle template: This Tile cycles through a slideshow of up to 9 images from the Collection that you indicate.
Flip template: This Tile has a “front” and a “back” and constantly flips between the two.
Iconic template: This Tile is static and constantly displays the data you input.
Splash & Lock: Upload the background image that will appear on the splash screen and the lock screen.

Getting the app done

How do I get my app on my device?

First you must install the Windows Phone App Studio certificate on your device. Press the magnifying glass () at the bottom of your device to launch Bing search, and then press the eye icon () that appears at the bottom of the screen. Point the phone’s camera at the QR code that opens with the certificate link, and the phone will automatically scan it. Click “add” and the certificate is successfully installed once it returns to the original Install the certificate page.
Once your certificate is installed and your app is generated, follow the same instructions to scan the QR code. Accept the installation, and your app will now appear in your app list!

How do I publish my app?

In order to publish your app, you must be registered at Dev Center! Follow the instructions here to register.
To give your apps the best chance of passing certification, remember the following:

1. You need to create your own unique 300x300 PNG tile to represent your app.
2. Create at least 1 (and up to 8) 768x1280 or 1280x768 PNG screenshot(s). Only use in-app content, do not stretch the image, and make sure your screenshot does not show the off screen edges of the phone. There are various ways you can take your screenshots:
   • Use the screenshot capture function on any Windows Phone by pressing the power button + start button
   • Use the screenshot tool in the Windows Phone emulator in the Windows Phone SDK
   • Use the screenshot capture tool in the Nokia Remote Device Access tool
   For more detailed instructions, go here.
3. Make sure you use your own unique app title, app Logo, Pin to start tile, and long description.
4. Do not use the template placeholder text ([insert name here]) or template app content.

Check out this website for the rest of the publishing steps!

Multilingual Support

When you create an app, you can easily change the default language that will be displayed in the Windows Store in the first "App Information" step. In order to add additional languages to your Windows Phone application, you need to download the source code for the application and edit it using Visual Studio.

The initial resource file you use to capture UI strings that are being localized is called AppResources.resx and is located in the app’s Resources folder of your project.

On the project’s Properties page in the Supported Culture box, select the language(s) you would like your app to support. Visual Studio will create a new resource file for each supported language that is an exact copy of the default language resource file (AppResources.resx). It will automatically rename it using the culture’s locale code, such as AppResources.en-US.resx.

Replace the default language values in each supported language resource file with translated values, and you are done!

How do I enable ads on my app?

In order to enable advertisements in your Windows Phone application, you need to do the following:

• Install the tools - Install Visual Studio, and install the latest version of the Windows Phone SDK
• Obtain an AdUnitId and ApplicationId keys - Register your app at the Pubcenter site with your Microsoft Account, create a Windows Phone 8 app (ApplicationId), and create an AdUnitID
• Update the App Studio code
  • Download the App Studio source code for the application by clicking “Download Source Code” after you’ve generated your app.
  • Open the XAML code and find the AdControl line in the file View/YourFirstPage.xaml. The code is commented, so if you want to use it, you need to uncomment it.
  • Replace the AdUnitID and ApplicationID in the code - In the AdControl XAML, there have two important properties: AdUnitId and ApplicationId. The current values of these two properties are intended for demo purposes only. Before publishing your App to the Windows Phone Store you need to replace these two values with the values you obtained through PubCenter.
    
    < ads grid.row="1" height="80" width="480" isautocollapseenabled="True" isautorefreshenabled="True" adunitid="Image480_80" applicationid="test_client" />