Building Advanced Windows Store Apps with Interactive Dashboards, Syndication feeds & Live Tiles

After the final release of Windows 8 Enterprise to users, it’s now essential to intergrate Interactive Dashboards, Online Syndication feeds from Webservices, display live feed data on hub  Tiles of Windows store apps. In order to implement interactive dashboards as a POC , we need to take help of several interactive controls (viz. Pie Chart, Candle Sticks Chart, Bar Charts).

Lets check an interactive Sales Dashboard App for Windows Store with Sales Agents, Sales with Sales Agents, Sales Per Month & Report Summary details.

• The Dashboard consists of interactive controls of seperate controls along with ImageList Box for Windows Store apps.

• Similarly pop-out Sales Per month, Sales Report Summary tiles.

• The controls are independent user controls which toghther concatenated in MainPage.xaml of the Windows Store library.

• Lets check the MainPage.xaml which forms the backbone of the dashboard.

<UserControl

x:Class=“SalesDashboardLib.MainPage”

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

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

xmlns:local=“using:SalesDashboardLib.Samples.Dashboard”

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

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

xmlns:c1=“using:C1.Xaml.TileView”

mc:Ignorable=“d”>

<UserControl.Resources>

<SolidColorBrush x:Key=“headerForeground”>#FF507494</SolidColorBrush>

<Thickness x:Key=“headPadd”>10,5,5,5</Thickness>

</UserControl.Resources>

<Grid>

<Grid.Background>

<ImageBrush ImageSource=“ms-appx:///SalesDashboardLib/Samples/Resource/background/sales.jpg” />

</Grid.Background>

<c1:C1TileView>

<c1:C1TileViewItem Header=“Sales Agents” HeaderPadding_Temp=”{StaticResource headPadd}“>

<ScrollViewer HorizontalScrollBarVisibility=“Auto” VerticalScrollBarVisibility=“Auto” BorderThickness=“0” Background=“Transparent” Margin=“0” Padding=“0” ZoomMode=“Disabled”>

<local:SalesAgents/>

</ScrollViewer>

<c1:C1TileViewItem.ContentMinimized>

<local:SalesAgentsIcon HorizontalAlignment=“Center” />

</c1:C1TileViewItem.ContentMinimized>

</c1:C1TileViewItem>

<c1:C1TileViewItem Header=“Report Summary” HeaderPadding_Temp=”{StaticResource headPadd}“>

<local:ReportSummary />

<c1:C1TileViewItem.ContentMinimized>

<local:ReportSummaryIcon HorizontalAlignment=“Center” />

</c1:C1TileViewItem.ContentMinimized>

</c1:C1TileViewItem>

<c1:C1TileViewItem Header=“Sales Per Month” HeaderPadding_Temp=”{StaticResource headPadd}“>

<local:SalesPerMonth />

<c1:C1TileViewItem.ContentMinimized>

<local:SalesPerMonthIcon HorizontalAlignment=“Center” />

</c1:C1TileViewItem.ContentMinimized>

</c1:C1TileViewItem>

<c1:C1TileViewItem Header=“Sales Per Sales Agent” HeaderPadding_Temp=”{StaticResource headPadd}“>

<local:SalesPerAgents/>

<c1:C1TileViewItem.ContentMinimized>

<local:SalesPerMonthIcon HorizontalAlignment=“Center” />

</c1:C1TileViewItem.ContentMinimized>

</c1:C1TileViewItem>

</c1:C1TileView>

</Grid>

</UserControl>

• Next , build an interactive Windows Store App tile consuming live OData RSS Syndication feed data from YouTube.

• Lets check the code for consuming live OData RSS feed on Windows Store apps.

private async void LoadVideos()

{

var youtubeUrl = “https://gdata.youtube.com/feeds/api/videos?q=microsoft+teched&max-results=50“;

var AtomNS = “http://www.w3.org/2005/Atom“;

var MediaNS = “http://search.yahoo.com/mrss/“;

var videos = new List<Video>();

var client = WebRequest.CreateHttp(new Uri(youtubeUrl));

var response = await client.GetResponseAsync();

try

{

#region ** parse you tube data

var doc = XDocument.Load(response.GetResponseStream());

foreach (var entry in doc.Descendants(XName.Get(“entry”, AtomNS)))

{

var title = entry.Element(XName.Get(“title”, AtomNS)).Value;

var thumbnail = “”;

var group = entry.Element(XName.Get(“group”, MediaNS));

var thumbnails = group.Elements(XName.Get(“thumbnail”, MediaNS));

var thumbnailElem = thumbnails.FirstOrDefault();

if (thumbnailElem != null)

thumbnail = thumbnailElem.Attribute(“url”).Value;

var alternate = entry.Elements(XName.Get(“link”, AtomNS)).Where(elem => elem.Attribute(“rel”).Value == “alternate”).FirstOrDefault();

var link = alternate.Attribute(“href”).Value;

videos.Add(new Video() { Title = title, Link = link, Thumbnail = thumbnail });

}

#endregion

tileListBox.ItemsSource = videos;

loading.Visibility = Visibility.Collapsed;

tileListBox.Visibility = Visibility.Visible;

}

catch

{

var dialog = new MessageDialog(“There was an error when attempting to download data from you tube.”);

dialog.ShowAsync();

}

}

• The different Tiles are integrated in a single Windows Store app with interactive app tiles.

• As a standard Windows Store app, the app has itself Search & Share Contracts which can be easily followed.

• Similarly , the app has Search Contract which helps to find the app from Windows Setting Charm Search.

• The app has standard Tile image with interactive splash screen which can be easily viewable on your surface screen.