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.

Advertisements

About Anindita
Anindita Basak is working as Big Data Cloud Consultant in Microsoft. Worked in multiple MNCs as Developer & Senior Developer on Microsoft Azure, Data Platform, IoT & BI , Data Visualization, Data warehousing & ETL & of course in Hadoop platform.She played both as FTE & v- employee in Azure platform teams of Microsoft.Passionate about .NET , Java, Python & Data Science. She is also an active Big Data & Cloud Trainer & would love share her experience in IT Training Industry. She is an author, forum contributor, blogger & technical reviewer of various books on Big Data Hadoop, HDInsight, IoT & Data Science, SQL Server PDW & PowerBI.

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

  1. Pingback: Data Recovery Software Download Blog

  2. Pingback: Consuming Bing API 2.2(XML+JSON),REST Services in Windows 8 ... | XQuery & T-Sql | Scoop.it

  3. Pingback: Consuming Bing API 2.2(XML+JSON),REST Services in Windows 8 … « Cosa importa se….

  4. marlenedeutsch says:

    Could you send me your solution please?
    Couse something isn’t working and i don’t know why.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: