Metro and WinRT for the Silverlight/WPF Developer

SILVERLIGHTSHOW.NET WEBINARS SERIES

Click to edit 2nd 2012 GILL CLEEREN, February Master subtitle style www.snowball.be - gill.cleeren@ordina.be - @gillcleeren

3/12/13

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!

3/12/13

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

3/12/13

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!

3/12/13

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 )
3/12/13

New version coming soon!

Updated for Silverlight 5 Over 115 recipes (thats 30 extra!) Extended to about 700 pages (thats 250 extra!) Covering WP7, http://bit.ly/SL5DataAnd Services MVVM, RIA Services 3/12/13 and much more!

This may look like the typical Introduction to Silverlight for developers or something...

3/12/13

But its really all about transferring your current knowledge to Windows 8.

3/12/13

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

3/12/13

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

(Copyright 2010

The Application Lifecycle

Windows Phone 7)

3/12/13

Tiles and more

(Copyright 2010 Windows Phone

Focus on...
Metro style Apps
XAML C C++
Communication & Data

Desktop Apps
HTML
JavaScrip t

HTML / CSS C# VB JavaScript (Chakra)

Devices & Printing

WinRT APIs
Graphics & Media Application Model

Session Focus
Internet Explorer

C C++

C# VB

Win32

.NET / SL

Windows Core OS Services

3/12/13

Before we begin... You can earn something!

3/12/13

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

3/12/13

L for eneral XAM he G can earn t You adge dows 8 b Win

General XAML stuff for Windows 8

3/12/13

The user is free to select any device, Windows 8 will support it. Your app needs to adapt to bring the best possible experience.

3/12/13

Size doesnt 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

3/12/13

Were lucky to have XAML

XAML supports fluid layout

Horizontal and vertical stretching of elements Star-sizing

(Yes, you know this already...)

3/12/13

XAML has fixed layouts

<Grid x:Name="LayoutRoot" Background="Green"> <Grid.ColumnDefinitions> <ColumnDefinition Width="250" /> <ColumnDefinition Width="250" /> <ColumnDefinition Width="250" /> </Grid.ColumnDefinitions> <Rectangle Fill="Red" Grid.Column="1" /> </Grid>

<Grid x:Name="LayoutRoot" Background="Green"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="3*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Rectangle Fill="Red" Grid.Column="1" /> </Grid>

But fluid layouts are often a better choice

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

3/12/13

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 dont make sense in snapped view, pausing them might be a good idea

Context is maintained between several views

Continuous 3/12/13

flow of context

3/12/13

Grid Template Normal

3/12/13

3/12/13

Grid Template Snapped

3/12/13

FullScreen

3/12/13

Snapped

Filled

3/12/13

And the user will rotate that device... He will (we all know that...). What will (or should we say Should?) your app do?

3/12/13

What about orientation?

Windows 8 supports to be rotated (if supported by the device)

Dont go rotating your laptop, it wont work

Apps behave consistently in orientation changes Apps can be tailored to be in specific orientations Apps can prefer and/or lock an 3/12/13

New properties for orientation

<Application > <VisualElements DisplayName="Application18" Logo="Images\Logo.png" SmallLogo="Images\SmallLogo.png" Description="Application18" ForegroundText="light" BackgroundColor="#222222" InitialRotationPreference="landscapeAndFlipped">

3/12/13

New properties for orientation

protected override void OnLaunched(LaunchActivatedEventArgs args) { DisplayProperties.AutoRotationPreferences = DisplayOrientations.Landscape | DisplayOrientations.LandscapeFlipped; Window.Current.Content = new MainPage(); Window.Current.Activate(); }

3/12/13

Now what do I use?

Resize

Window eventsyou will still get them

Layout

View state changes: FullScreen, Filled, Snapped

Orientation

Portrait Landscape changes

3/12/13

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

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

3/12/13

VisualStateManager

VSM can be used in combination with layout A VisualState for a layout

FullScreen (this is normal and Landscape) Filled Snapped Portrait

3/12/13

VisualStateManager.GoToState()

DEMO

General XAML stuff for Windows 8

3/12/13

Congratulations, you earned a badge!

General XAML for Windows 8

3/12/13

with in Control he Be can earn t You adge dows 8 b Win

Old and new controls

3/12/13

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

Well see VSM again later

Content and item controls still exist, new 3/12/13 ones have been added

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

3/12/13

Butt on Checkb ox Hyperli nk Context Menu Web View Radio Button Combo Box

Grid View

Text Box

Spell Check

Progress Ring

List View

Semantic Zoom

Passwor d Navigati on

Flip View

List Box

Panning Indicator Too ltip Sli der Scroll Bar Progress Bar

Toggle Switch

3/12/13

DEMO

The Golden Oldies in Windows 8

3/12/13

Some are new and shiny! Or perhaps not that new...

3/12/13

Some of the new controls

MediaPlayer ToggleSwitch ProgressRing

3/12/13

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

3/12/13

DEMO

The New controls on the block

3/12/13

And then there were collections... Collections are everywhere, also in Windows 8...

3/12/13

3/12/13

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

3/12/13

New XAML List controls

ListView GridView

Supports grouping

Semantic zoom (JumpViewer) FlipView They support new selection models

3/12/13

Single

Just use them as you would today.

3/12/13

ListView

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

3/12/13

Interaction model

IsItemClickEna bled ItemClick event SelectionMode

3/12/13

DEMO

Change ListBox into ListView

3/12/13

GridView

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

3/12/13

GRouping in the GRidview

Group content by natural ordering of lists

Needs to be done by the developer, control doesnt know on what it should group

Visually appealing headers that fit in with Metro style UI

3/12/13

DEMO

GridView and Grouping

3/12/13

Semantic zoom
<JumpViewer> <JumpViewer.ContentView> ... //some xaml here ... </JumpViewer.ContentView> <JumpViewer.JumpView> ... //some more xaml here ... </JumpViewer.JumpView> </JumpViewer>

3/12/13

DEMO

Semantic zoom
3/12/13

Congratulations, you earned a badge!

Be in Control with Windows 8

3/12/13

The n earn the You ca dge vigator ba Na

Finding your way with navigation

3/12/13

Same concepts as Silverlight and WP7

Frame

Top-level container control Contains the page control Fills the entire content region of the frame Can navigate to other pages within frame Pages can share data...(!!!)

Page

3/12/13

Navigation APIs are similar

Windows.UI.Xaml.Navigation

NavigationCacheMode NavigationMode NavigationFailed NavigationStopped LoadCompleted GoBack() GoForward()

Frame

3/12/13

Frames and pages in Windows 8

Frame control represents the navigation container

Always accessible via this.Frame

NavigationService isnt available

Page control represents discrete sections of content Share objects/data between your pages
3/12/13

Frame Page 1 2 3

This is new!

Some new stuff in the navigation area

Page defines caching behavior on NavigationCacheMode Frame controls navigating history stack

GoBack() GoForward() Navigate() NavigationMode

3/12/13

Transitions

Integrate Windows 8 look and feel for transitions Frame supports content transitions

EntranceThemeTransition

Other transitions available for different scenarios

3/12/13

DEMO

Navigation through Windows 8

3/12/13

Congratulations, you earned a badge!

The Navigator
3/12/13

Summary
Look what you already know!

3/12/13

NEXT WEEK IN PART 2

Q&A
3/12/13

Thanks!
3/12/13

Metro and WinRT for the Silverlight/WPF Developer

SILVERLIGHTSHOW.NET WEBINARS SERIES
Click to edit 2nd 2012 GILL CLEEREN, February Master subtitle style www.snowball.be - gill.cleeren@ordina.be - @gillcleeren

3/12/13