Integration of Windows LIVE SDK Connect & Push Notifications in Windows 8 Metro Style Apps using Windows Live SDK


Windows Live SDK is quite essential for integrating Windows LIVE CONNECT with Metro Style Apps as well as with LIVE Push Notifications. In this article we will see how to integrate Windows LIVE CONNECT & Push Notification services from Windows Azure (Cloud) to Windows 8 Metro Style Apps.  First of all , you need to Download & install Windows Live SDK from

http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=28195

Now, Install the Live SDK & Check out the Extension on VS 11 Developer Preview in Add Reference section.

  • Now create a new Metro Style project in VS 11 Developer Preview .

  • Now write some simple code in MainPage.xaml:

<Grid x:Name=”LayoutRoot” Background=”#FF0C0C0C”>

<Grid.ColumnDefinitions>

<ColumnDefinition Width=”251*” />

<ColumnDefinition Width=”1116*” />

</Grid.ColumnDefinitions>

<StackPanel Grid.ColumnSpan=”2″>

<live:SignInButton Name=”btnLogIn” Scopes=”wl.signin wl.basic” />

<TextBlock Name=”tbName” Width=”600″ Height=”150″ FontSize=”32″ TextWrapping=”Wrap” />

<TextBlock Name=”tbGender” Width=”600″ Height=”150″ FontSize=”32″ TextWrapping=”Wrap” />

<TextBlock Name=”tbLiveProfile” Width=”600″ Height=”150″ FontSize=”32″ TextWrapping=”Wrap” />

<TextBlock Name=”tbError” Text=”Error Message” Width=”600″ Height=”150″ FontSize=”32″ />

</StackPanel>

</Grid>

  • Same way modify MainPage.xaml.cs :

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using Windows.Foundation;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Data;

using Microsoft.Live;

using  Microsoft.Live.Controls;

namespace LiveSDKDemo

{

partial class MainPage

{

private LiveConnectClient liveClient;

private LiveConnectSession session;

 public MainPage()

{

InitializeComponent();

      this.btnLogIn.SessionChanged += btnLogIn_OnSessionChanged;

}

private void btnLogIn_OnSessionChanged(object sender, LiveConnectSessionChangedEventArgs e)

{

if(e.Session != null && e.Status == LiveConnectSessionStatus.Connected)

{

this.liveClient = newLiveConnectClient(e.Session);

session = e.Session;

this.liveClient.GetCompleted += OnGetCompleted;

this.liveClient.GetAsync(“me”,null);

}

   else

{

this.liveClient = null;

}

}

private  void OnGetCompleted(object sender, LiveOperationCompletedEventArgs e)

{

if (e.Error == null)

{

dynamic result = e.Result;

his.tbName.Text = “Hello,” + result.first_name + ” “ + result.last_name;

this.tbGender.Text = “You are “ + result.gender + “that lives in “ + result.locale + “.”;

this.tbLiveProfile.Text = “Your Live Profile can be found:” + result.link;

}

else

{

this.tbError.Text = e.Error.ToString();

}

}

}

}

  • Now , after pressing F5 , you will be stuck with the following message:

  • You need to login to https:manage.dev.live.com  with your Windows Live ID & add the Metro Style Apps Package Name & Publisher Name in Windows Live Connect Portal to integrate LIVE SDK CONNECT & Push notifications with your Metro Style Apps.

  • Accept the  Terms & Condition to get the Live Application Package Name ID & paste it in your package.appxmanifest file.

  • Now Press F5 & Test it in Windows 8 Simulator & check out the following output.

  • Click on Yes & you will be signed in with Windows LIVE SDK Connect & enable to receive Push notifications in your Metro style apps.

Developing Windows 8 Metro JavaScript Navigation Apps in VS 11 Developer Preview & Expression Blend 5 for Developer Preview


Building  Windows 8 Metro Style Apps with Javascript in VS 11 Developer Preview & Expression Blend 5 for Developer Preview is common & designing & coding support is same as in VS 11 Developer Preview & Expression Blend 5 for Developer Preview.  In this article , there is a simple demonstration of Navigation Applications of Javascript in VS 11 Developer Preview while the same could be also developed by designing in Expression Blend 5 for Developer Preview.

  • Lets start by creating a new project in VS 11 Developer Preview for Metro Style Apps in Javascript.

  • Next, Open homepage.html & modify with the following code :

