Metro and WinRT for the Silverlight/WPF Developer Part 2 SILVERLIGHTSHOW.NET WEBINARS SERIES GILL...

Metro and WinRT for the Silverlight/WPF DeveloperPart 2SILVERLIGHTSHOW.NET WEBINARS SERIESGILL CLEEREN, February 2nd 2012www.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 ebooksGetting 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 ebooksSilverlight 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

You can earn the “Stylish Windows 8

developer” badge

(on the other hand, do you really want

that...?)

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

SWITCHING TO THE LIGHT THEMEDEMO

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

STYLING AND TEMPLATING APPLICATIONS

DEMO

Congratulations, you earned a badge!

Stylish Windows 8 developer

WORKING WITH DATA IN WINDOWS 8 APPS

You can earn the “Data

master” badge

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(() => …);

GETTING DATA TO YOUR WINDOWS 8 APPLICATION

DEMO

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

DATA BINDING AND DATA TEMPLATES IN WINDOWS 8

DEMO

Congratulations, you earned a badge!

Data master

APPLICATION LIFECYCLE

You can earn the “Windows 8 Life time

achievement” badge

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

Running AppSuspended

App

Suspending

Resuming

Terminated App

Low Memory

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

APPLICATION EVENTSDEMO

Congratulations, you earned a badge!

Windows 8 Life time achievement

TILES AND MORE

You can earn the “Tile builder” badge

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

Square (1x1) Wide (2x1)

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

BadgeBadge

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

(LIVE) TILESDEMO

Congratulations, you earned a badge!

Tile builder

STORAGE API

You can earn the “Mr Input” badge

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

STORAGE APIDEMO

Congratulations, you earned a badge!

Mr Input

Summary

Look what you already know!

N

New badge unlocked!

Windows 8 Metro app developer

Q&A

THANKS!

Metro and WinRT for the Silverlight/WPF DeveloperPart 2SILVERLIGHTSHOW.NET WEBINARS SERIESGILL CLEEREN, February 2nd 2012www.snowball.be - gill.cleeren@ordina.be - @gillcleeren