10 Things a Silverlight Developer Should Know When Building A Metro Application

SILVERLIGHTSHOW.NET WEBINARS SERIES

Michael Crump, July 3rd, 2012www.michaelcrump.net @mbcrump

You can win!

Complete the post-webinar survey! Three of you will get a free ebook of choice from SilverlightShow Ebook Shelf!

Tweet this webinar using #webinarsilverlightshow tag. Two of you will get an ebook from Packt Publishing, choosing between:

• Microsoft Silverlight 5 Data and Services Cookbook OR

• MVVM Survival Guide for Enterprise Architectures in Silverlight and WPF

Michael CrumpMicrosoft MVP, MCPDTelerik (www.telerik.com)

Web: http://michaelcrump.netTwitter: @mbcrump

Introduction

Patience my friend – Install Windows 8 you will. Wise would be to install inside a VM.

Q/A

Now What?

So, you’re a Silverlight Developer

#1 : Starting with the Fundamentals

Silverlight

• Hosted inside a web browser via plug-in.

• Silverlight Applications can run in Windows 8 in Desktop Mode only.

• You can use C#/VB and XAML to develop applications.

• XNA – (partial) Available in SL5.• Uses .NET Framework 2.0-4.5• Can use any version of Visual

Studio to develop for it.• Built primary for

mouse/keyboard input. (Chrome)

Metro

• Runs on top of WinRT inside Windows 8.

• Metro Applications can only run in Windows 8.

• You can use C#/VB/C++/XAML or HTML/JS

• XNA not available in WinRT, but can use DirectX.

• Uses .NET Framework 4.5• Can only develop for it using

VS11 and Windows 8. • Built primary for touch input. (No

Chrome)

#2 : Application Lifecycle

Silverlight

Metro

RunningApp

suspending

Code gets to run

resuming

User Launches

App

Splash screen

You only declare the namespace (never the assembly) and you should use "using" instead of "clr-namespace"

#3 : XML Namespaces

Silverlight<UserControl x:Class="DiggSample.Page"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:Digg="clr-namespace:DiggSample">

Metro<UserControl x:Class="DiggSample.MainPage"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:Digg="using:DiggSample">

Silverlight xmlns:ad="clr-namespace:Microsoft.Advertising.Mobile.UI;assembly=Microsoft.Advertising.Mobile.UI" 

Metroxmlns:ad="using:Microsoft.Advertising.WinRT.UI"

The majority of changes occur in the UI related classes.

System.Windows -> Windows.UI.Xaml

#3 : Code Namespaces (cont…)

Code Namespaces cont.

Silverlight

using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes;

Metro

using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Data; using Windows.UI.Xaml.Documents; using Windows.UI.Xaml.Input; using Windows.UI.Xaml.Media; using Windows.UI.Xaml.Media.Imaging; using Windows.UI.Xaml.Navigation; using Windows.UI.Xaml.Shapes;

http://bit.ly/I4eWTt

Silverlight 5 vs. WinRT comparison by namespace

• WebClient has been removed from WinRT. Instead, you can now use HttpClient.

• WebRequest makes use of async, await and Tasks<T>.

• Callbacks such as IAsyncResult will need to be re-written.

#4 : Making WebRequest

async avoids the bottleneck of your application being executed line by line. oYour program can continue to execute.oThe "async" keyword enables the "await" keyword in that method.await operator is applied to a task to suspend execution of the method until the task is complete.

Tasks<T> represents an asynchronous operation that can return a value.

Asynchronous Programming

Silverlight

