Application Insights User Guide

First step is Log-in to

In the left pane Click on Browse option, then select Application Insights then Application Insights sources will display and choose your Application Insights source


This is how your Application Insights Dashboard will look like


The Dashboard includes the following Items

1. Essentials

2. Application Overview

3. Metrics Explorer

4. Sessions

5. Crashes

6. Custom Events( If you create any)

7. Top Sessions by Country

8. Top Devices

9. Session Duration

10. Top Crashes

11. Diagnostic Search

12. Alert Rules( If you create any)

13. Events


It contains the information about the Application Insights resource which includes Resource group, Application Type, Location, Subscription name, Instrumentation Key (Which is the Key for Telemetry data) and Subscription id.


Application Overview

It contains the Graphical Representation of USERS, SESSIONS, PAGE VIEWS, and CRASHES data



Click on Users to view USERS data


It displays the Total no of Users and New Users and it also displays the users by Geographic location which is unique count of users by country or region.

If you click on USERS chart, you can customize the chart as per your needs. You can show it like Line, Area, Bar and Grid. You can add Chart Height, Add Grouping and do many more.


If you want to look at what are all the activities performed by United States region app users, then click on United States, it will display all the actions performed by the users which contains number of PAGE VIEW, CUSTOM EVENT, EXCEPTION, REQUEST AND DEPENDENCY.


If you click on any activity it gives more information regarding the user and much more information. Below picture includes all the information.


If you want to know more information just click on ‘…’ button it will give you more information.



You can add filters in the Chart to get the specific results as per your required criteria.


You can specify a Time range to see the results data in a particular time period.


Add Save Favorite

You can add favorites to your dashboard so that you can quickly view the favorite items.


You can view the favorite’s items in your dashboard.


Page Views

This segment contains the total number of page views of your app. If you want to see more about Page Views just click on PAGE VIEWS in the Application Overview.


In PAGE VIEWS section it also contains the information about all the pages in the app and the number of page views, number of users and the number of sessions for each page.


If you click on any Page name it will gives you more information about the specific page you selected.


If you click on any particular page view it will give you more information about the page from where it has been accessed and the client IP address.


If you click on ‘…’ then you will get more information


Here also you can Add chart, Time range, Filters, Alert Rules, Save favorites.



A session is nothing but the amount of time used an app by the user.

It contains all the session information about the app that has been using by the users. Session includes the time


Custom Events

Custom events are created by developer. By inserting code to send custom events from your app, you can track your users’ behavior and the usage of specific features and scenarios.


If you select any Custom event it will give you more information about the specific Custom event metrics.


If you click on any custom event it will navigates to Custom Event properties windows and if you click on All telemetry for this user session under Related Items it will give you more results.



There is 1 Exception in the results, if you click on the it will give you the exception properties which contains more info about the exception which includes the information in the given picture.


Top Sessions by Count.

It will give the overall view of your app users in the different country across the world.


Top Devices

It will give you the top devices of customers which are using your app.


If you click on any device it gives more information about the operations performed by the device, which includes the number of users, number of sessions, session duration and the crashes count if there are any. It will locate the country or region of the device.


Diagnostic Search

It includes all the information of application at one place.


Alert Rules

Using Alert Rule you can track whenever there is any huge traffic or if any exception occurs in the app. There are certain types of metrics that you can create alerts for them. If there is smoothing happens as specified in the metrics for that alert it will notify to the email id which was given during the creation of alert.


Application insights for Windows Phone and Store apps

Azure Application Insights lets you monitor your published Mobile apps


  • A subscription to Microsoft Azure
  • Visual studio 2013 or later

Create an Application Insights resource

Log in to your azure portal.

In the azure portal, create a new Application Insights resource.


Select Application Type as Windows Phone Application (here you can choose in whichever the application you want to implement Application Insights, In my case it is Windows Phone Application)


Click on Create Button, It will create the Application Insights resource. A resource in Azure is an instance of a service. This resource is where telemetry from your app will be analyzed and presented to you.

Copy the Instrumentation Key

The key identifies the resource. You’ll need it soon, to configure the SDK to send the data to the resource.


Add the Application Insights SDK to your apps

In Visual Studio, add the appropriate SDK to your project.

If it’s a Windows Universal app, repeat the steps for both the Windows Phone project and the Windows project.

Right-click the project in Solution Explorer and choose Manage NuGet Packages.


1. Select Online, Include prerelease, and search for “Application Insights”.


2. Pick the latest version of the appropriate package – one of:

  • Application Insights for Windows applications – for Windows Phone and Store apps
  • Application Insights for Web Apps
  • Application Insights API – for Windows desktop apps

3. Edit ApplicationInsights.config (which has been added by the NuGet install). Insert this just before the closing tag

Code Snippet
  1. <InstrumentationKey>the key you copied</InstrumentationKey>

Windows Universal apps: Repeat the steps for both the Phone and the Store project.


Enable network access for your app

If your app doesn’t already request outgoing network access, you’ll have to add that in the manifest as a required capability.


Run your Project

Run your application with F5 and use it, so as to generate some telemetry.

In Visual Studio, you’ll see a count of the events that have been received.


See Monitor data

Open Application Insights in your azure portal you just created you will be able to see some data in your Application Insights dashboard


Track Usage

From the Overview timeline, click through Users and Sessions charts to see more detailed analytics.

Users are tracked anonymously, so the same user on different devices would be counted twice.

A session is counted when the app is suspended (for more than a brief interval, to avoid counting accidental suspensions).

Page Views

To discover the paths that users follow through your app, insert page view telemetry into your code:

Code Snippet
  1. var telemetry = new TelemetryClient();
  3.             telemetry.TrackPageView("HubPage");

See the results on the page views chart, and by opening its details:


Click through any page to see the details of specific occurrences.

Custom Events

By inserting code to send custom events from your app, you can track your users’ behavior and the usage of specific features and scenarios.

For example:

Code Snippet
  1. var telemetry = new TelemetryClient();
  2.             telemetry.TrackEvent("AppStarted");

The data will appear in the Custom Events grid. You can either see an aggregated view in Metrics Explorer, or click through any event to see specific occurrences.


If you want you can also set up some properties and metrics along with the TrackEvent(). Below code explains how to set up properties and metrics.

Code Snippet
  1. var properties = new Dictionary<string, string> { { "IsSuccess", result.IsSuccessStatusCode.ToString() }, { "StatusCode", result.StatusCode.ToString() },
  2.                                                                     { "PlanogramId", completeOrder.PlanogramId.ToString() } };
  3.                 var metrics = new Dictionary<string, double> { { "RestockOrderAPI Process Time", stopwatch.Elapsed.TotalMilliseconds },
  4.                                                                 { "Products Count", completeOrder.linesList.Count() }};
  5.                 App.telemetry.TrackEvent("RestockOrderAPI", properties, metrics);

So, when you go to the dashboard in the Custom Events  you will ale to see the track event you created by the code and you will able to see the properties and metrics attached with the track event api.

Screenshot (218)


And if you want to see the attached properties of that particular event just click on it view more information.

Screenshot (219)


Track Trace

Use this to help diagnose problems by sending a ‘breadcrumb trail’ to Application Insights. You can send chunks of diagnostic data, and inspect them in Diagnostic search.


Code Snippet
  1. var properties1 = new Dictionary<string, string> { { "message", result.RequestMessage.ToString() } };
  2.                 App.telemetry.TrackTrace("RestockOrderAPI Track Trace", properties1);

If you want to see the trace results, just open your AI resource and click on Diagnostic Search there you can see the number of traces has occurred.

Screenshot (220)

Screenshot (222)

Detecting Exceptions

Exceptions are reported to Application Insights by calling TrackException()

Code Snippet
  1. var telemetry = new TelemetryClient();
  3.             try
  4.             {
  5.                 //put your logic here
  6.             }
  7.             catch (Exception ex)
  8.             {
  9.                 // Send the exception telemetry:
  10.                 telemetry.TrackException(ex);
  11.             }



Debug vs Release mode


If you build in debug mode, events are sent as soon as they are generated. If you lose internet connectivity and then exit the app before regaining connectivity, offline telemetry is discarded.


If you build in release configuration, events are stored in the device and sent when the application resumes. Data is also sent on the application’s first use. If there is no internet connectivity upon startup, previous telemetry as well as telemetry for the current lifecycle is stored and sent on the next resume.

Monitor Crash Frequency

If your users experience crashes in your app, you’d like to know about it quickly, and you’d like details about what happened. With Application Insights, you can monitor how frequently crashes occur, get alerts when they occur, and investigate reports of individual incidents.

“Crash” means that the application terminates because of an uncaught exception. If your app catches an exception you can report it with the TrackException() API but continue running. In that case, it will not be logged as a crash.


Set an alert to detect crashes


Click on Alert Rules and then Alert Rules menu will open, in that select Add Alert


Diagnose crashes

To find out if some versions of your app crash more than others, click through the crashes chart and then segment by Application Version:


To discover the exceptions that are causing crashes, open Diagnostic Search. You might want to remove other types of telemetry, to focus on the exceptions:


Click any exception to see its details, including associated properties and stack trace.


See the other exceptions and events that occurred close to that exception:


Using Diagnostic Search in Application Insights

When do you see Diagnostic Search?

You can open diagnostic search explicitly:


Inspect individual items

Select any telemetry item to see key fields and related items. If you want to see the full set of fields, click “…”.


Filter event types

Open the Filter blade and choose the event types you want to see. (If, later, you want to restore the filters with which you opened the blade, click Reset.)


Filter on property values

You can filter events on the values of their properties. The available properties depend on the event types you selected.


Steps to implement TelemetryApp in Windows Store apps using API:


