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

About myself... Gill Cleeren.NET ( Microsoft Regional Director Silverlight MVP Speaker (TechDays, TechEd, DevReach, DevDays, NDC Norway, Telerik Usergroup tour Sweden, UK and Scotland...) Visug user group lead ( Author (Silverlight 4 Data and services cookbook) – And a new one is being finished as we speak! Blog:

Some practical stuff Ask questions through Q&A window – Well 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 !

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, thats my book )

New version coming soon! Updated for Silverlight 5 Over 115 recipes (thats 30 extra!) Extended to about 700 pages (thats 250 extra!) Covering WP7, MVVM, RIA Services and much more! More info:

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) IOing 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 for the recording!

Remember! For every Metro topic you already know, you get a badge! 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 THEME DEMO

Get your style right! Windows 8 provides great controls through the platform (weve 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 apps 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 Doesnt block UI thread – Doesnt 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

When the app is about to be shut down OnSuspending event on app object is your chance Understanding users 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 EVENTS DEMO

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 Its 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

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) TILES DEMO

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\ \AppData\Local\Packages\ – 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 API DEMO

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 Developer Part 2 SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd