Share via


Create a Universal Application with Windows App Studio

In this article we will see how to develop a Universal App with Windows App Studio.

But what do we mean when we speak of a Universal App?

The Universal App template adds the ability to develop an application in Visual Studio 2 2013 which will run both on Windows 8.1 and for Windows Phone 8.1.  Yes. all from one single solution.  A developer may now use the same technology framework (Windows Runtime) on boptyh making it is possible to share code easily between the two applications.  The parts handling device specific operations like hardware and sensors may be separated out and the appropriate one used on any given device.
As well as enabling a common graphical user interface (GUI), styles etc. sharing code allows you to save a lot of work and cost in development and maintenance.
In business, everything comes down to money one way or another and lower cost is higher profit.
A shared code base is a stronger code base if maintenance resources are limited.

There is not an exact match in controls between the two platforms and hence the XAML must also sometimes be substituted.
In order to enable  the mix of code etc which is unique to devices and shared a Universal App solution consists of three projects, one of which is called Shared.

For those wishing to explore this new technology, here's the link to the official documentation:

Build a Windows 10 Universal App 

After this brief introduction come to us, we will see all the steps needed to create a complete and functional application.

An introduction to Windows Phone App Studio

Windows Phone App Studio is a tool designed and developed by Microsoft that allows you to create applications for the Windows platform and Windows Phone to those who never took an approach with the world development, for those unfamiliar with Visual Studio, and he never got to develop an application.

Easy to learn and easy to use, in just four steps led you will create a complete application in all its parts, one part well made and attractive graphics with the ability to test it later on a device Windows Phone and Windows 8.1, and even after the download a solution that you can edit with Visual Studio 2013 and possibly make changes if you feel appropriate.

Remember that you can also create applications for Windows Phone 8, while Windows Phone 7 is not longer supported.

But now we start to build our application.

Access the Portal

First of all we must Access the Portal with our Microsoft account; see the following link:

http://appstudio.windows.com/

Accessed through the section "Start New" we'll start with the choose the template you want, there are several each for every type of application, including a completely blank template, see image below.

 http://blogs.technet.com/resized-image.ashx/__size/550x550/__key/communityserver-blogs-components-weblogfiles/00-00-00-91-10/4604.immagine1.bmp 

Image one. The New App screen.

We choose for our example the template Empty App, in order to create an application from scratch, let's click on template and access to this screen.

http://blogs.technet.com/resized-image.ashx/__size/550x550/__key/communityserver-blogs-components-weblogfiles/00-00-00-91-10/3757.immagine2.bmp

Image two. Create App screen.

As you can see we display both the Phone and a Tablet, and also we can see in real time the changes in the interface of both devices as we create our application.

Click on the "Create" button and be taken to the first of four steps which we mentioned previously, the step 1 the "Content" section.

In this initial step, we have several sections that can be set as shown in the figure.

http://blogs.technet.com/resized-image.ashx/__size/550x550/__key/communityserver-blogs-components-weblogfiles/00-00-00-91-10/2337.immagine3.bmp

Image three. The section Content.

First we have to insert the contents of our application, which can be either static or dynamic content, the latter allows saving the contents on the cloud that every user has at its disposal when developing an application.

We note that we have a section on "Advanced sections", where there is the possibility of adding a menu or a collection. Select "collection" on the right-hand side with a click and be taken to the following page.

 http://blogs.technet.com/resized-image.ashx/__size/550x550/__key/communityserver-blogs-components-weblogfiles/00-00-00-91-10/8105.immagine4.bmp 

 Image for. The Add page Collection section.

As mentioned above we can create static or dynamic content, dynamic and we choose a name to the collection by using the text box in the upper left corner called "Section Name" and write "Capitals". After that click with the mouse on "Create New", it will serve to define the row headers of our collection, we write in sequence: "region", "City", "Description" and "image". After this procedure, we click on "Confirm" and we have a collection as shown in the figure.

 http://blogs.technet.com/resized-image.ashx/__size/550x550/__key/communityserver-blogs-components-weblogfiles/00-00-00-91-10/3817.immagine5.bmp

Image five. Our collection with all the necessary fields.

Remember that whenever you need to save your work, then click on the button "Save". Let's go back to the previous screen, but there is a difference if you notice, in the section "Main Section" you will find the collection called "Capitals, save and then click with your mouse on" Edit ", and access to the following screen shot.