<div class=”fragment homePage”>

<header role=”banner”aria-label=”Header content”>

<button disabledclass=”win-backbutton”aria-label=”Back”></button>

<div class=”titleArea”>

<h1 class=”pageTitle win-title”>Welcome to Navigation_With_JavaScript!</h1>

</div>

</header>

<section role=”main”aria-label=”Main content”>

<button>Click Me</button>

<div data-win-control=”WinJS.UI.Rating” data-win-options=”{averageRating:5,maxRating:10}”></div>

</section>

</div>

 

  • Check out that homepage.html & default.html both of files render the same view of homepage.html.
  • Now Check out the Views in Windows 8 Slates (Simulator) or local machine.

First Preview

Complete Ratings View

Ratings with 5 Preview

  • The same metro app can be designed in Expression Blend 5 for Developers Preview using Windows Library for JavaScript options.

Consuming Bing API 2.2(XML+JSON),REST Services in Windows 8 Metro Style Apps with XAML


In Windows 8 Metro Style Apps , we have previewed some great apps like Weather/Stocks consuming Live Streaming data with XAML/HTML5,JavaScript. These Metro Style Apps are based on Live XML/JSON API & formatted data in XAML to preview the corresponding output.

  • Just like the Weather Sample in Windows 8 Metro Style Apps:

  • With Consumption of Live Data the apps preview the UI according to XAML designing format like GridView,ListView,FlipView with streaming videos.

  • Along with that, they have nice app bars which helps to add application functionalities making Metro Style apps for User-Interactive.

  • In this example , We will develop a Metro Style Apps which helps to preview Live Stream Images from Bing API in XML/JSON with REST Services. The same can be also consumed by building a simple WCF Services with OData Feed in AtomPub/XML Format.
  • Lets start by creating a Metro Style Apps project in VS 11 Developer Preview.

  •  Add a few XAML in MainPage.xaml:

<UserControl x:Class=”BingMapsIntegration.MainPage”

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;

xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml

xmlns:d=”http://schemas.microsoft.com/expression/blend/2008&#8243;

xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006&#8243;

mc:Ignorable=”d”

d:DesignHeight=”768″ d:DesignWidth=”1366″>

<Grid x:Name=”LayoutRoot” Background=”#FF0C0C0C”>

<StackPanel Orientation=”Vertical”>

<StackPanel Orientation=”Horizontal” Height=”48″>

<TextBlock Text=”Enter Keyword:” FontSize=”14″ VerticalAlignment=”Center”

Height=”32″></TextBlock>

<TextBox x:Name=”txtKeyword” Width=”300″ Height=”32″></TextBox>

<Button x:Name=”btnSearch” Width=”40″ Content=”Search” Height=”32″></Button>

</StackPanel>

<StackPanel Orientation=”Horizontal”>

<ListBox x:Name=”PhotoList” HorizontalAlignment=”Left” Width=”250″

ScrollViewer.VerticalScrollBarVisibility=”Visible”>

<ListBox.ItemTemplate>

<DataTemplate>

<StackPanel Orientation=”Vertical”>

<Image Source=”{Binding MediaUrl}” Width=”200″ Height=”200″

Stretch=”UniformToFill” Grid.Column=”0″ />

<TextBlock Text=”{Binding Title}” Width=”200″

Height=”14″ FontSize=”12″ />

</StackPanel>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

</Grid>

</UserControl>

  • Add a new Class in your app called BingMaps & add the following codes:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

namespace BingMapsIntegration

{

class BingMaps

{

public string Title { get; set; }

public string MediaUrl { get; set; }

}

}

  • You need to also Sign-Up for the Developer API Key in Bing . To Sign up visit: http://www.bing.com/developers
  • Modify the MainPage.xaml.cs with the code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using  Windows.Foundation;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Data;

using System.Net.Http;

using System.Xml.Linq;

namespace BingMapsIntegration

