Windows App Studio How-To

The Windows App Studio ‘How-to’ section will take you through the steps from starting a new app to downloading an app package that is ready to be, extended, installed, or published to the store.

Getting Started

To start creating an app, log in to Windows App Studio using your Microsoft account. Once you are logged in you will land in the home page of the site.

Starting a new project

To start a new project, click either the big “Start now!” button, or selects the “Start new” link on the navigation bar.

Templates

After you click, you will be taken to the “Start new” page where you can select the Windows version you are targeting, and the template you would like to use by selecting one of the tabs underneath the navigation bar. We strongly recommend that you select with Windows 10 so that you can take advantage of the best features.

Templates

With Windows 10 you can publish a single package which will run on all Windows 10 devices (Phone, Surface, PC, and more).

Once you select the Windows version, you can select a template to use. Please skip ahead to the “Choosing and using templates” section to continue.

Updating Existing Projects

If you previously created projects, click on ‘My Projects’ on the top left of the screen and you will see the list of your projects.

Templates

On that page, you will see two tabs, one for Windows 10 and one for Windows 8.1

Templates

You can also create a new project from this page by clicking on the “Start now project” button, which is on the right side of the screen.

Templates

Choosing and using templates

Templates are pre-created layouts and content for Windows App Studio Apps. They are there to make it easier for you to get started as each template has the relevant sections and content for the subject matter. For example, the “My Products Catalog” template has sections and features for displaying products or artwork

To get started with Windows 10, choose between either a Hosted Web App or Content template.

Hosted Web App Template

A Hosted Web App is a website that placed within a Windows app wrapper, meaning that it’s a website that can run like an app (if there is a data connection) and can be published to the Windows Store.

Using a Hosted Web App (HWA) template is the easiest and fastest way to turn a responsive website or web app into a Windows app. When using this template, you will specify a URL of a website that you would like to turn into a Windows App. You can then adjust things like the icon, orientation, and other settings. After that, all that’s needed is to generate the package and install or publish the app.

Content templates

Content templates create apps that can run on a Windows device or PC with no requirement for a data connection. Here you can easily create picture albums, connect to different data sources such as Photo Album, Bing, HTML, RSS, Facebook, YouTube, etc. Content templates can either be pre-defined such as with the “My Event” and “My Products Catalog” templates, or an empty blank template that could become anything.

For Windows 10, you can choose between 2 styles of templates:

  • List-style templates
  • Pivot-style templates

Empty App Templates

An Empty App Template, allows you to build an app from scratch by first adding Sections and data sources of your choosing and then configuring its content and style using your own creativity.

Predefined Templates

Creating an app from a Predefined Template allows you to start with a previously generated sample app as a starting point. You can use a pre-configured app and fill it 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.

Building your App

Once you select the template you want, insert a name and click on ‘Start with this one!’

Templates

Adding App Logo:

To change and add an app logo, click on the top left corner (to the left of your app name)

Templates

Then click on the icon image right below “App Logo” to select a new image.

Templates

Once image is selected you can zoom-in and zoom-out to get the right scale. Choose your settings in the “Replace Images” section and then click on “Crop” to set the image.

Templates

Once you click “Save”, the App logo will be updated.

Templates

Data Sources

A data source represents the type of content that you want to display in each section of 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 is connected to a data source.

Data Sources

What are the different Data Sources?

RSS – A list of set of information based on an RSS feed that you enter when creating the data source.

Html – A single page of static text that you enter.

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 – The Flickr data source allows you to display photos from the hashtag search function as well as from a specific user account, to the users of your app, without requiring them to have a Flickr account.

Bing – A list of news

Facebook – A Facebook feed from a public Facebook page.

Instagram – A list of images based on the Instagram Id

Twitter

Menu

Collection – A list of items with columns of characteristics. This is your personal data that does not depend on a website.

Xbox Music

What can I do with a Collection?

A collection is a data source that allows you to upload data that does not depend on a website. Examples could be store inventory, contact info, daily menu, your favorite musicians, etc. The point is that you get to choose and add the data that appears in it.

Templates