1. Create Telemetry account (
There are two types of telemetry accounts
Telemetry Enterprise Edition – It is a premium account offering by telemetry. For more information Enterprise Edition account page.
Telemetry Community Edition – It is a free account which has very limited features to provide a preview of telemetry for new organizations. For more information please see our Community Edition account page.
telemetry comunity Account

2. After Successful login in to the, initially you will be prompted to add a Board.

create board
A Board (dashboard) is a collection of widgets linked to metrics organized across a user determined layout. Below is an example screenshot how a board looks after adding widgets.

view board


After successful creation of board now we need an agent to communicate with the board.

– Go to Agents tab and select Add agent

Add Agent

– Give a name and click on create

Agent Name

– Copy the Agent token to secure place, you will not be able to see it again.

Agent API tocken


Boards contain widgets. A widget may be a chart, a number or simply a box to contain other widgets

Adding a widget to the board:

a. Select Add Widget option right above board properties

Add properties

b. Now select a widget which is suitable for your application.

sample widgets

c. After adding widget the board looks like below

view widget


Flows are objects that represent the flow of metrics within Telemetry.

widget properties

Adjusting Board Properties:

Here you can title your Board and adjust the settings, or properties, of your Board.

board properties

Widget Properties:

After adding Flows to your Board, you can select a Flow and edit the properties of the selected Flow.

view widget properties


  • All your widgets on a board can be found as a list of layers under the Layers tab.


  • Each widget box can be moved around, resized, and even layered.
  • Select a widget you want to adjust, and on hover you can see options to drag out and resize your box or to move it.
  • You can even have just one or two very large widgets on a board.

Adding a Logo:

  • The best way to personalize and brand your board, is to add a custom logo to your board.
  • From our Image widget, upload an image of your logo directly to your board if you have a paid plan with us.
  • You can then change the background color of the Image widget so your logo looks its best.

Board Backgrounds:

  • Add an image or color background to give your board(s) a custom theme.
  • Adjust your widget background color and opacity so your widgets and background are visible.

Widget Background:

  • Adjust your widget background color and opacity so your widgets and background are visible.

Board Layout:

  • Do you want to create 5 tidy columns on your board but notice you have extra space or one column is smaller or larger than the others? You can adjust the number of rows and columns your widgets snap to under Board Properties.

3. API
a. Accounts:

The account object represents your account. Typically you’ll see this referenced by other objects. This is a read only object.

Account Object




A globally unique static string identifying the object.


The name of your account.


The contact email address.


The contact phone number.


API soft limit.


API hard limit.


API usage of the last 24 hours.


API usage of the last hour.


Users limit.


Boards limit.


Agents limit.


Viewers limit.


API version.


The plan of your account.


The plan expiry date (if any).

To read Account Details


This method will return your current account.

For Account Update


This method will update your current account.

b. Boards

The boards object represent the boards (dashboards) within your account.

Boards are collections of widgets and their flows contained together for display.

Board Object




A globally unique static string identifying the object.


The name of the board.


The theme for the board.


The number of columns in the board grid.


The number of rows in the board grid.


An array representing the native size of the board.


A string with the aspect ratio of the board.


Whether to show the board name at the top of the board or not.


The tag for the default channel for the board.


The external margin of a widget, defaults to 3.


The internal padding of a widget, defaults to 8.


The size of the font to use, can be ‘small’, ‘normal’ or ‘large’.


The font family to use, defaults to ‘normal’ which uses the theme default.


The background color of the board.


The background image URL of the board.


The background color of the widgets.


The color of the widgets’ titles.


The size of the widgets’ titles.

Boards Listing


This method will return a list of all boards on your account.

Board Details


This method will return a specific board on your account by id.

Export Board


This method will return a specific board on your account by id and also its widgets details.

Create a Board


This method will create a new board.

Import a Board


This method will create a new board and widgets based on the json input.

Update a Board


This method will update a board object.

Delete a Board


This method will delete a board object.

c. Widgets

Widgets are mostly hidden from the Telemetry web interface however they’re

Critical elements to position flows within a board.

Widget Object




A globally unique static string identifying the object.


A globally unique static string identifying the board that the widget belongs to.


The variant of the widget: barchart, box, bulletchart, clock, compass, countdown, funnelchart, gauge, graph, grid, icon, iframe, image, log, map, multigauge, multivalue, piechart, scatterplot, servers, status, table, text, tickertape, timeline, timeseries, upstatus, value, video, waterfall, weather.


The column of the top left of the widget on a board.


The row of the top left of the widget on a board.


The width of a widget in columns.


The height of a widget in rows.


The layer sorting order of the widget within the board.


The background color of the widget. Possible values are:
“default” => The background will be dark/light depends on the selected theme of the board
“none” => Transparent background
Hex code (e.g. #09ab3f) => Hex code of a color.


An optional parameter that specifies a specific renderer to use. Things like changing a line chart from a spline to an area. See the renderer options below.

List all Widgets


This method will return a list of all widgets on your account.

Display a Widget


This method will return a specific widget on your account by id. It also return an array of flows for the default channel of the board. There’s an optional channel_id parameter to return the flows for that channel instead of the default.

Create a Widget


This method will create a new widget.

Update a Widget


This method will update a widget object.

Delete a Widget


This method will delete a widget object.

Renderer Options

Different Widgets support different renderer options. You can select the renderer using the Telemetry Manager when designing a board. When embedding a specific widget however in order to use something other than the default renderer you must specify it in the embed tag.

The following renderer options are supported for the following flow variants:




gauge, heading


circle, combined, vertical, horizontal


line, spline, area, bar, scatter


equal, number, label, icon


spline, line, bar, area


line, spline, area, bar, scatter

4. Implement telemetry in Windows store or Phone app using API

In this article I am using bar chart to explain how to implement in windows store apps. The procedure is same for all widgets.
Bar Chart:

A bar chart is a stack of horizontal bars, each with a label, value and colour. The value determines the length of the bar. The bars will be sorted from top to bottom in terms of length by default. You can choose to turn off sorting. Send data with a hash of bars containing an array with each bar as a hash. Bar charts can display a maximum of 20 bars. There may be less than 20 shown if your widget box is too small. Resize your widget box if all your data is not being displayed.








array of objects

The bars



CSS color

The color of the bar.




The text to overlay on top of the bar.




A number representing the value of the barchart. This will determine the length of the bar.




The min possible value of the bar.




The max possible value of the bar.




Whether to sort the bars by value or not. The default is true.

– Adding a Bar Chart into board.
Log in into, go to boards and select edit board.

edit board

– Now click on add widget, under charts select Bar Chart.

add widget bar chart

select bar chart

After adding Bar chart into board, select the bar chart on board, now go to widget tab in properties window and expand general tab.

bar chart properties

Copy the Flow Tag to a note pad.

bar chart flow tag name

Now we have a widget to display the flow data on board.

5. Create a Windows store or Phone app (Phone 8.1 or Windows 8.1) project in visual studio to send flows to bar chart from windows app, in my example I created a Universal Hub App project.

create windows store app

Open HubPage.xaml.cs, under load state method write the following code to send the flow data to recently created Bar Chart.

To use API we need the following information

  • URI
  • API Token (refer step 2 under Agents)
  • Flow Tag (In earlier step we copied flow tag for bar chart)

URI = “ Tag/”;

For Authentication/Authorization we need to pass Agent Token as user name and password as blank in POST method.

Prepare list of bars information:

In this example I am using bar chart 

public class Bar
            public string color { get; set; }
            public string label { get; set; }
            public int value { get; set; }

        public class BarRootObject
            public List<Bar> bars { get; set; }


BarRootObject barRootObject = new BarRootObject();
            barRootObject.bars = new List<Bar>();
            var bar = new Bar();
            bar.color = "#66CC00";
            bar.label = "Users";
            bar.value = 4;

            bar = new Bar();
            bar.color = "#FF8900";
            bar.label = "Sessions";
            bar.value = 30;

            bar = new Bar();
            bar.color = "#FFFF33";
            bar.label = "Crashes";
            bar.value = 26;

            bar = new Bar();
            bar.color = "#FF0000";
            bar.label = "Exceptions";
            bar.value = 75;

In above code I am passing four bars information which include colour, label and value (If you want to know/pass more properties info please refer Bar charts Flow Object table above).

POST Method:

string URI = ";;
            HttpClient httpClient = new HttpClient();
            httpClient.DefaultRequestHeaders.Authorization = CreateBasicHeader("**Replce with Agent Token**", "");
            metrics metric= new metrics();
            metric.values =new int[]{10,70,25,5};
            metric.labels = new string[] { "A", "B", "C", "D" };
            metric.colors = new string[] { "#1F1F33", "#669900", "#7A0000", "#334C4C" };
            string postData = JsonConvert.SerializeObject(metric);
            StringContent c = new StringContent(postData, Encoding.UTF8, "application/json");
            httpClient.MaxResponseContentBufferSize = 100000;
            var result = await httpClient.PostAsync(URI, c);
            var content = await result.Content.ReadAsStringAsync();


Method for creating Authentication Header Value:

public static AuthenticationHeaderValue CreateBasicHeader(string username, string password)
            byte[] byteArray = System.Text.Encoding.UTF8.GetBytes(username + ":" + password);
            return new AuthenticationHeaderValue("Basic", Convert.ToBase64String(byteArray));

6. Run the App

Now go to telemetry dashboard and check the bar chart has added four new bars with values.

bar chart with bars info

New Windows Phone 8.1 OS Features


Microsoft updated its mobile game against Apple and Google with a few additions to its Windows Phone OS. At its Build 2014 Developers Conference in San Francisco, Microsoft unveiled Windows Phone 8.1, an update to its mobile OS that introduces a Siri-like Cortana service, a new app store and one-swipe access to Action Center — a spot to view notifications from any app and access phone settings.

There are lot of new additions to keep Windows Phone fans happy, but developers and enterprise also will be pleased that the new OS is now free on all sub-9-inch devices and comes with a bevy of mobile-device management capabilities.

Microsoft said it will release the Windows Phone 8.1 preview software to developers on April 14, and consumers can expect to see it in the April and May time frame.  Here is a closer look at 10 of the coolest new features Microsoft brings to its mobile OS.

1. CortanaYour PERSONAL Digital Assistant

Powered by Bing, Cortana is the only digital assistant that gets to know you, builds a relationship that you can trust, and gets better over time by asking questions based on your behavior and checking in with you before she assumes you’re interested in something. She detects and monitors the stuff you care about, looks out for you throughout the day, and helps filter out the noise so you can focus on what matters to you. Cortana will launch shortly in the U.S. first as a “beta,” and then will launch in the US, the U.K. and China in the second half of 2014 with other countries to follow afterwards into 2015.


In Windows Phone 8.1, you get to Cortana by either a Live Tile on your Start screen or by pressing the search button on your device. This will take you to Cortana Home. To interact with Cortana, you can either speak or type—if you’re in a meeting, just type and Cortana won’t talk out loud. But if you ask her a spoken question, she’ll answer verbally and even carry on a natural conversation.

When you interact with Cortana for the VERY first time, she will start learning things about you… like your name, how to pronounce it, and ask for some personal interests.

2. Enterprise-Friendly

Microsoft warms up to the enterprise with new customizable mobile-device management enrollment options and support for more MDM policies. Also added is VPN and S/MIME support. Other key MDM enhancements include the ability to configure Windows Store app whitelists or blacklists, URL filters and Enterprise Mode for Internet Explorer settings.

3. Action Center

Live Tiles are a great way to “glance and go,” and now Microsoft has added Action Center to enable you to see notifications from ANY app – pinned or not—and to give you a customizable way to quickly access the settings you care about most, like Wi-Fi, Flight Mode, Bluetooth and Rotation Lock.

action centre

4. Windows Store Update

The Windows Phone app store gets a redesign that provides faster access to apps. The Windows Store app is now pinned to the taskbar by default. You also can now find, discover and run apps straight from the Start menu on Windows 8.1.


5. Windows Phone’s Four New Senses

Data Sense lets you track how much data usage you use in a given month and will give you a breakdown of usage by app so you can see which app is using the most of your data. As you near your data limit, Data Sense will more aggressively offload data to Wi-Fi and limit cellular usage… and in 8.1 there’s a new “high savings” mode that cranks up the compression of images as you browse the web so you can browse even farther using less data than WP8.


Wi-Fi Sense will automatically connect you to free public hotspots it finds to help you save cellular data. And, if you’d like, you can opt-in to automatically and securely enable your friends and contacts to auto-connect to your home Wi-Fi, so they can use the internet connection at your house without hassling you for the password and typing it in manually. If you turn off Wi-Fi in Wi-Fi Sense, you can have Cortana automatically turn it back on when you reach one of your favorite places as identified in Cortana.


Storage Sense to help you get the most out of the memory and storage on your phone. It will help you manage content you have on an SD memory card if your device supports those. You can also move content – like apps, music, photos – between the storage built in to your device and an SD memory card.

storage sense

Battery Saver gives you a clear breakdown of how apps are using your battery so you can make more informed usage decisions. With “automatic mode” enabled, it can dramatically extend your battery life.


6. Calendar

Microsoft gives Calendar a much-needed update, now allowing you to swipe through dates left to right along with adding one-week views. Small weather icons populate the dates. Also, Cortana integrates with calendar so you can schedule events through voice commands.


7. Internet Explorer

The mobile version of Internet Explorer 11 heads to Windows Phone 8.1, adding HTML improvements such as in-line video playback and adaptive bit-rate streaming. The addition of IE 11 also adds InPrivate tabs, password caching and a new Reading View mode.

8. Customization(Lock Screen)

Microsoft clearly spent time adding personalization tools that allow you to do things such as deeper customization options for home screens. Now you can add more tiles, customize images or customize the colors of live tiles. The lock-screen also can be customized with a host of new lock-screen themes that include images along with animations. The start screen allows three columns of tiles instead of two.


9. Word Flow Keyboard

keyboard in Windows Phone is smart enough to learn your writing style and even knows the names of people in your contacts for faster typing. Best of all, our new Word Flow Keyboard lets you glide your fingers over the keys to type INCREDIBLY quickly…

word-flow-keyboard lumia

10. Start Screen


MVVM Light–Visual Studio 2013, Universal Apps, Windows Phone 8.1, Windows Store 8.1 Apps–Part 3 of N

In this part 3, let us see how to build a Universal Application for Windows Phone 8.1 and Windows 8.1 with MVVM Light support. We will also learn how to create a shared viewmodel layer, how to detect design mode and what the result is in Blend and at runtime.

In Part 2, we created a Universal Phone 8.1 app that still uses all the components present inside the project. We will use MVVM Light toolkit and remove some of the classes we created as well as code written in code behind files. Then we will make this a truly Universal App, which can be created for Windows Phone 8.1 and Windows 8.1.  This offers a nice way to structure your app in order to share as much code and other files (Views, View Models, etc) as possible. It makes it easier than ever to create apps which target both the Windows Phone 8.1 and the Windows RT devices like Surface, XBox.

MVVM is the design pattern used to develop apps in Windows Store apps as well as Windows Phone apps. Lets use MVVM Light framework to develop a windows store app. You can get the latest MVVM Light toolkit from

Creating the Application

Step 1: Open the project created in Part 2 using Visual Studio 2013.
Step 2: Right click on the References folder in the Windows Phone 8.1 application, and select Manage Nuget Packages.
Step 3: Select the Online source for Nuget and search for MVVM Light.
Step 4: Select the package MVVM Light Libraries only. Alternatively you can select the package named MVVM Light Libraries Only (PCL). This will install the exact same binaries and eventually I will remove this package and keep only the main one.
Step 5: Repeat steps 2 to 5 for the Windows 8.1 application.
Step 6: At this point, you have added MVVM Light support to both your applications as shown in Figure 1. Now we can add the files that will bring the full support for the ViewModel layer and the design support.


Figure 1: MVVM Light libraries referenced in Universal Projects in VS 2013

Adding ViewModel Layer:

it’s time to instantiate and create the ViewModels. This is the ViewModelLocator class task. This class is quite important in the application structure enabled by MVVM Light. It’s created as a XAML resource in the file App.xaml. This creates the important link between XAML markup and source code, allowing the visual designers to create the ViewModels and to run the design-time code. Lets create two files ViewModelLocator and the MainViewModel.

Adding ViewModelLocator & PersonViewModel:

The main task of ViewLocator is to link up your views with the view models. It’s responsible for creating and disposing of all of your View-Models. In this ViewLocator, mostly we just add additional views. Let’s do that.

The main task of ViewLocator is to link up your views with the view models. It’s responsible for creating and disposing of all of your View-Models. In this ViewLocator, mostly we just add additional views. Let’s do that.

Step 7: Right click on the Shared node and select Add, New Folder. Name this folder ViewModel.
Step 8: Right click on the new ViewModel again and select Add, New Item. Select a Class, and name it ViewModelLocator.cs
Step 9: Modify the ViewModelLocator code to look like in the code segment 1 below.
Step 8: Move the class PersonViewModel.cs from Windows Phone 8.1 to ViewModel present in shared node.
Step 9: Modify the MainViewModel class to look like code snippet 2 below. Of course you can add a bunch of new methods, observable properties and commands to this ViewModel as usual in MVVM.

Here I created PersonViewModelProp property that returns an instance of PersonViewModel and we registered this PersonViewModel class in line 23 of code snippet 1.

Code Snippet 1
  1. public class ViewModelLocator
  2.     {
  3.         public MainViewModel Main
  4.         {
  5.             get
  6.             {
  7.                 return ServiceLocator.Current.GetInstance<MainViewModel>();
  8.             }
  9.         }
  11.         public PersonViewModel PersonViewModelProp
  12.         {
  13.             get
  14.             {
  15.                 return ServiceLocator.Current.GetInstance<PersonViewModel>();
  16.             }
  17.         }
  19.         static ViewModelLocator()
  20.         {
  21.             ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);
  22.             SimpleIoc.Default.Register<MainViewModel>();
  23.             SimpleIoc.Default.Register<PersonViewModel>();
  24.         }
  25.     }

Code Snippet 1: ViewModelLocator

Code Snippet 2
  1. public class PersonViewModel : ViewModelBase
  2.     {
  3.         public ObservableCollection<Person> Persons
  4.         {
  5.             get;
  6.             set;
  7.         }
  9.         public Person personObject
  10.         {
  11.             get;
  12.             set;
  13.         }
  16.         private ICommand _savePersonCommand;
  17.         public ICommand SavePersonCommand
  18.         {
  19.             get
  20.             {
  21.                 return _savePersonCommand;
  22.             }
  24.             set
  25.             {
  26.                 _savePersonCommand = value;
  27.             }
  28.         }
  29.         public PersonViewModel()
  30.         {
  31.             ObservableCollection<Person> _persons = new ObservableCollection<Person>();
  32.             _persons.Add(new Person { FirstName = IsInDesignMode
  33.                                     ? "bill" : "Bill",
  34.                                       LastName = IsInDesignMode
  35.                                           ? "gates" : "Gates" });
  36.             _persons.Add(new Person { FirstName = "Steve", LastName = "Ballmer" });
  37.             Persons = _persons;
  38.             personObject = new Person { FirstName = "Satya", LastName = "Nadella" };
  39.             _savePersonCommand = new RelayCommand(SavePerson, CanSavePerson);
  40.         }
  42.         private bool CanSavePerson()
  43.         {
  44.             if (string.IsNullOrEmpty(personObject.FirstName) || string.IsNullOrEmpty(personObject.LastName))
  45.                 return false;
  46.             else
  47.                 return true;
  48.         }
  50.         private void SavePerson()
  51.         {
  52.             Persons.Add(new Person { FirstName = personObject.FirstName, LastName = personObject.LastName });
  53.             //MessageDialog dialog = new MessageDialog(string.Format("Saved: {0}  {0}", personObject.FirstName, personObject.LastName));
  54.             //await dialog.ShowAsync();
  56.         }
  59.     }

Code Snippet 2: PersonViewModel

Adding Locator resource to App.XAML

Open the App.xaml file in Visual Studio 2013 and modify it to look like code snippet 3 below. This creates a new resource with the ViewModelLocator, which we will use in the designer. Notice the addition of the “d” and “mc” XML namespaces so that we can mark the ViewModelLocator as a DataSource, which will make it show up in the Data panel in Blend.

Code Snippet 3
  1. <Application
  2.     x:Class="UniBlank_MVVMBasics.App"
  3.     xmlns=";
  4.     xmlns:x=";
  5.     xmlns:local="using:UniBlank_MVVMBasics"
  6.      xmlns:d=";
  7.     xmlns:mc=";
  8.     mc:Ignorable="d"
  9.     xmlns:vm="using:UniBlank_MVVMBasics.ViewModel">
  11.     <Application.Resources>
  12.         <vm:ViewModelLocator x:Key="Locator"
  13.                              d:IsDataSource="True"/>
  14.     </Application.Resources>
  16. </Application>

Making it a truly Universal App:

Since there is nothing great we are doing here, we can easily make it a universal app with all the code shared between both the projects.  Move all the files that we created from Windows Phone 8.1 to Shared node as shown in Figure 2. Delete the files from Windows Phone 8.1 project. In Windows 8.1 project too, delete MainPage.XAML and hurray, we have our first universal app with MVVM. Now, Windows 8.1 store app begins to show up the same UI we have created for Windows Phone 8.1. Amazing!!!!


Figure 2: Moving files to Shared node for making this a Universal app code.

Connecting View and ViewModel:

Step 10: Set the DataContext of the Page to the MainViewMode as shown in Code Snippet 4.

Code Snippet 4
DataContext="{Binding PersonViewModelProp, Source={StaticResource Locator}}"

This is the complete code of PersonView User control.

Code Snippet
  1. <UserControl
  2.     x:Class="UniBlank_MVVMBasics.PersonView"
  3.     xmlns=";
  4.     xmlns:x=";
  5.     xmlns:d=";
  6.     xmlns:mc=";
  7.     mc:Ignorable="d"
  8.     d:DesignHeight="300"
  9.     d:DesignWidth="400" Loaded="UserControl_Loaded"
  10.     xmlns:local="using:UniBlank_MVVMBasics"
  11.     DataContext="{Binding PersonViewModelProp, Source={StaticResource Locator}}" >

Comment the code we wrote in PersonView.xaml.cs

Code Snippet
  1. private void UserControl_Loaded(object sender, RoutedEventArgs e)
  2.       {
  3.           //PersonViewModel personViewModelObject = new PersonViewModel();
  4.           //this.DataContext = personViewModelObject;
  5.       }


Download the source code from here.