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
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
Introduction
Michael Crump
Microsoft MVP, MCPD
Telerik (www.telerik.com)
Web: http://michaelcrump.net
Twitter: @mbcrump
Patience my friend – Install Windows 8 you will. Wise would be to install inside a VM.
Intro
10
Things
Q/A
So, you’re a Silverlight Developer
Now What?
#1 : Starting with the Fundamentals
Silverlight
• Hosted inside a web browser via plugin.
• 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
User
Request
Webpage
HTML
Page
<object>
tag loads
plug-in
Plug-in
download
s XAP file
and reads
manifest
Create
instance
of
Applicatio
n Class
Fire
Applicatio
n Start up
Event
Complete
d page
rendering.
Metro
User
Launches
App
Splash
screen
suspending
Running
App
resuming
Code gets to run
#3 : XML Namespaces
You only declare the namespace (never the assembly) and you
should use "using" instead of "clr-namespace"
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="clrnamespace:Microsoft.Advertising.Mobile.UI;assembly=Microsoft.
Advertising.Mobile.UI"
Metro
xmlns:ad="using:Microsoft.Advertising.WinRT.UI"
#3 : Code Namespaces (cont…)
The majority of changes occur in the UI related classes.
System.Windows -> Windows.UI.Xaml
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;
Silverlight 5 vs. WinRT comparison by
namespace
http://bit.ly/I4eWTt
#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.
Asynchronous Programming
async avoids the bottleneck of your application being executed
line by line.
o Your program can continue to execute.
o 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.
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_DownloadStoriesComp
leted);
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}&ap
pkey=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);
}
Demo
WebClient & HttpClient
#5 : Storage
Files and Isolated 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!
Demo
Files
#6 : Navigation
Rethink URI…
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));
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;
}
#7 : Controls
Some added and some missing from Metro.
Silverlight Controls - MIA
Calendar, ChildWindow, DataGrid, DataPager, DatePicker,
DescriptionViewer, MultiScaleImage, OpenFileDialog, RichTextBox,
SaveFileDialog, TabControl, TabItem, TreeView, Validation,
WebBrowser
GridView
Progress Ring
Web View
ListView
Semantic Zoom
FlipView
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.
Demo
Controls
#8 : Animations
Animations are a key component of the Metro Style
Personality.
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.
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! 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.
Demo
Animation – created by Colin Eberhardt
http://www.codeproject.com/Articles/269351/WinRTTransitions-Creating-Fast-and-Fluid-Metro-UI
#9 : Freebies
Searching and Sharing…
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.
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 http://bit.ly/K7hd2B
#10 : Monetizing
Because who doesn’t want to make money.
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.
Windows Store (cont…)
• Registration Fee is $49
USD ($99 for Companies)
• Share up to 80% of the
revenue generated from
app sales.
Recap
1. Starting with the Fundamentals
2. Application Lifecycle
3. XML/Code Namespaces
4. Making WebRequest - Async
5. Storage – Files and Isolated Storage
6. Navigation – No more URI
7. Controls – New ones added
8. Animations – Baked into WinRT
9. Freebies – Charms (Searching and Sharing)
10. Monetizing – With the Microsoft Store
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. http://bit.ly/x2YEI4
Q&A
Email: michael@michaelcrump.net
Web:
http://michaelcrump.net
Twitter: @mbcrump
Telerik is creating Windows 8 Controls and more info can be
found at:
http://www.telerik.com/products/windows-metro.aspx