http://blogs.technet.com/resized-image.ashx/__size/550x550/__key/communityserver-blogs-components-weblogfiles/00-00-00-91-10/8037.immagine6.bmp 

Image six. The Section Content.

As you can see we have two sections, "Pages" where we can customize the display of information, we can add up to seven pages and customize the layout for each choosing among the ten available.

The "Data" section to which access later, and at the bottom of the screen the "Bindings". This section contains all the information that we will upload in the Data section.

Make click with the mouse to "Data" and then "Edit Data". For convenience in this example we will upload a csv file containing the Italian capitals with images, for those who want to try to reproduce this sample application the link from which to download the file and below  http://1drv.ms/TTq55d

Once you have edited the data we have to upload the information contained in the file, to do this we select the "Import data" command, there will be a dialog box where you will be asked if you want row headings, not selecting anything as row headers we entered manually and confirm with button "Confirm". Let's select the csv file and confirm with the button "open" in the dialog box.

If the procedure has been successful, we will have this situation.

http://blogs.technet.com/resized-image.ashx/__size/550x550/__key/communityserver-blogs-components-weblogfiles/00-00-00-91-10/5621.immagine7.bmp

Image seven. The collection valued Capitals with data from the csv file.

Remember that using the Windows Preview button we can verify in real-time our application on the emulator for Windows 8.1.

Save your work if you have not already done and return to the previous screen, and Lo and behold, as I said, we're going to import the data to display in the "Bindings".

As we can see we have three basic sections "Title", "Subtitle", and "Image". If we choose a different layout, we can see that we may have more or fewer sections available, always depending on the layout you choose.

We remain with the current layout and we will enhance the property, next to each property we find three lines, let's click on it and choose from the list that shows what we want to see and see real-time emulator changes.

For "Title" choose "region", "Subtitle" choose "City" and "Image" choose "image". Run this task, save the work done.

We can if we want to add a page with the details of each city that we select from the Main Page, the procedure remains the same as that which we previously performed.

Furthermore, if we wish we can set the TextToSpeech, that will read the contents of the vocally description of capital, we can share the content with the Text and finally run the pin to start the image.

Save the work performed so far and return to the previous page in the current one, if we want Windows Phone App Studio gives us the possibility to add other content, Rss feeds, we can upload videos from YouTube, we can insert Html content, or from Face book, pictures from Flickr, Instagram and Bing, so are multiple choices to achieve a well done application functional and at the same time pleasing to the user.

At this point, the first of four steps was finished, we shall now proceed to the second of four steps.

The second step is to customize the appearance of the Background and Foreground, there are three choices, the "Custom Style" as complete as that gives the possibility to change the background color of the text and the application bar and add a Background image, the second "Dark Style" change dark background and light text and the application bar of dark colors the last "Light Style" will perform the opposite of "Dark Style" with the only difference that the color of the application bar will be gray in color.

There only remains to choose the theme you prefer, always save the work done until now and continue with the third of four steps.

The third step is devoted to Tiles of our application, we can choose between three types of Tiles, the first and the "Flip Template, this template offers us the possibility to display the application icon on the front side of the tile, and the back show any information we have maintained in our application as push notifications, as you can see we have several things to manage for this template , the name of the Tile, set the two images a Small and Normal, to instead go back to Back title (the title on the back of the Tile), Back Content (the content on the back of the Tile) and the possibility to select a background image (Back Image). Remember that for images we can choose or from our Pc, or from resources One drive Windows Phone App Studio, important thing and comply with the resolution request because the system does not automatically adjust the resolution for us.

The second type of Tiles and instead "Cycle Template" — we will have a scroll of nine images if we position or you will place the Tile of our application in Start screen on your phone. Also in this case we have to develop some fields, "Tile", choose a Small Image "as explained previously in the procedure of selection of an image and to be able to display and activate the scroll we should assign to the section" Image Source "collection created if we recall from step one.

We will choose this template Monster below, how would our application once valued all necessary steps.

 http://blogs.technet.com/resized-image.ashx/__size/550x550/__key/communityserver-blogs-components-weblogfiles/00-00-00-91-10/3326.immagine8.bmp

Image eight. The Tiles, with the Cycle selected template.