{

partial class MainPage

{

public MainPage()

{

InitializeComponent();

  Loaded += new RoutedEventHandler(MainPage_Loaded);

}

void btnSearch_Click(object sender, RoutedEventArgs e)

{

string strSearch = txtKeyword.Text;

FetchBingPics( strSearch, PhotoList);

}

public async void FetchBingPics(string strKeyWord, object control)

{

String strBingAppID = “[51D201080D27C665353AFD9AB807416147559F43]”;

XNamespace xmlns = http://schemas.microsoft.com/LiveSearch/2008/04/XML/multimedia;

HttpClient client = newHttpClient();

HttpResponseMessage response = await   client.GetAsync( http://api.bing.net/xml.aspx?AppId=51D201080D27C665353AFD9AB807416147559F43&Version=2.2&Market=en-US&Image.Count=50&Sources=Image&Query=&#8221;+strKeyWord);

string xml = response.Content.ReadAsString();

XDocument doc = XDocument.Parse(xml);

IEnumerable<BingMaps> images = from img in doc.Descendants(

xmlns + “ImageResult”)

where !img.Element(xmlns + “MediaUrl”).Value.EndsWith(“.bmp”)

selectnewBingMaps

{

Title = img.Element(xmlns + “Title”).Value,

MediaUrl = img.Element(xmlns + “MediaUrl”).Value

};

if (control isListBox)

(control  asListBox).ItemsSource = images;

else

(control  asGridView).ItemsSource = images;

}

}

  • Check out the Output of the App:

  • Lets modify the Sample by adding some GridView functionality to have more rich UI experience in XAML for Metro Style Apps:
  • Add the following code in MainPage.xaml after the ListBox:

<GridView x:Name=”PhotoGrid” Width=”1100″

ScrollViewer.HorizontalScrollBarVisibility=”Visible” Canvas.Left=”240″>

<GridView.ItemsPanel>

<ItemsPanelTemplate>

<WrapGrid MaximumRowsOrColumns=”3″ VerticalChildrenAlignment=”Top”

HorizontalChildrenAlignment=”Left” Margin=”0,0,0,0″ />

</ItemsPanelTemplate>

</GridView.ItemsPanel>

<GridView.ItemTemplate>

<DataTemplate>

<StackPanel Orientation=”Vertical”>

<Image Source=”{Binding MediaUrl}” Width=”200″ Height=”200″

Stretch=”UniformToFill” Grid.Column=”0″ />

<TextBlock Text=”{Binding Title}” Width=”200″ Height=”14″  FontSize=”12″ />

</StackPanel>

</DataTemplate>

</GridView.ItemTemplate>

</GridView>

  • Along with that Add the Following code in MainPage.xaml.cs :
  • Add the EventHandlers in MainPage’s Constructor:

public MainPage()

{

InitializeComponent();

btnSearch.Click += newRoutedEventHandler(btnSearch_Click);

PhotoList.SelectionChanged += new SelectionChangedEventHandler(PhotoList_SelectionChanged);

PhotoGrid.SelectionChanged += new  SelectionChangedEventHandler(PhotoGrid_SelectionChanged);

}

  • Add the following methods in MainPage’s Code-behind:

void btnSearch_Click(object sender, RoutedEventArgs e)

{

string strSearch = txtKeyword.Text;

FetchBingPics( strSearch, PhotoList);

}

void PhotoList_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

if (!(PhotoList.SelectedItem == null))

{

string strTitle = (PhotoList.SelectedItem asBingMaps).Title;

FetchBingPics(strTitle, PhotoGrid);

}

}

void PhotoGrid_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

if (!(PhotoGrid.SelectedItem == null))

{

string strTitle = (PhotoGrid.SelectedItem asBingMaps).Title;

FetchBingPics(strTitle, PhotoList);

}

}

  • Format the output as follows:

  • The complete Metro Style Apps with GridView in XAML  consumed Live Bing API Feed in XML/JSON REST Services.

  • Formatted GridView in XAML 4.5 for Windows 8 Metro Style Apps.

