10 things a silverlight developer should know when building a metro application silverlightshow.net...
TRANSCRIPT
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: [email protected]: 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