The last type of Tile and "Iconic Template" that is the view of the image in the center of the Tile, where we insert a title, while the icon and the image we already in that was chosen and selected for the Cycle template, we have the opportunity to enter additional text that will be displayed on the Wide tile or that rectangular, as you can see we have three fields to be completed , the "Wide content 1", "2" Wide content and content 3 "Wide, which once exploited will have textual content displayed. We chose the Cycle type Template, we have enhanced everything you need, right now we can only save "always" the work performed so far and move to the last step.

The last step "Publish Info" is necessary in order to enter all the information you need for the publication of our application on store Windows and Windows Phone. But let's see what we find once logged on to this step.

 http://blogs.technet.com/resized-image.ashx/__size/550x550/__key/communityserver-blogs-components-weblogfiles/00-00-00-91-10/4426.immagine9.bmp

Image nine. Publish info section.

To finish the process of creation of our application we have to fill out the last steps required.

The first step is set if we did not run an image of our application, represented in the figure with the Windows icon (top left), a title of our application must identify in their store Windows and Windows Phone, put if you want an overview of what our application does and what is filling in the section "App description "Select the main language supported in our application by choosing one from the "Language" combobox.

We can include a page going to drag from left to right control Toggle switch "section Includes about page" to include in our application information page where you will see what we wrote in the section "App description".

Other steps required are the Association of two applications to publish our application on both the store and enter the privacy/policy of our application, in the latter case, if you create will be performed automatically by the system.

For the binding of your application you must log into your dashboard and reserve the name for your application, for more details, here's the link to the official documentation

 http://appstudio.windows.com/Home/HowTo#publishW81

Once you have finished this procedure, we return to our project and make click with the mouse on "Associated with the App Store" and be taken to the following page.

 http://blogs.technet.com/resized-image.ashx/__size/550x550/__key/communityserver-blogs-components-weblogfiles/00-00-00-91-10/7522.immagine10.bmp

Image ten. The section Associated with the App Store.

Here we will put all the information you need for our application once we have reserved the name in our Dashboard.

Last step if we want is to enable the inclusion of banner ad "Enable client" by enabling the feature, and then by clicking with the mouse on "Microsoft pubCenterdata".

We will be taken to the following screen shot.

http://blogs.technet.com/resized-image.ashx/__size/550x550/__key/communityserver-blogs-components-weblogfiles/00-00-00-91-10/8883.immagine11.bmp

Image eleven. Microsoft pub Center date section.

Before you complete this step, you must go to your dashboard pubCenter, create a new ad unit and once you create will be issued all necessary data that you must then enter in the text boxes on this page.

After this procedure, confirm the changes by clicking on the "Confirm" button. Remember that this step is not compulsory but optional.

After completing the steps we do click always on save to save the work performed, and finally we can make click with the mouse on "Finish".

We'll get to this screen where we previewed the final for both Windows Phone for Windows 8.1, top as you can see if we created an application of type side-loaded requires installing a certificate, all the necessary steps and brought to official documentation http://blogs.msdn.com/b/windows_app_studio_news/p/new-certificate-instructions.aspx.

At this point we can only make click with the mouse on "occurred.

http://blogs.technet.com/resized-image.ashx/__size/550x550/__key/communityserver-blogs-components-weblogfiles/00-00-00-91-10/6403.immagine12.bmp

Image twelve. The Generated App section.

Select Windows Phone and Windows 8.1 , the Generation type select "Installable packages", if we wish we can also add any comments regarding our application.

After completing the steps click with the mouse on "Generate". If everything went fine we have 3 ability to download our application as it appears on the final page of the portal.

Conclusion

You can download the package and install it on our phone, pc or tablet immediately, a package that we can if we send straight to complete the certification process, or even the ability to download the source code so that you can later edit with Visual Studio. Remember to have the template "Universal App" you must have the Visual Studio update2 2013 so as to be able to edit the solution and make if we consider appropriate changes that we still have in anticipation.

Finally Windows Phone App Studio is a great and powerful tool that allows us to create complete applications and quality for both Windows Phone 8, both for Windows Phone and Windows 8.1 , all without writing a single line of code, so even someone who has no experience of programming on these platforms is perfectly able to develop your application in just four simple steps , whereby developed developed developed :)