Before entering any data in a collection, you can define the total possible columns of data. Add a column for every point of information you want to display for each item and select what type of data it is.

There are many types of information available. You can add details like address, album name, artist name, image, e-mail, phone number, song name and string, and more.

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.

Templates

Static Resources vs. App Studio Data Services

For Collections, there are two data storage options: Static Resources and Windows App Studio Data Services

Static Resources means the data will live in the app on the phone and does not depend on an internet connection. If you change the data in Windows App Studio, your app will not automatically update.

App Studio Data Services means the data is stored in Windows App Studio’s servers in the cloud and depends on an internet connection. If you update your data in Windows App Studio, your app will automatically update. This allows you to create live apps that do not need to be updated when you want to change data. This will also let you take advantage of the Windows App Studio Collections app that is available in the Windows Store (Windows 10 only).

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 connect to a data source. All Sections have a main page that shows your data on a high level and can have additional pages with more detailed data.

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. You can also create a custom Action item. Each section listed in the menu can connect 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.

Templates

Panorama and hub Controls

Navigation in Windows Phone 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.

In Windows Phone 8.1 and Windows 8.1 the sections are displayed using the new hub control. For more information see: Guidelines for the hub control

Templates

Templates

What does "bind to data" mean?

When you start editing a page in your app, you’ll see a bind to data icon ( Bind 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.

Templates

Templates

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 ( Bind icon ) for each Content item. An action is something that will occur on your device when you click on that piece of information in your app – call a number, send an email, etc. There are variety of possible actions, but keep in mind that only the actions that correspond to the types of data in your Collection will appear.

Templates

What are the different Actions?

  • URL
  • Email - Send an email to the email address (data type email) you entered for that item.
  • Call Phone
  • Map
  • Custom

Changing and Editing Themes

Selecting Themes

Changing themes in Windows App Studio is easy. Windows App Studio offers a range of predefined themes or the developer can customize every part of the theme.

To change the App themes:

Click on “Themes”

Templates

Select either “Pre-defined” or choose your own theme.

Click on “Save” to save the theme.

*Note: If you choose the predefined theme any changes done in the custom theme selection will be lost.

Below is the description of each custom option:

App title text

This feature allows the developer to choose an image as the app title. There are some reasons you may want to do this. For example, it helps you brand the app with the company name.

You can choose to upload it from either:

  • Local Computer
  • OneDrive
  • Windows App Studio Resource (if you have previously uploaded an image)

To upload an image to the App title, click on the arrow sign on the right.

The image can be resized using the “+” and “-“ buttons.

Once the image is chosen it will appear on the top left of the Windows device as shown in the image above.

To change the image simple click on the arrow icon and choose another image.

To remove the image simple click on the ‘X’ on the right and the image will be removed.

Click on “Save” to save the theme.

App Backgrounds

This feature allows the developer to choose an image or a solid color for the background of the app and set backgrounds for individual areas.

Overall App

To upload an image to the background, click on the arrow sign on the right

You can choose to upload it from either:

  • Local Computer
  • OneDrive
  • Windows App Studio Resource (if you have previously uploaded an image)

The image can be resized using the “+” and “-“ buttons.

Once the image is chosen it will appear on the top left of the Windows device as shown in the image above.

To change the image simple click on the arrow icon and choose another image.

To remove the image simple click on the “X” on the right and the image will be removed.

Click on “Save” to save the theme.

Appbar background

This changes the color in the App Bar

Click on ‘Save’ to save the theme

Appbar foreground

This changes the color of the menu button in the App Bar

Click on ‘Save’ to save the theme

Box background

This changes color of the layout background

Click on ‘Save’ to save the theme

Box foreground

This changes the test in the layout

Click on ‘Save’ to save the theme

Page title, Title, Subtitle, Description

This setting helps you in making changes to Font Color, Size and Style

As you chose the theme you can get the preview of it in Phone

Click on the “Windows Preview” button to check how it would look in Windows Tablet/Laptop/Desktop

Once you have chosen the theme click on “Save” to save the theme.

Templates

Windows 10 Tiles

To change the tiles layout, click on “Tiles”.

Templates

In the current release there is a new feature called the Live Tiles editor. For any Windows 10 App Studio app, you can choose to use either Default (image) tiles, or Live Tiles.

Default Tiles

Default tiles are created on the logo page and are images of different sizes generated based on app logo.

Live Tiles

Live Tiles come in two forms, Static and Dynamic.

Static

The content is configured at design time and is included on the app package.

Dynamic

The content can be bound from one of the sections you have configured in your app (except menu and html). The tile will be refreshed every 30 minutes once the app is installed getting data directly from the data source of the sections you’d selected in the Tiles editor.

Templates

Select the tile view

Templates

You will be able to find the preview of the tiles on the right hand side of the screen.

Furthermore, you can customize your tiles layout in the ‘Edit your tiles’ section with two properties you can configure, which are Branding and Display Name.

Branding: While a notification is being displayed, you can control the branding on the bottom of the live tile (display name and corner logo) via the branding attribute on the notification payload. You can choose to have “none” displayed, just the “name”, just the “logo”, or both “nameAndLogo”.

Display Name:This property overrides the display name while the notification is being shown. If not present Windows will show the app name.

Templates

Groups

Groups allow you to semantically declare that the content inside the group is related and must be displayed in its entirety for the content to make sense. You only can add 2 groups maximum.

Subgroups

Subgroups also allow you to divide data into semantic sections within a group. For live tiles, this visually translates to columns. You only can add 5 subgroups maximum.

The Weight property allows you to control the widths of columns. Is represented as percentage. For example, one subgroup with weight 80 takes the 80% of the total width.

Inside a subgroup you can include 1 of more elements of 2 types

Text

Used to display text. Contains the following configurable properties:

Content: The text to display. In case the tile is dynamic you can select from 1 of the text fields of the section you selected.

Wrap: Sets text wrapping on a text element

MaxLines: Maximun number of lines to dyplay

Subtle: Makes the text 60% opaque, typically resulting in text that is more gray than white.

Style: Control the font size, color, and weight of text elements:

Style Font Height Weight
caption 12 epx Regular
body 15 epx Regular
base 15 epx SemiBold
subtitle 20 epx Regular
title 24 epx Semilight
subheader 34 epx Light
subheader 34 epx Light
header 46 epx Light

Image

Used to display images. Contains the following configurable properties:

Source: With the image uploader & cropper you can upload your own image. In case the tile is dynamic you can select from 1 of the image fields of the section you selected.

Remove Margin: When selected removes an 8px margin between any content above or below the image.

Crop: You can select circle if you want your image appears inside a circle

Overlay: Accepts integers from 0-100, with 0 being no overlay and 100 being full black overlay

Placement:

  • Inline: The image appears mixed with the text elements.
  • Background: Make the image appears as background of the current subgroup
  • Peek: The peek image uses an animation to slide down/up from the top of the tile, “peeking” into view, and then later sliding back out to reveal the main content on the tile.

Tiles Template

Additionally, you can select one of the predefined templates. And if you want customize it.

Templates

Changing and Editing the Tiles and Splash Screen on Windows 8.1

To change the tiles layout click on “Tiles”.

Rss Feed

You will find 3 options for the tiles layout:

Flip template: The flip tile template flips from front to back, offering application additional data. Click on ‘Save’ and you can see the images in the simulator.

Rss Feed

Cycle template: The tile cycles through up to nine images. Select the Image source. You can either use Groove Music, Photo Album or create a New Collection as the Image source. Once selected these images will appear on the device and cycle through 9 images. Click on “Save” and you can see the images in the simulator.

Rss Feed

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

Rss Feed

Splash Screen

Click on the “Splash” tab.

Rss Feed

To change the image click on “EDIT” and choose the image. You can choose different images for Phone and Client devices.

Rss Feed

Click on “Save” to see the preview.

Rss Feed

Getting the app done

Templates

Adding Sections and Content

Now that you understand data sources, you’re ready to add and edit Application Sections and data sources.

Click on the “Content” tab to add/edit the data sources in your app, which is where you can add and edit numerous data sources

Templates

We will go through each data source in the following subsections.

Configuring RSS Feeds

Click on the “RSS” button in “Add Sections”. This will open a screen to add the RSS section.

Templates

Change the section name as desired, enter the RSS URL, and then click “Confirm”.

Templates

Once you click on ‘Save’, slide through the simulator and you will see the RSS feed appearing as it would in the app.

Templates

Configuring HTML sections

Click on the “HTML” button in “Add Sections”. This will open a screen to add the HTML section

Templates

Change the section name as desired, enter the HTML, and then click on “Confirm”.

Templates

Once you click on “Save”, slide through the simulator and you will see the HTML appearing as it would in the app

Templates

Templates

Using the YouTube data source

Click on the “YouTube” button in “Add Sections”. This will open a screen to add the YouTube section. Once you add the YouTube data source, you would see add YouTube section page.

Templates

Change the section name as desired. Next, you will need to select and existing or create a new YouTube key.

Templates

To create a new key, click on “Create new API key”, which will take you to a new screen where you will add a new API key.

Templates

Click on ‘Create and maintain YouTube API Key’. This will connect your free YouTube developer account with your Windows App Studio app

You will then be taken to the Google Developers page. Log in with your standard Google user name and password.

Templates

Once you log in, click on ‘Create Project’.

Templates

Enter a project name and click on “Create”.

Templates

Now, the YouTube API needs to be switched on. To do this, click on menu icon.

Templates

When the menu opens, click on “API Manager”.

Templates

Click on “YouTube Data API” and then click on “Enable API”.

Templates

Templates

Now we need to pass the credentials to the App. To do this click on “Credentials” and then click on “Add Credentials”.

Templates

Click on “API key” and then on “Browser key”.

Templates

Templates

After you’ve done that, click on “Create”.

Templates

A window will pop up with the API, which you should copy.

Templates

Head back to Windows App Studio and paste the API key in the Windows App Studio Section and then click on “Validate”. Ensure that there are no additional spaces before or after the API Key. This is a common issue when copy/pasting strings, which can cause errors.

Templates

If everything was successful, the API will be registered and you should be able see the key name in Data Configuration (if you are not able to see the key name click on “Refresh”).

Templates

Select the “API Keys” and type in the YouTube channel name. You should then be able to see the channel videos in the preview screen.

Templates

Templates

Using the Flickr data source

The Flickr data source allows you to display photos from the hashtag search function as well as from a specific user account, to the users of your app, without requiring them to have a Flickr account.

Add the Flickr data source to your application sections. This will open a dialog box to add the Flickr section.

Templates

From here we have two different configuration options. The User configuration, or the Tags configuration. Selecting tags will show all photos for a given tag. Selecting a user will show all photos in that user’s photo stream.

Tag Configuration

We will start with the Tags configuration as it’s the quicker of the two options:

Select Tags from the dropdown and enter your Tag, or tags separated by commas and then press confirm.

Templates

User Configuration

Now we will work with the User configuration option:

Add the Flickr data source to your application sections. This will open the following dialog box

Templates

Open a new browser tab and navigate to a site that helps find your user name (Flickr Account ID), such as http://idgettr.com/ and paste in the full http link of the user account you would like to find the user name for and press the find button.

Templates

Copy the Flickr ID and paste it into your Windows App Studio Flickr Datasource in the proper box shown in the image above, then press confirm to display the selected user’s picture feed.

Click on “Save”.

Templates

Configuring Bing Datasource

Click on the ‘Bing’ button in ‘Add Sections’

Templates

This will open a new screen to add a Bing section.

Change the section name as desired, select the country from the drop down menu, enter the Search items and click on “Confirm”.

Templates

Click on ‘Save’ and slide through the simulator to see the Bing data.

Templates

Templates

Configuring Facebook Datasource

Click on the Facebook data source to open the Add Facebook dialog.

Templates

Change the Facebook section name if required.

Click on “Create new API Key” to create a new Facebook API key.

Templates

This will take you to a new screen to add the API key and information.

Templates

Click on “Create and maintain Facebook API Key” and login to your Facebook account.

Click on “Add a New App”.

Templates

Select the platform as “Website”.

Templates

Type in the Facebook app name and click on “Create New Facebook App ID”.

Templates

Choose a “Category” and click on “Create App ID”.

Templates

Type in the Windows App Studio URL on the following screen and click on “Next”.

Templates

Scroll down and click on “Skip to Developer Dashboard”.

Templates

Click on “Show” so that the App Secret key is visible.

Templates

Copy the App ID and App Secret on the Facebook DataSource page and click on “Validate”. Make sure there aren’t additional spaces before or after your App ID and App Secret. This is a very common issue that will cause errors.

This will take you to the below screen and the Facebook app key will be visible.

Click on “Refresh” and you will be able to see the Data Configuration drop down menu updated with the newly created Facebook DataSource name. Type the page name and click on the Search icon.

Select the correct page and click on “Select”.

Templates

The page field will get updated. Now click on “Confirm”.

You will be able to see the Facebook page updated in the Preview screen.

Templates

Templates

Using the Instagram data source

The Instagram data source allows you to display photos from the hashtag search function to the users of our app, without requiring them to have an Instagram account for up to the minute picture sharing with minimal hassle.

Templates

For Projects with a New Instagram Datasource

Utilizing the Instagram data source in your Windows App Studio project takes a few different steps. We will use this guide to walk you through the process:

Click on the Instagram data source and click on “Create new API Key”.

Templates

This will take you a screen where you manage the API key:

Templates

Now click on “Create and maintain Instagram API key". Clicking that button will take you to the following where you will click on the “Register a New Client” button.

Templates

You will need to fill in all of the necessary fields that Instagram requires for client creation. Once you fill in all of the previous fields, fill in the captcha and press the “Register” Button to complete the Instagram Client creation, which should then automatically redirect you to the previous screen.

Templates

*Note – If you do not have a website URL of your own, you can fill in both the Website URL field and the OAuth Redirect_URL Field with http://appstudio.windows.com

Now you will want to copy the CLIENT ID set of digits and bring them back to the Windows App Studio Auth Key section and paste them in the Client ID Field as show below and the click Validate. Once you do that, it will bring you back to the Windows App Studio Auth key management section.

From here open the Windows App Studio project that you would like to add Instagram to, and click on the + sign to add Instagram to one of your Windows App Studio sections, the Box shown in figure 9 will pop up.

Select the data configuration you just created, enter a hashtag search without the hashtag and press confirm. This will complete the configuration of the Instagram section and display the images with the hashtag you chose.

For Projects with an Existing Instagram data source

For those of you who have used the previous iteration of the Instagram data source and now need to fix it, the following steps are for you.

For those of you who have used the previous iteration of the Instagram data source and now need to fix it, the following steps are for you.

Open Windows App Studio and pick the project with an Instagram data source, click “Edit” to the right of the project and that will open you to the page where you can edit all of your sections.

Find your Instagram section and click Edit.

From there click on the Data tab, which will bring up all the information related to creating your Client for Instagram. Then click on the blue words “Click here to create a new Instagram key”

From there click on the Data tab, which will bring up all the information related to creating your Client for Instagram. Then click on the blue words “Click here to create a new Instagram key”

From this point you will be able to follow steps 1 through 7 in the previous section of this post titled “For Projects with a New Instagram data source”.

*Note – Account sensitive information hidden for security, naturally

Using the Twitter data source

The Twitter data source allows you to display Tweets from a timeline or hashtag search to the users of your app, without requiring them to have a Twitter account.

Using the Twitter data source in Windows App Studio project takes a few different steps. We will use this guide to walk you through the process step-by-step.

Add the Twitter data source to your app by clicking the Twitter Datasource. Once added to your app it will open a dialog to add Twitter.

Templates

Templates

Click on “Create new API Key” which will take you a screen to manage the API keys.

Templates

Click on “Create and maintain Twitter API Key”. This will take you to https://apps.twitter.com and once there, log in to your Twitter account.

Now you will click on the gray button in the top right with the text “Create New App”. From here you will need to fill in all of the necessary fields that Twitter requires for app.

Templates

Templates

Once you fill in all of the previous fields, check the box and click the box with the text “Create your Twitter application”. It will bring you to the Application Settings page, which will display all of your relevant Twitter information.

The final step on the twitter site will be to generate an access token. To do this, at the top of the page click on the blue text “Keys and Access Tokens” and then click “Create my access token” Keep this information ready for the next steps.

Templates

Templates

Templates

Now that you have this information, go back to Windows App Studio and input all of the relevant data requested for your Twitter Data-Source in the spaces. Make sure you have not copied any extra spaces before or after the characters.

From here you can now return to the Twitter data source section and use the “Data configuration” dropdown menu to select the new Twitter Key you just provided.

Templates

Finally, press the confirm button and go see your newly populated twitter data in your Windows App Studio app

Templates

*Note – Account sensitive information hidden for security.

*Note - To maintain the Twitter auth keys you possess, simply click on your username (email address) in the top right corner of the Windows App Studio website and it will show you all of the different keys you have registered and from there you can add more or delete ones you no longer need.

Configuring the WordPress data source

*Note - WordPress data source relies on the REST API to access the source content. If the target blog is self-hosted (not in Wordpress.com) it must have the JetPack plug-in installed and the JSON API enabled.

To start configuring the WordPress data source, click on the add WordPress button.

Templates

This will take you to a new screen where you will enter the “Section Name”

Enter the URL in the “Enter Domain” section and choose the posts from the dropdown list.

Click on “Confirm” and click on “Save”.

Templates

The WordPress will be available in the preview.

Templates

Templates

Configuring Menu and Collection

Add a Menu by clicking on ‘Menu’ data source under the Add Section.

Then you can edit an Application section by clicking on the pencil.

For a Menu, you will see its Menu Page and Menu Items that can each be expanded. To add Menu Items, you must first click on the lines ( Rss Feed ). To edit the Menu layout, click on the pencil ( Rss Feed ).

For a Collection, you will see its Collection Page that can each be expanded. To add items, you must first click on the lines icon ( Rss Feed ). To edit the Collection layout, click on the pencil ( Rss Feed ).

Templates

When you edit a section from “Section Title” in the top right of the screen and change the layout by clicking below List page/Detail Page and by selecting the desired layout.

Based on this layout you will have to “Add” data and then “Bind” data. This is explained in detail below.

Add data to the collection:

To add data, click on “Data” tab and then click on “Create new”.

Templates

Here is an example of data configuration:

Templates

Configuring the Groove Music data source

Click on the add Groove Music button.

Templates

Change the Groove Music section name if needed.

Templates

Click on Search as highlighted above

Templates

This will take you to a new screen.

Type in the artist name in the text box and click on search. This will display the artist main page. Click on “Select” and then click on “Confirm”.

Templates

This will add the Artist to the Groove data source. This can be seen on the Phone simulator on the right hand side of the screen.

Using the Hosted Web App in Windows App Studio

The Hosted Web App in Windows App Studio allows you to turn your mobile friendly, responsive websites into a top quality Windows and Windows Phone app with only a few clicks.

Configuring a Hosted Web App

Open Windows App Studio and Press the “Start New Project” button.

Choose “Hosted Web App”.

Templates

Enter your App Name. Choose a preview device and click on “Start with this one!”.

Templates

Enter the URL of the website that you would like to turn into an app into the Base URL box and select the rotation type.

Templates

*Note – For best results, you will want to use a mobile-friendly and responsive web site.

From here, press the “Save” Button in the top right corner. That’s it! Your website is now wrapped and ready to be turned into a Windows and Windows Phone app.

Using the Web Application Template in Windows App Studio

The WAT Template in Windows App Studio allows you to turn your mobile friendly, responsive websites into a top quality Windows & Windows Phone App with only a few clicks.

  • Open Windows App Studio and Press the “Start New Project” button.
  • Choose “Web App Template”

If your project is targeting Windows 8.1 choose Web App template and if your project is targeting Windows 10 choose Hosted Web App template.

Templates

  • Enter your App Name. Choose a preview device and click on “Start with this one!”

Templates

  • Enter the URL Of the website that you would like to turn into an app into the Base URL box.

Templates

*Note – For best results, you will want to use a mobile-friendly and responsive web site.

  • From here, press the “Save” Button in the top right corner. That’s it! Your website is now wrapped and ready to be turned into a Windows and Windows Phone app.

Connecting to Services using API Keys

Most of the services we are using to connect to external services are changing their support policy, and are deprecating the anonymous access to their APIs.

This implies that all the apps you created in the past, and use any of the affected data sources will stop working, to fix it you need:

  • Create a developer account in the affected provider (ex: YouTube, Facebook, Twitter, and Instagram).
  • Register your application.
  • Create a developer or API key. In some cases, the Client Secret might also be needed. Look in the API manuals for detailed instructions for each provider.
  • In Windows App Studio, associate a given key or keys with the project you are creating.
  • Note that you can use the same keys in different sections and apps.

Sideloading your app.

Sideloading the app is an easy way to check how your app will look on the device. It is also an easy way to share your private app (ex: Birthday Invitations, Wedding invitations etc.) with your friends and relatives.

There are two steps to installing a sideloaded app: Install the certificate and install the app.

Install the certificate on Windows Devices

Before sideloading a Windows App Studio app on your Windows device, you will need to deploy the certificate. This process needs to be completed for each device.

We provide a PowerShell script to help you with the certificate installation. Once the app is ready to get installed click on “Finish” and click on “Generate”, which will pop-up a window to generate the app.

Templates

You can check ‘Installable package’ as shown in the figure below.

Templates

Now click on “Generate”

The build will be queued and then will start generating the app.

Choose the target device.

Windows 10

Steps to install the certificate automatically.

Click on “Install Windows Certificate”.

Templates

This will download the certificate files. These files need to be uncompressed.

Templates

Now, right click the file Add-RootCertificate.ps1 and select “Run with PowerShell”.

Templates

Click on “Open”.

Hit “Enter”.

Templates

Click on “Yes” (if asked)

Hit R and Hit “Enter”. Hit Y and Hit “Enter”

Templates

This should successfully install the certificate.

Steps to install the certificate manually.

Note: Once you have downloaded and uncompressed the Add-RootCertificate.zip, you must double click the file SymantecEnterpriseMobilityRoot.cer and select the option to install the certificate. You must install in Local Machine and select the certificate store to be “Trusted Root Certification Authorities”.

Templates

Templates

Templates

After this point, the certificate is successfully installed in your Windows device.

Install the App in Windows Devices

On Windows devices sideloading requires that you have had deployed the certificate and have a free developer account in Windows Store. We provide a PowerShell script that checks this requirements for you. Once you complete requirements the first time, the next time you install another app, it will only ask for you to complete the sections unique to that app.

Download the installable package and click unlock to ensure the package can be properly installed.

Templates

Now uncompress the zip file, right-click the Add-AppDevPackage1.ps1 and select “Run with PowerShell”. Then follow the screen instructions as shown in these screenshots.

Templates

Templates

Templates

Installing certificate on Windows Phone

Once the app is ready to get installed click on “Finish” and click on “Generate”. This will open a screen to generate the Windows 10 app.

Templates

Check ‘Installable package’ as shown in the figure below.

Templates

Now click on “Generate”. The build will be queued and will start generating the app.

Templates

Once the package is ready, click on “Install Windows Mobile Certificate”

Templates

This will launch a QR code. Download any QR code app from the store and scan this code with your phone camera.

Click on the Website URL on the Phone (it might ask you to login with your Microsoft Account).

Click on “Open”.

Click on “Add”.

Click on the Windows icon on the Phone.

Now the certificate has bene installed on the phone.

Installing App on Windows Phone

Once the Certificate is installed in your Windows phone, it is ready install the app.

Click on “Download package”

Launch the QR code scan app in your phone.

Templates

Point the camera to the QR code of your app.

Click on the Website URL on the Phone (it might ask you to login with your Microsoft Account)

Click on “Open”. This will download the package.

Click on “Install”.

Hit the “Windows” key on your phone and then search for your app to open it.”

Deploying the app to a Windows device

There are two ways to get the app into your Windows Device:

  • Publish the app to the Windows store and through your device download it from the store
  • Sideload your app directly on to your device from Windows App Studio site.

Publishing the App in the Windows Store

Here are the prerequisites to publish your app in the Windows/Windows Phone store:

  • Dev Center Account
  • Reserving App Name and getting app info
  • Certification
  • App Screenshots

Dev Center Account

To publish the app in the Windows store, you will need a Dev Center account. If you do not have a Dev Center account already, register at either Windows Dev Center website. There is a fee for registration.

Certification

Follow the certification guidance to give your app the best chance of passing certification requirements for Windows Phone and Windows.

App Screenshots

In order to submit your apps to be published to the Windows store, you will need at least one and as many as eight screenshots from your app. The publish package contains a sample of screenshots for your app. However, you can always use your device or the emulator in Visual Studio to select the exact screenshots you want.

More information on Dev Center Accounts

Reserving App Name and getting app info

Click on ‘Dashboard’ on the top right hand corner

Click on ‘Create a new app’ you will find this on the left hand side

Templates

Type in your app name to check availability and to reserve app name

Templates

Click on “App Identity”. It will be under “App Management”

Templates

Make a note of Package/Identity/Name, Package/Identity/Publisher and Package/Properties/PublisherDisplayName. These details are important to associate your Windows App Studio app with the store

Templates

Getting the App ready to publish in the store

Click on “Settings”

Templates

This will open the Settings screen.

Templates

Update the App Title and App Description, and then select the Language.

Now click on “Associate App with the Store”. This will open the Associate App with Store screen.

Templates

Update the App Identity, App Display Name, Publisher ID and Publisher name from Windows Dev Center (Check the Reserving App Name article to understand how to get this information).

Click on “Confirm” and “Save”.

Now your app is ready to be published.

Publishing the App to the Store

Once the above details are updated in the app, the app is ready to be published.

Click on “Finish” and click on “Generate”.

This will pop-up a new window as below:

Templates

Now click on “Generate”. The build will be queued and will start generating the app.

Templates

When it is ready, click on “Download package”.

Templates

The downloaded package will contain the screenshots and the package file.

Click on the App name that you have reserved previously.

Click on “Submission 1”.

Templates

Update the details in each link and click on “Submit to the Store”.

Templates

Once your app goes through certification it will be submitted to the store.

After the information propagates through the Windows Store servers, you will be able to search for your app and download your app from the store.

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!

For additional information, please visit: How to build a localized app for Windows Phone.

How do I enable ads on my app?

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

Obtain an AdUnitId and ApplicationId keys for you App from the Dev Center

Templates

For more information about App monetization, please visit: Get started with Microsoft Advertising and Ads in Apps

Templates

Templates

Templates

How do I run "Windows App Certification Kit"?

If you plan to publish your application, you must follow the Windows Store requirements or Windows Phone Store requirements in order to pass certification.

You should use the Windows App Certification Kit (WACK) before submitting to the store. To run this tools for App Studio Packages you must follow these instructions:

Prerequisites

Install the Windows Software Development Kit (SDK) for Windows 8.1 so that you can run the Windows App Certification Kit (WACK) 3.3. This SDK will run on any x86 or x64 PC running Windows 8.1

Windows Phone 8.1

  • Rename the file from .appxupload to .zip
  • Uncompress the zip file to extract the .appx file
  • Run the WACK tool and select “Windows Phone Validation”
  • Indicate the absolute path to the .appx file you extracted previously
  • Once the tool finishes, it will ask where to store the output report as .xml

Windows 8.1

  • Install the Windows Software Development Kit (SDK) for Windows 8.1
  • Uncompress the zip file to extract the .appx file
  • You will need to run the command line version of the tool appcert.exe, located at: %ProgramFiles(x86)%\Windows Kits\8.1\App Certification Kit\ with the next parameters: appcert.exe test -apptype windowsstoreapp -appxpackagepath <PATH_TO_APPX> -reportoutputpath <PATH_TO_OUT_REPORT>.xml -resettesting

Templates

Templates