void SearchBtn_Click(object sender, RoutedEventArgs e) { string topic = txtSearchTopic.Text; string diggUrl = String.Format("http://services.digg.com/stories/topic/{0}?count=20&appkey=http%3A%2F%2Fscottgu.com", topic);

// Initiate Async Network call to Digg WebClient diggService = new WebClient(); diggService.DownloadStringCompleted += new DownloadStringCompletedEventHandler(DiggService_DownloadStoriesCompleted); diggService.DownloadStringAsync(new Uri(diggUrl)); }

void DiggService_DownloadStoriesCompleted(object sender, DownloadStringCompletedEventArgs e) { if (e.Error == null) { // Call another Method DisplayStories(e.Result); } }

Metro

public async void SearchBtn_Click(object sender, RoutedEventArgs e) { // Retrieve Topic to Search for from WaterMarkTextBox string topic = txtSearchTopic.Text; // Construct Digg REST URL string diggUrl = String.Format("http://services.digg.com/search/stories?query={0}&appkey=http://www.scottgu.com", topic);

// Initiate Async Network call to Digg var client = new HttpClient(); var response = new HttpResponseMessage();

//Get response response = await client.GetAsync(new Uri(diggUrl)); Task<string> responseString = response.Content.ReadAsStringAsync(); string result = await responseString; DisplayStories(result);}

WebClient & HttpClient

Demo

Files and Isolated Storage

#5 : Storage

File I/O

Silverlight

IsolatedStorage – Can do anything.Read/Write a file to Documents Folder via Open/Save Dialogs or by using Elevated Trust (SL4)Read/Write a file to C:\Temp possible via FilePickers or Full Trust (SL5) will not require user intervention.

Metro

IsolatedStorage – Can do anything.Read/Write a file to Documents Folder via FilePickers only if set in Application Manifest. Read/Write a file to C:\Temp possible via FilePickers only!

Files

Demo

Rethink URI…

#6 : Navigation

<navigation:Frame x:Name="ContentFrame" Style="{StaticResource ContentFrameStyle}" Source="/Home" Navigated="ContentFrame_Navigated" NavigationFailed="ContentFrame_NavigationFailed"> <navigation:Frame.UriMapper> <uriMapper:UriMapper> <uriMapper:UriMapping Uri="" MappedUri="/Views/Home.xaml"/> <uriMapper:UriMapping Uri="/{pageName}" MappedUri="/Views/{pageName}.xaml"/> </uriMapper:UriMapper> </navigation:Frame.UriMapper> </navigation:Frame>

Silverlight

this.NavigationService.Navigate(new Uri("/Page1.xaml", UriKind.Relative));

void Header_Click(object sender, RoutedEventArgs e) { // Determine what group the Button instance represents var group = (sender as FrameworkElement).DataContext;

// Navigate to the appropriate destination page, configuring the new page // by passing required information as a navigation parameter this.Frame.Navigate(typeof(GroupDetailPage), group); }

protected override void OnNavigatedTo(NavigationEventArgs e) { var group = (SampleDataGroup)e.Parameter; this.DefaultViewModel["Group"] = group; this.DefaultViewModel["Items"] = group.Items; }

Metro

Some added and some missing from Metro.

#7 : Controls

Calendar, ChildWindow, DataGrid, DataPager, DatePicker, DescriptionViewer, MultiScaleImage, OpenFileDialog, RichTextBox, SaveFileDialog, TabControl, TabItem, TreeView, Validation, WebBrowser

Silverlight Controls - MIA

Progress Ring

GridView

FlipView

Semantic ZoomListView

• ListView – Displays a collection as a stack of items. (Think Snapped Application)

• GridView – Grid-Based Layouts and grouping of items.• Semantic zoom (Old Name JumpViewer) – Zoom in or

out on a collection.• FlipView – Items Control that displays one item at a

time.• Media Player – Now with built-in playback buttons. • Progress Ring – Simple Progress Indicator with a

circular motion.• Application Bar, CarouselPanel, RichTextBlock and

WrapGrid.

New XAML Controls

Controls

Demo

Animations are a key component of the Metro Style Personality.

#8 : Animations

Animation Easing allows you to apply built in animation functions to your Silverlight controls. The result is a variety of animation effects that make your controls move in a more realistic way.

Silverlight Animations

Independent animation - is an animation that runs independently from thread running the core UI logic.Dependent animations run on the UI Thread. Must turn on by using AllowDependentAnimation to True.Animation Library – FREE! http://bit.ly/IO3oVR•Theme Transitions – animate loading, unloading or changing location on the screen.•Theme Animations – build to run on user interaction and you must trigger them. You can create custom animations as well.

Metro Animations

Animation – created by Colin Eberhardt http://www.codeproject.com/Articles/269351/WinRT-Transitions-Creating-Fast-and-Fluid-Metro-UI

Demo

Searching and Sharing…

#9 : Freebies

Charms are a way of preparing Windows 8 for an ultimate integration with natural user interface (NUI) technology, which allows you to have everything at your fingertips without going through a whole lot of effort.

Charms

• Metro style apps use contracts and extensions to declare the interactions that they support with other apps and with Windows. 

• Search contracts opens up your application to intregrate with Windows search

• Share contract allows your app to share content with other apps

• Many others exist and can be found at http://bit.ly/K7hd2B

Contracts

Because who doesn’t want to make money.

#10 : Monetizing

Sell your application in the Windows Store. •Designed for Discovery.•Reach – Global (231 markets)•Enterprise•Flexible business model (free, paid or trial)•Microsoft AD SDK out now.

Windows Store

• Registration Fee is $49 USD ($99 for Companies)

• Share up to 80% of the revenue generated from app sales.

Windows Store (cont…)

1. Starting with the Fundamentals2. Application Lifecycle3. XML/Code Namespaces4. Making WebRequest - Async5. Storage – Files and Isolated Storage6. Navigation – No more URI7. Controls – New ones added8. Animations – Baked into WinRT9. Freebies – Charms (Searching and Sharing)10.Monetizing – With the Microsoft Store

Recap

Main starting point: http://dev.windows.com/– Metro style app reference and APIs– Sample Apps, Windows Store, Forums– Windows 8 OS – Release Preview Stage

• VS2012 RC : DP > BETA > RC > RTM• .NET Framework 4.5

See my article in Visual Studio Magazine where I ported a SL2 app to Metro. http://bit.ly/x2YEI4

The Bits

Q&AEmail: michael@michaelcrump.netWeb: http://michaelcrump.netTwitter: @mbcrump

Telerik is creating Windows 8 Controls and more info can be found at: http://www.telerik.com/products/windows-metro.aspx