Developing Windows 8 Metro Style Apps with GridView in XAML – Part I


  • Development of Windows 8 Metro Style apps in Windows 8 Developer Preview is quite easy with the help of Visual Studio 11 Developer Preview or Visual Studio 11 Express Developer Preview(Available only with Windows 8 Developer Preview x64 with Windows SDK Tools). In Metro Style apps creation you will get option to create five types of applications in VS 11 developer preview templates.
  • Application
  • Grid Application
  • Split Application
  • Class Library
  • Unit Test Library

  • Next, we will create a Grid Application for Windows 8 Metro Style applications in XAML 4.5 to develop an PhotoViewer app.
  • So, after creation of Grid application in VS 11 Developer Preview you can find the following files:
  • App.xaml: The Configuration file responsible for launch, Application Event Handling, Splash Screen handling.
  • CollectionSummaryPage.xaml: This page is responsible for summing up ListView along with FlipViews with User Control Styles & Templates binding.
  • DetailPage.xaml: The Page controls the basic UI binding of the Items retrieved from Service URL or local database.
  • GroupCollectionPage.xaml: Responsible for UI layout & formatting.
  • Package.appxmanifest: The overall configuration file of the app, responsible for logo designing & selection of Splash Screen, Logo of the Application, Device access capability, Code signing, Certificates & credentials control etc.
  • Lets , I have added some Image files in the existing Images folder of the project & created a new file called PhotoDataSource.cs.
  • PhotoDataSource.cs :

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using Windows.UI.Xaml.Data;

using Windows.UI.Xaml.Media;

using Windows.UI.Xaml.Media.Imaging;

using System.Xml.Linq;

using System.Net.Http;

namespace PhotoViewer

{

classPhotoItem : INotifyPropertyChanged

{

public event PropertyChangedEventHandler PropertyChanged;

protectedvoid OnPropertyChanged(string propertyName)

{

if (this.PropertyChanged != null)

{

this.PropertyChanged(this,

new PropertyChangedEventArgs(propertyName));

}

}

private PhotoCollection _collection;

public PhotoCollection Collection

{

get

{

returnthis._collection;

}

set

{

if (this._collection != value)

{

this._collection = value;

this.OnPropertyChanged(“Collection”);

}

}

}

private String _category = String.Empty;

public String Category

{

get

{

returnthis._category;

}

set

{

if (this._category != value)

{

this._category = value;

this.OnPropertyChanged(“Category”);

}

}

}

privateString _title = String.Empty;

publicString Title

{

get

{

returnthis._title;

}

set

{

if (this._title != value)

{

this._title = value;

this.OnPropertyChanged(“Title”);

}

}

}

privateString _description = String.Empty;

publicString Description

{

get

{

returnthis._description;

}

set

{

if (this._description != value)

{

this._description = value;

this.OnPropertyChanged(“Description”);

}

}

}

privateString _owner = String.Empty;

publicString Owner

{

get

{

returnthis._owner;

}

set

{

if (this._owner != value)

{

this._owner = value;

this.OnPropertyChanged(“Owner”);

}

}

}

privateString _dateTaken;

publicString DateTaken

{

get

{

returnthis._dateTaken;

}

set

{

if (this._dateTaken != value)

{

this._dateTaken = value;

this.OnPropertyChanged(“DateTaken”);

}

}

}

privateImageSource _image = null;

privateUri _imageBaseUri = null;

privateString _imagePath = null;

publicImageSource Image

{

get

{

if (_image == null && _imageBaseUri != null &&

_imagePath !=

null)

{

_image =

newBitmapImage(newUri(_imageBaseUri, _imagePath));

}

returnthis._image;

}

set

{

if (this._image != value)

{

this._image = value;

this._imageBaseUri = null;

this._imagePath = null;

this.OnPropertyChanged(“Image”);

}

}

}

publicvoid SetImage(Uri baseUri, String path)

{

_image =

null;

_imageBaseUri = baseUri;

_imagePath = path;

this.OnPropertyChanged(“Image”);

}

privatestring _url = string.Empty;

publicstring Url

{

get

{

returnthis._url;

}

set

{

if (this._url != value)

{

this._url = value;

this.OnPropertyChanged(“Url”);

}

}

}

}

classPhotoCollection : PhotoItem, IGroupInfo

{

publicObject Key

{

get { return Title; }

}

privateList<PhotoItem> _itemCollection = newList<PhotoItem>();

publicvoid Add(PhotoItem item)

{

_itemCollection.Add(item);

}

publicIEnumerator<Object> GetEnumerator()

{

return _itemCollection.GetEnumerator();

}

System.Collections.

IEnumerator

System.Collections.

IEnumerable.GetEnumerator()

{

return GetEnumerator();

}

}

classPhotoDataSource

{

publicList<PhotoCollection> GroupedCollections { get; privateset; }

privatevoid AddCollection(String category, String title,

String description, Uri baseUri, String imagePath)

{

var collection = newPhotoCollection();

collection.Category = category;

collection.Title = title;

collection.Description = description;

collection.SetImage(baseUri, imagePath);

GroupedCollections.Add(collection);

}

privatevoid AddItem(String category, String title, String description,

String owner, String dateTaken, Uri baseUri, String imagePath)

{

PhotoCollection lastCollection = GroupedCollections.LastOrDefault() as

PhotoCollection;

var item = newPhotoItem();

item.Category = category;

item.Title = title;

item.Description = description;

item.Owner = owner;

item.DateTaken = dateTaken;

item.SetImage(baseUri, imagePath);

item.Collection = lastCollection;

if (lastCollection != null)

{

lastCollection.Add(item);

}

}

public PhotoDataSource(Uri baseUri)

{

GroupedCollections = newList<PhotoCollection>();

AddCollection( “Pike Place Market”, ” Pike Place Market “,

“Pike Place Market is a public market overlooking the Elliott Bay waterfront in Seattle, Washington, United States. The Market opened August 17, 1907, and is one of the oldest continually operated public farmers’ markets in the United States. It is a place of business for many small farmers, craftspeople and merchants. Named after the central street, Pike Place runs northwest from Pike Street to Virginia Street, and remains one of Seattle’s most popular tourist destinations.”,

baseUri, “Images/PikePlaceMarket.jpg”);

AddItem(“Pike Place Market”, “Picture 1”,

“A picture of Pike Place Market”,

string.Empty, string.Empty,

baseUri, “Images/PikePlaceMarket.jpg”);

AddItem(“Pike Place Market”, “Picture 2”,

“A picture of Pike Place Market”,

string.Empty, string.Empty,

baseUri, “Images/PikePlaceMarket.jpg”);

AddItem( “Pike Place Market”, “Picture 3”,

“A picture of Pike Place Market”,

string.Empty, string.Empty,

baseUri, “Images/PikePlaceMarket.jpg”);

//AddPhotos(“Pike Place Market”, 1);

//AddPhotos(“Pike Place Market”, 2);

AddCollection( “Space Needle”, ” Space Needle “,

“The Space Needle is a tower in Seattle, Washington and is a major landmark of the Pacific Northwest region of the United States and a symbol of Seattle. Located at the Seattle Center, it was built for the 1962 World’s Fair. The Space Needle features an observation deck at 520 feet (160 m), and a gift shop with the rotating SkyCity restaurant at 500 feet (150 m).[5] From the top of the Needle, one can see not only the Downtown Seattle skyline, but also the Olympic and Cascade Mountains, Mount Rainier, Mount Baker, Elliott Bay and surrounding islands.”,

baseUri, “Images/SpaceNeedle.jpg”);

//AddPhotos(“Space Needle”, 1);

//AddPhotos(“Space Needle”, 2);

AddItem( “Space Needle”, “Picture 1”,

“A picture of the Space Needle”,

string.Empty, string.Empty,

baseUri, “Images/SpaceNeedle.jpg”);

AddItem( “Space Needle”, “Picture 2”,

“A picture of the Space Needle”,

string.Empty, string.Empty,

baseUri, “Images/SpaceNeedle.jpg”);

AddItem(“Space Needle”, “Picture 3”,

“A picture of the Space Needle”,

string.Empty, string.Empty,

baseUri, “Images/SpaceNeedle.jpg”);

AddItem( “Space Needle”, “Picture 4”,

“A picture of the Space Needle”,

string.Empty, string.Empty,

baseUri, “Images/SpaceNeedle.jpg”);

AddCollection( “Pioneer Square”, ” Pioneer Square “,

“Pioneer Square was once the heart of the city: Seattle’s founders settled there in 1852, following a brief six-month settlement at Alki Point on the far side of Elliott Bay. The early structures in the neighborhood were mostly wooden, and nearly all burned in the Great Seattle Fire of 1889. By the end of 1890, dozens of brick and stone buildings had been erected in their stead; to this day, the architectural character of the neighborhood derives from these late 19th century buildings, mostly examples of Richardsonian Romanesque.”,

baseUri,“Images/PioneerSquare.jpg”);

//AddPhotos(“Pioneer Square”, 1);

//AddPhotos(“Pioneer Square”, 2);

AddItem(“Pioneer Square”, “Picture 1”,

“A picture of Pioneer Square”,

string.Empty, string.Empty,

baseUri, “Images/PioneerSquare.jpg”);

AddCollection(“Snoqualmie Falls”, ” Snoqualmie Falls “,

“Snoqualmie Falls is a 268 ft (82 m) waterfall on the Snoqualmie River between Snoqualmie and Fall City, Washington, USA. It is one of Washington’s most popular scenic attractions, but is perhaps best known internationally for its appearance in the cult television series Twin Peaks. More than 1.5 million visitors come to the Falls every year, where there is a two acre (8,000 m²) park, an observation deck, and a gift shop.”,

baseUri, “Images/SnoqualmieFalls.jpg”);

//AddPhotos(“Snoqualmie Falls”, 1);

//AddPhotos(“Snoqualmie Falls”, 2);

AddItem(“Snoqualmie Falls”, “Picture 1”,

“A picture of Snoqualmie Falls”,

string.Empty, string.Empty,

baseUri, “Images/SnoqualmieFalls.jpg”);

AddItem(“Snoqualmie Falls”, “Picture 2”,

“A picture of Snoqualmie Falls”,

string.Empty, string.Empty,

baseUri, “Images/SnoqualmieFalls.jpg”);

AddItem( “Snoqualmie Falls”, “Picture 3”,

“A picture of Snoqualmie Falls”,

string.Empty, string.Empty,

baseUri, “Images/SnoqualmieFalls.jpg”);

AddItem(“Snoqualmie Falls”, “Picture 4”,

“A picture of Snoqualmie Falls”,

string.Empty, string.Empty,

baseUri, “Images/SnoqualmieFalls.jpg”);

AddCollection(“About Me”, ” About Me ““Hi,Myself Anindita Basak.Senior Software Engineer by role.”,

baseUri, “Images/me.jpg”);

AddItem(“About Me”, “About Me”,

“Hi,Myself Anindita Basak.Senior Software Engineer by profession.”,

string.Empty, string.Empty,

baseUri, “Images/me.jpg”);

AddItem(“About Me”, “About Me”,

“Hi,Myself Anindita Basak.Senior Software Engineer by profession.”,

string.Empty, string.Empty,

baseUri, “Images/me.jpg”);

}

}

}

  • Add the following code in DetailPage.xaml by commenting out the ContentPanel1,ContentPanel2,ContentPanel3:

<StackPanel x:Name=”ContentPanel1″ Style=”{StaticResource

PrimaryContentPanelStyle}”>

<TextBlock x:Name=”DetailTitle” Height=”74″ Style=”{StaticResource

LargeContentFontStyle}” Text=”{Binding Title}” />

<Grid x:Name=”ImageGrid” Width=”Auto” Margin=”0,8,0,0″

Background=”#FF3B3B3B” HorizontalAlignment=”Stretch” VerticalAlignment=”Top”>

<Image x:Name=”Image” Height=”300″ Margin=”0″ Stretch=”UniformToFill”

Source=”{Binding Image}” />

</Grid>

 

  • Lets check the PhotoViewer screen in Windows 8 Metro Style apps.

  • Next, Run the Metro Style Apps in Windows 8  Slate Simulator . Select it from VS 2011 developer Preview Debugging option pane.