Metro and WinRT for the Silverlight/WPF DeveloperSILVERLIGHTSHOW.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 may look like the typical “Introduction to Silverlight for developers” or something...

But it’s really all about transferring your current knowledge to Windows 8.

This is the road to development on Windows 8

In this part...•General XAML stuff for Windows 8•Old and new controls•Finding your way with navigation

This is the road to development on Windows 8

In the second part (next week Thursday 9th February)•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

•Visit SilverlightShow.net

Focus on...

Windows Core OS Services

JavaScript(Chakra)

CC++

C#VB

Metro style Apps

Communication & Data

Application Model

Devices & Printing

WinRT APIs

Graphics & Media

XAML HTML / CSS

HTMLJavaScript

CC++

C#VB

Desktop Apps

Win32 .NET / SL

Internet Explorer

Before we begin... You can earn something!

For every Metro topic you already know, you get a badge!

For every Metro topic you already know, you get a badge!

GENERAL XAML STUFF FOR WINDOWS 8

You can earn the “General XAML for Windows 8” badge

The user is free to select any device, Windows 8 will support it.

Your app needs to adapt to bring the best possible experience.

Size doesn’t matter... (For XAML, that is)

• Minimum app resolution is 1024x768• Baseline resolution is 1366x768• On any resolution, your app should still look

good– However, it should use the added screen estate

We’re lucky to have XAML

• XAML supports fluid layout– Horizontal and vertical stretching of elements– Star-sizing

(Yes, you know this already...)

XAML has fixed layouts

But fluid layouts are often a better choice

Windows 8 supports new and changing formats for apps: an app can be snapped while running.

Snap view is new... • The “Snapped app” is always 320px wide

• User can choose to snap your app

– Any app can be snapped, even a game

• Some apps don’t make sense in snapped view, pausing them might be a good idea

• Context is maintained between several views

– Continuous flow of context

• For perfect experience, the app can adapt to changing views

• Scrolling patterns change in Snapped

• Can be called by swiping or using Win + .

Grid Template Normal

Grid Template Snapped

And the user will rotate that device... He will (we all know that...).

What will (or should we say “Should”?) your app do?

What about orientation?

• Windows 8 supports to be rotated (if supported by the device)– Don’t go rotating your laptop, it won’t work

• Apps behave consistently in orientation changes

• Apps can be tailored to be in specific orientations

• Apps can prefer and/or lock an orientation• While in Portrait, snapping doesn’t work

New properties for orientation

New properties for orientation

Now what do I use?

• Resize

– Window events…you will still get them

• Layout

– View “state” changes: FullScreen, Filled, Snapped

• Orientation

– Portrait Landscape changes

And do you still remember our good friend, the VisualStateManager?

(Yes you do, remember you need to earn that badge!)

VisualStateManager

• VSM can be used in combination with layout• A VisualState for a layout– FullScreen (this is ‘normal’ and Landscape)– Filled– Snapped– Portrait

• VisualStateManager.GoToState() helps easy switching

GENERAL XAML STUFF FOR WINDOWS 8

DEMO

Congratulations, you earned a badge!

General XAML for Windows 8

OLD AND NEW CONTROLS

You can earn the “Be in Control with Windows 8” badge

Controls• Most “old” XAML controls are still supported:– Same control model supported in Silverlight, WP7 and

WPF– Same properties (mostly)– Animations, Visual State Manager (VSM) and Parts

model• We’ll see VSM again later

– Content and item controls still exist, new ones have been added

– Updated to support both touch and mouse• PointerXXX events

– Styled with a Windows 8 style • Similar to WP7 default styles

Most old controls made the transfer to Windows 8...

THE “GOLDEN OLDIES” IN WINDOWS 8

DEMO

Some are new and shiny!

Or perhaps not that new...

Some of the new controls

• MediaPlayer• ToggleSwitch• ProgressRing

Hello WP7 ApplicationBar (close enough)

• Contains UI for app commands– Replaces your typical menus and toolbars

• Persistent, light dismiss or time dismiss• Swipe in from top/bottom to display

THE “NEW CONTROLS ON THE BLOCK”

DEMO

And then there were collections...

Collections are everywhere, also in Windows 8...

New XAML list controls that work almost identically to “old” ones have been added in Windows 8.

New XAML List controls• ListView• GridView– Supports grouping

• Semantic zoom (JumpViewer)• FlipView

• They support new selection models– Single– Multiple– Grouping

Just use them as you would today.

ListView

• Like a ListBox, but optimized for Windows 8• Supports virtualization• Often handy in snapped view

Interaction model

• IsItemClickEnabled• ItemClick event• SelectionMode

CHANGE LISTBOX INTO LISTVIEWDEMO

GridView

• Allows creation of grid-based layouts• Supports grouping of items (next slide)• Has WrapGrid or VariableSizedWrapGrid

GRouping in the GRidview

• Group content by natural ordering of lists– Needs to be done by the developer, control

doesn’t know on what it should group

• Visually appealing headers that fit in with Metro style UI

GRIDVIEW AND GROUPINGDEMO

Semantic zoom<JumpViewer> <JumpViewer.ContentView>

...//some xaml here...

</JumpViewer.ContentView> <JumpViewer.JumpView>

...//some more xaml here...

</JumpViewer.JumpView></JumpViewer>

SEMANTIC ZOOMDEMO

Congratulations, you earned a badge!

Be in Control with Windows 8

FINDING YOUR WAY WITH NAVIGATION

You can earn the “The

Navigator” badge

Same concepts as Silverlight and WP7

• Frame– Top-level container control– Contains the page control

• Page– Fills the entire content region of the frame– Can navigate to other pages within frame– Pages can share data...(!!!)

Navigation APIs are similar• Windows.UI.Xaml.Navigation

– NavigationCacheMode– NavigationMode– NavigationFailed– NavigationStopped– LoadCompleted

• Frame– GoBack()– GoForward()– Navigate()– Source

• Page– OnNavigateFrom– OnNavigateTo– Frame

Frames and pages in Windows 8

• Frame control represents the navigation container– Always accessible via this.Frame• NavigationService isn’t available

• Page control represents discrete sections of content

• Share objects/data between your pages– This is new! Page 3

Some new stuff in the navigation area

• Page defines caching behavior on NavigationCacheMode

• Frame controls navigating history stack– GoBack()– GoForward()– Navigate()– NavigationMode

Transitions

• Integrate Windows 8 look and feel for transitions

• Frame supports content transitions– EntranceThemeTransition

• Other transitions available for different scenarios

NAVIGATION THROUGH WINDOWS 8

DEMO

Congratulations, you earned a badge!

The Navigator

Summary

Look what you already know!

NEXT WEEK IN PART 2

Q&A

THANKS!

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