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

1. 10 Things a Silverlight Developer Should Know When Building A Metro Application SILVERLIGHTSHOW.NET WEBINARS SERIES Michael Crump, July 3rd, 2012 www.michaelcrump.net @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. Michael Crump Microsoft MVP, MCPD Telerik (www.telerik.com) Web: http://michaelcrump.net Twitter: @mbcrump Introduction

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

5. Q/A

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

7. #1 : Starting with the Fundamentals

8. 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)

9. #2 : Application Lifecycle

10. Silverlight

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

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

13. 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">

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

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

16. 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;

17. http://bit.ly/I4eWTt Silverlight 5 vs. WinRT comparison by namespace

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

21. asyncavoids 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. Asynchronous Programming

22. Silverlight voidSearchBtn_Click(object sender, RoutedEventArgs e) { stringtopic = txtSearchTopic.Text; stringdiggUrl = String.Format("http://services.digg.com/stories/topic/{0}?count=20&appkey=http%3A%2F%2Fscottgu.com", topic); // Initiate Async Network call to Digg WebClientdiggService = newWebClient(); diggService.DownloadStringCompleted += newDownloadStringCompletedEventHandler(DiggService_DownloadStoriesCompleted); diggService.DownloadStringAsync(newUri(diggUrl)); } voidDiggService_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("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(newUri(diggUrl)); Task<string> responseString = response.Content.ReadAsStringAsync(); string result = await responseString; DisplayStories(result); }

24. WebClient & HttpClient Demo

25. Files and Isolated Storage #5 : Storage

26. 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!

27. Files Demo

28. Rethink URI… #6 : Navigation

29. <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));

30. void Header_Click(object sender, RoutedEventArgs e) { // Determine what group the Button instance represents var group = (sender asFrameworkElement).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); } protectedoverridevoid OnNavigatedTo(NavigationEventArgs e) { var group = (SampleDataGroup)e.Parameter; this.DefaultViewModel["Group"] = group; this.DefaultViewModel["Items"] = group.Items; } Metro

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

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

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

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

35. Controls Demo

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

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

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

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

40. Searching and Sharing… #9 : Freebies

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

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

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

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

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

46. 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 Recap

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

48. Q&A Email: 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