1. 10 Things a Silverlight Developer Should Know When Building A Metro Application
SILVERLIGHTSHOW.NET WEBINARS SERIES
Michael Crump, July 3rd, 2012
@mbcrump

2. 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

3. Introduction
Michael Crump Microsoft MVP, MCPD Telerik ( Web:

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

5. 10 Things
Intro
Q/A

6. So, you’re a Silverlight Developer
Now What?

7. #1 : Starting with the Fundamentals

8. Metro
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
Can use any version of Visual Studio to develop for it.
Built primary for mouse/keyboard input. (Chrome)
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)

9. #2 : Application Lifecycle

10. Silverlight User Request Webpage
HTML Page <object> tag loads plug-in
Plug-in downloads XAP file and reads manifest
Create instance of Application Class
Fire Application Start up Event
Completed page rendering.

11. Metro App gets 5s to handle suspend
App is not notified before termination
Running
App
suspending
Suspended
App
Terminated
App
User Launches App
Low Memory
resuming
Apps are notified when they have been resumed
Splash screen
Code gets to run
No code runs
App not running

12. #3 : XML Namespaces
You only declare the namespace (never the assembly) and you should use "using" instead of "clr-namespace"

13. Silverlight <UserControl x:Class="DiggSample
Silverlight <UserControl x:Class="DiggSample.Page" xmlns=" xmlns:x=" xmlns:Digg="clr-namespace:DiggSample"> Metro <UserControl x:Class="DiggSample.MainPage" xmlns:Digg="using:DiggSample">

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

15. #3 : Code Namespaces (cont…)
The majority of changes occur in the UI related classes. System.Windows -> Windows.UI.Xaml

16. Code Namespaces cont. Silverlight Metro
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;
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;

17. Silverlight 5 vs. WinRT comparison by namespace

20. #4 : Making WebRequest
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.

21. Asynchronous Programming
async avoids the bottleneck of your application being executed line by line.
Your program can continue to execute.
The "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.

22. Silverlight void SearchBtn_Click(object sender, RoutedEventArgs e) {
string topic = txtSearchTopic.Text;
string diggUrl = String.Format(" 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);

23. 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(" 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); }

24. Demo
WebClient & HttpClient

25. #5 : Storage
Files and Isolated Storage

26. File I/O Silverlight Metro
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.
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!

27. Demo
Files

28. #6 : Navigation
Rethink URI…

29. Silverlight
<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>
this.NavigationService.Navigate(new Uri("/Page1.xaml", UriKind.Relative));

30. Metro
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;

31. #7 : Controls
Some added and some missing from Metro.

32. Silverlight Controls - MIA
Calendar, ChildWindow, DataGrid, DataPager, DatePicker, DescriptionViewer, MultiScaleImage, OpenFileDialog, RichTextBox, SaveFileDialog, TabControl, TabItem, TreeView, Validation, WebBrowser

33. List Box Hyperlink Checkbox Progress Bar Text Box Password
Progress Ring
Tooltip
GridView
Button
FlipView
Combo Box
Scroll Bar
Context Menu
Slider
Toggle Switch
Semantic Zoom
Panning Indicator
Navigation
ListView
Web View
Radio Button
Clear Button
Reveal Button
Spell Checking

34. New XAML Controls
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.

35. Demo
Controls

36. #8 : Animations
Animations are a key component of the Metro Style Personality.

37. Silverlight 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.

38. Metro 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!
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.

39. Demo
Animation – created by Colin Eberhardt

40. #9 : Freebies
Searching and Sharing…

41. Charms
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.

42. Contracts
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

43. #10 : Monetizing
Because who doesn’t want to make money.

44. Windows Store 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.

45. Windows Store (cont…) Registration Fee is $49 USD ($99 for Companies)
Share up to 80% of the revenue generated from app sales.

46. Recap Starting with the Fundamentals Application Lifecycle
XML/Code Namespaces
Making WebRequest - Async
Storage – Files and Isolated Storage
Navigation – No more URI
Controls – New ones added
Animations – Baked into WinRT
Freebies – Charms (Searching and Sharing)
Monetizing – With the Microsoft Store

47. The Bits 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.

48. Q&A
Web:
Telerik is creating Windows 8 Controls and more info can be found at: