Presentation is loading. Please wait.

Presentation is loading. Please wait.

SILVERLIGHTSHOW.NET WEBINARS SERIES Michael Crump, July 3rd, 2012

Similar presentations


Presentation on theme: "SILVERLIGHTSHOW.NET WEBINARS SERIES Michael Crump, July 3rd, 2012"— Presentation transcript:

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 (www.telerik.com) 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="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: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

18

19

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

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(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:


Download ppt "SILVERLIGHTSHOW.NET WEBINARS SERIES Michael Crump, July 3rd, 2012"

Similar presentations


Ads by Google