Metro and WinRT for the
Silverlight/WPF Developer
Part 2
SILVERLIGHTSHOW.NET WEBINARS SERIES
GILL CLEEREN, February 2nd 2012
www.snowball.be - gill.cleeren@ordina.be - @gillcleeren
About myself...
•
•
•
•
•
Gill Cleeren
.NET Architect @Ordina (www.ordina.be)
Microsoft Regional Director
Silverlight MVP
Speaker (TechDays, TechEd, DevReach, DevDays, NDC Norway,
Telerik Usergroup tour Sweden, UK and Scotland...)
• Visug user group lead (www.visug.be)
• Author (Silverlight 4 Data and services cookbook)
– And a new one is being finished as we speak!
• Blog: www.snowball.be
• Email: gill@snowball.be
• Twitter: @gillcleeren
Some practical stuff
• Ask questions through Q&A window
– We’ll answer them after the session or by personal
mail
• A link to the video recording will be sent to you
You can win!
Complete the post-webinar survey and win!
You can win one of the 3 ebooks
Getting Ready for
Microsoft Silverlight Exam 70-506!
You can win!
Tweet this webinar (comments, feedback...)
using #webinarsilverlightshow tag!
You can win one of the 3 ebooks
Silverlight 4
Data and Services Cookbook
(yep, that’s my book  )
New version coming soon!
• Updated for Silverlight 5
• Over 115 recipes (that’s
30 extra!)
• Extended to about 700
pages (that’s 250 extra!)
• Covering WP7, MVVM,
RIA Services and much
more!
• More info:
http://bit.ly/SL5DataAndServices
This is the road to development on
Windows 8
In this part...
• Styling and templating
• Data in your Windows 8 apps
– Getting data
– Data binding
• The Application Lifecycle (Copyright 2010 Windows
Phone 7)
• Tiles and more (Copyright 2010 Windows Phone 7)
• IO’ing in Metro apps
This is the road to development on
Windows 8
Covered in Part 1...
• General XAML stuff for Windows 8
• Old and new controls
• Finding your way with navigation
See www.silverlightshow.net for the recording!
Remember!
For every Metro topic you already know,
you get a badge!
STYLING AND TEMPLATING
Windows 8 brings its default style.
This style is similar to WP7 Metro.
Default styles
• Project templates provide great starting point
for Metro style
– Default styles are included
• Familiar XAML styling and resource
dictionaries
– Works in the same way
• Dark and light resource dictionaries
Dark and light themes
• Controls are styled by their control template
• Resource Dictionaries containing dark and light
styles
• Dark styles are default
– Recommended for media apps, such as photos or
video
– generic.xaml
• Light styles can be switched to quickly
– Recommended for text-based apps
– light_generic.xaml
DEMO
SWITCHING TO THE LIGHT THEME
Get your style right!
• Windows 8 provides great controls through
the platform (we’ve seen that earlier)
• Controls can be styled, breaking down their
parts
– Properties
• Set foreground color to blue
– Templates
• Change the structural appearance of a control
– Visual States
• Define how a control looks in a specific state
Styling remains the same as well...
• Explicit styles (keyed)
• Apply the style to the target when requested by
key name
• Great for unique styles
• BasedOn styles
– Inherit from an explicitly keyed style
• Implicit styles
– Apply the style to all instances of the TargetType
– Ideal for app wide styling of a control type
Templating in Windows 8
• Metro style look and feel
• Change the control to suit you
– Properties
– Visual States
– Content
Visual State Manager (again)
• Visual states give controls (and your app) a
great feel
– Define your app’s behavior
– Change appearance
– Transforms
– Easing
– KeyFrames
– Animations
DEMO
STYLING AND TEMPLATING
APPLICATIONS
Congratulations,
you earned a badge!
Stylish Windows 8 developer
WORKING WITH DATA IN
WINDOWS 8 APPS
Apps should be connected and alive with content.
A stock ticker without stock data is like a bar with no beer.
Working with data is similar to
Silverlight and WP7
• It involves
– Getting data
– Working asynchronously
– Using the data
• Binding
• Parsing
• ...
Getting data
• Working with services is preferred in most
cases
– Relational databases should be behind a service
• Local app storage
– App has its own storage directory
– Can access local file system
Supported service scenarios
• Use
– XML-over-HTTP
– JSON-over-HTTP
– ASMX Web Services
– Sockets
– oData
– (no RIA Services at this point )
Working async gets easier
• await keyword makes things easier
• Doesn’t block UI thread
– Doesn’t require the ugly
Dispatcher.BeginInvoke(() => …);
DEMO
GETTING DATA TO YOUR
WINDOWS 8 APPLICATION
Now that you have data, you can use it.
Now what to do with the data?
• LINQ is fully supported
• Data binding to controls
– We saw a lot of new controls
• Old controls support data binding as well 
– Optionally grouping the data
Data binding
• Data binding is the infrastructure that links properties
of controls with properties on your data objects
• Can be done in XAML or via code
• Binding actions enable customization of the binding
logic
– Value converters
• Binding modes
– OneWay, TwoWay, OneTime
• All this stuff remains the same as it was before!
• Not everything that is supported in data binding in
WPF, SL and WP7 is currently supported
– Might change
– Currently SL4 options are supported more or less
Data templates
• Enables re-usable declarative XAML to define
data binding behavior and presentation
• Can define the template for the panel in which
the contents will appear
• Can define the template for the items
themselves
DEMO
DATA BINDING AND
DATA TEMPLATES IN WINDOWS 8
Congratulations,
you earned a badge!
Data master
APPLICATION LIFECYCLE
Windows 8 apps’ life cycle
• Apps have a life cycle that is familiar to
Windows Phone 7
– App object has several events being called
automatically
Application lifecycle
When the app is about to be shut
down
• OnSuspending event on app object is your
chance
• Understanding user’s intentions for save
• Utilize familiar serialization mechanisms
available in XAML Metro style apps
Suspending and saving
//SuspensionManager.cs can be found in SDK Samples
async protected void OnSuspending(object sender,
SuspendingEventArgs args)
{
SuspendingDeferral deferral =
args.SuspendingOperation.GetDeferral();
await SuspensionManager.SaveAsync();
deferral.Complete();
}
Resuming the application
• Resuming event on app object
• App still lives in resident memory
• Scenarios around rehydrating live data
Activating an app
• Provide content to your Window
• Determine PreviousExecutionState for lifecycle
management
• Navigate your app to desired view based on
activation type
• Activate your Window to dismiss Splash
screen
Activation events
• OnLaunched
– User invokes app from Tile or Notification
• OnSearchActivated
– User selects your app from search pane
• OnSharingActivated
– User selects your app from share pane
• OnFilePickerActivated
– User selects your app via FilePicker to select files from
• OnFileActivated
– User selects file your app has a registered handler for
DEMO
APPLICATION EVENTS
Congratulations,
you earned a badge!
Windows 8 Life time achievement
TILES AND MORE
You all remember tiles from WP7?
• Represents the app while not active
• It’s a view in the application that engages the
user
• Can be updating and alive with activity
– Easy to create and update!
• Draw users back into your app over and over
2 types of tiles: regular ones
• Tap on tile to launch or switch to an app
• Static default tile specified in app manifest
• Two sizes:
• Both sizes can have live updates
2 types of tiles: Live tiles
•
•
•
•
•
Tiles updated using pre-defined templates
Templates provide rich rendering options
Text-only, image-only or combination
JPEG or PNG only, max size 150 KB
Local or cloud updates
– Can even use the Push Notifications
Badges
• Overlays status on top of tile
• Supports square and wide tiles
• Number up to 99 or pre-defined glyph:
• Always legible on top of images
Badge
Badge
Secondary tiles
•
•
•
•
•
•
Tiles created by “pinning” content from app
Pin initiated by app via simple runtime call
User confirms pin operation via system UI
Exposes a personalized surface for app
Same capabilities as app tiles
Launch leads to relevant content
DEMO
(LIVE) TILES
Congratulations,
you earned a badge!
Tile builder
STORAGE API
Can I touch your file please?
• Metro apps are more or less like Silverlight
when it comes to storage
• Files can be
– App data (specific for the application)
– Local on the machine
– On a device or a network
– On the web
• Depending on the location, different
restrictions and access model are in place
App data
• Your Metro app has FULL access on its local
folder:
– C:\Users\<user_name>\AppData\Local\Packages\
<package>
– Can create, delete, modify… files
– Accessible via ApplicationData.Current.LocalFolder
Library access
• If your app wants access to a library on the
device, it needs to specify this in the manifest
– Forget this to get an
System.UnauthorizedAccessException
• Music, Picture and Video libraries: nothing
extra needed
• Documents Library: also requires filetypes to
be specified
I need to access C:\temp
• Sorry, no can do!
• Only accessible via the FilePicker API
– Remember, about the same in Silverlight
DEMO
STORAGE API
Congratulations,
you earned a badge!
Mr Input
Summary
Look what you already know!
New badge unlocked!
N
Windows 8 Metro app developer
Q&A
THANKS!
Metro and WinRT for the
Silverlight/WPF Developer
Part 2
SILVERLIGHTSHOW.NET WEBINARS SERIES
GILL CLEEREN, February 2nd 2012
www.snowball.be - gill.cleeren@ordina.be - @gillcleeren