Windows Phone App Studio – Part 4 – Azure Services

Azure and Windows Phone App Studio

Finally! The Azure tutorial is here! This is a simple way to set up your App Studio apps to use your Azure Mobile Services rather than the standard data collection that come with an App Studio Project.

Lets dive in. (UPDATED NOVEMBER 14th 2014)

Azure setup

First you need to sign in or sign up for Microsoft Azure. If you do not know what Azure is or do not have an account, head on over to sign up page for a free trial.

Once you are all set up, login to your Management Port on Microsoft Azure.

Once in click NEW-> COMPUTE -> MOBILE SERVICES -> CREATE to start the Mobile Service wizard.

create mobile services

From there, you are prompted to create a Mobile Service.

create-mobile-service-step1 create-mobile-service-step2

Fill out your URL, choose an existing DB or create a new one.

Once the service and database has been created we can go ahead and create some tables and configure our service.

In order to add tables you will need to find you Mobile Service that you just created. Open it and click on the navigation link called “DATA“.

Click on the PLUS icon on the bottom to create a new table.


To make things a bit easier, what you name your table is what the new classes and view models can be called. In my example I called it MenuItems since it will contain ALL items on the menu.

Once the table is created we need to add a few columns. If you recall from our Data Collection in App Studio, we needed Item, Description, Price and Image. We will use those but also add MenuType. MenuType will be our “Foreign key” that will distinguish the data record for the type of the item it is. (Apps, Entres, Desserts..).

Click on Columns to add columns to your table.







Now, you can create a few tables if needed but for this example I am just creating one. However, we need to add some data to it. You can do this a few different ways, web client, SQL Data Tools or via Visual Studio. I chose Visual Studio.

I connected to my azure account within Visual Studio 2013 using the connection settings found in the Azure portal.

From within Visual Studio I am able to add a few rows to my table.
The data I added is the same as the collection.

We are done.

Connecting to Azure

In order to access our Mobile Service we need to have a client as well as our keys. You can find that on the Mobile Service page under either Dashboard or if you still have the startup screen, you can find the URL and the API Key.




Open up your solution in Visual Studio 2013 and lets do some setup first.

As you may remember, we generated a Universal App for Windows. In the solution we have a few projects, AppStudio.Windows, AppStudio.WindowsPhone, AppStudio.Shared and we also have 2 Portable Class Libraries (PCL’s).

When I first started to build the Azure example, I put everything in the Shared project. I loaded the client in the App.xaml.cs and created a MenuItem class and called the client from the EntresPage.xaml. This works. But you don’t get all of the inherited features of the base view models.

The first step is to add the Microsoft Azure Mobile Services pack.

In order to do this right click on the AppStudio.Data portable project and choose Manage NuGet Packages.

Search for Windows Azure or Mobile Services. You want to install the Windows Azure Mobile Services SDK.

Before we jump into the code, lets recap what we want to do. Right now the project is using a Data Collection that is limited by 40 rows. The way our application works is we have many menu categories (Entres, Desserts, Apps etc.) and each has to have its own Data Collection. We are changing that to have just 1 collection and use our own defined data table on Azure.

If we look at the project we see the Model View ViewModel pattern and we will be using that for our examples. I am going to change the Entres page for now but you can apply this to all of the pages.

Lets open the WindowsPhone project and under Views, open EntresPage.xaml.cs. Find the OnNavigatedTo method. There should be a call to LoadItemsAsync. This is the main method that we will be changing to point to our Azure table, not the one that is included in App Studio.

Before we change that we need to add models, datasource and modify the xaml.


Copy the EntresSchema.cs that is located in AppStudio.Data.DataSchemas and rename it to MenuItemSchema.cs. Make sure you change the class name to MenuItems (remember, this is the name of your table you created in Azure).

We only need to add one more property called MenuType. Do that along with the accessor methods. Be sure to add that to in the GetValue method as well.


The next step is to create an interface for our AzureDataProvider (which we need to create still).

Add a file to the Common directory and name it IAzureDataProvider.cs

Now we are ready for our AzureDataProvider.cs


Create a class in the DataProvider directory called AzureDataProvider.cs

This class will have our mobile client connection as well as our Linq query to get the table.

The first couple of lines are the connection to our mobile client. That code is given to us from the Azure Portal on the Mobile Services page.

The next 2 lines are our MobileServicesCollection, that is where our data will be stored. The other line is our “table” which we will query from.

The Load method is just that. It takes the MobileServices Table and performs a query against it to find matching records which will be returned to the calling method.


Lets move to the DataSources directory and take the EntresDataSource.cs and copy it and rename it to AzureDataSource.cs. Remember to rename the class to AzureDataSource.

The Interface bindable element needs to change to MenuItems (what we just created). While we are at it, lets change it as well for the LoadData and Refresh methods as well.

We are not going to use the _appId or _dataSourceName, you can comment those out.

Change the cache key to AzureDataSource.

Now we just need to modify the load method to use our newly created data provider and we are done with the PCL file.

All we really changed was the service call. Instead of using the ServiceProvider we are using our custom Azure Provider.

Item to note, you will see that I am “hardcoding” entres into the Load method of my provider. That is because I did not load all of my data in the one table. I could easily pass it in as a parameter. I would do that in the LoadDataAsync method and in the interface IAzureDataProvider. When I call that method from my view model I can just pass in the proper menu type.

The PCL portion is DONE! Onward to the Views!


Lets build the ViewModel. Copy EntresViewModel.cs over to MenuItemViewModel.cs in the AppStudio.Shared project. Just a couple of changes here.

Make sure MenuItem is being referenced in stated of EntresSchema. Add the following reference to our CreateDataSource and that is about it.


Go to Windows Phone project and open the Views->EntresPage.xaml.cs file. A few little changes. Lets start with declaring our View Model.

You can add that right about the current view model (EntresModel). I am keeping the property name the same to avoid editing the XAML

Then change the EntresPage() method to call our new model.

The main method that kicks everything off is the OnNavigatedTo. In there we looked at the LoadItemsAsync method which, for lack of better term, loads items.

One more item to add, right click on the Windows Phone project, click manage NuGet packages and add the Windows Azure Mobile Services like you did for the PCL.

That is it! Run it and you are now accessing your own Azure Mobile Services for Data Storage.