windows 8 for the xaml developer part 1

7/29/2019 Windows 8 for the XAML Developer Part 1

1/71

Click to edit Master subtitle style

3/12/13

Metro and WinRT for

the Silverlight/WPFDeveloperSILVERLIGHTSHOW.NET WEBINARS SERIESGILL CLEEREN, February 2nd 2012www.snowball.be - [email protected] - @gillcleeren


2/71

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!

Blo : www.snowball.be
http://www.ordina.be/http://www.visug.be/http://www.snowball.be/http://www.snowball.be/http://www.visug.be/http://www.ordina.be/


3/71

3/12/13

Some practical stuff

Ask questions through Q&A window

Well answer them after the session or bypersonal mail

A link to the video recording will besent to you


4/71

3/12/13

You can win!

Complete the post-webinar survey andwin!

You can win one of the 3ebooks

Getting Ready forMicrosoft Silverlight Exam

70-506!


5/71

3/12/13

You can win!

Tweet this webinar (comments,feedback...) using#webinarsilverlightshow tag!

You can win one of the 3ebooks

Silverlight 4Data and Services

Cookbook

(yep, thats my book )


6/71

3/12/13

New version coming soon!

Updated forSilverlight 5

Over 115 recipes(thats 30 extra!)

Extended to about

700 pages (thats250 extra!)

Covering WP7,

MVVM, RIA Servicesand much more!

http://bit.ly/SL5DataAndServices


7/71

3/12/13

This may look like the typical

Introduction to Silverlight fordevelopersor something...


8/71

3/12/13

But its really all about

transferringyour current knowledgeto Windows 8.


9/71

3/12/13

This is the road todevelopment on Windows 8In this part...

General XAML stuff for Windows 8

Old and new controls Finding your way with navigation


10/71

3/12/13

This is the road todevelopment on Windows 8In the second part (next weekThursday 9th February)

Styling and templating Data in your Windows 8 apps

Getting data

Data binding

The Application Lifecycle (Copyright 2010Windows Phone 7)

Tiles and more (Copyright 2010 Windows Phone


11/71

3/12/13

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 HTMLJavaScrip

t

CC++

C#VB

Desktop Apps

Win32 .NET/ SL

InternetExplorer

SessionFocus


12/71

3/12/13

Before we begin... You can earn

something!


13/71

3/12/13

For every Metro topic you alreadyknow,

you get a badge!


14/71

3/12/13

General XAML stufffor Windows 8

YoucanearntheGe

neralXAMLfor

Windows8badge


15/71

3/12/13

The user is free to select any

device,Windows 8 will support it.

Your app needs to adapt to

bringthe best possible experience.


16/71

3/12/13

Size doesnt matter...(For XAML, that is)

Minimum app resolution is 1024x768

Baseline resolution is 1366x768

On any resolution, your app shouldstill look good

However, it should use the added screen

estate


17/71

3/12/13

Were lucky to have XAML

XAML supports fluid layout

Horizontal and vertical stretching ofelements

Star-sizing

(Yes, you know this already...)


18/71

XAML has fixed layouts


19/71

But fluid layouts are often abetter choice


20/71

3/12/13

Windows 8 supports new and changing

formats for apps:an app can be snapped while running.


21/71

3/12/13

Snap view is new...

The Snapped app is always 320pxwide

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 flow of context


22/71

3/12/13


23/71

3/12/13

Grid Template Normal


24/71

3/12/13


25/71

3/12/13

Grid Template Snapped


26/71

3/12/13

FullScreen


27/71

3/12/13

FilledSnapped


28/71

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?


29/71

3/12/13

What about orientation?

Windows 8 supports to be rotated (ifsupported by the device)

Dont go rotating your laptop, it wontwork

Apps behave consistently inorientation changes

Apps can be tailored to be in specificorientations

Apps can prefer and/or lock an


30/71

3/12/13

New properties fororientation


31/71

3/12/13

New properties fororientation

protectedoverridevoidOnLaunched(LaunchActivatedEventArgs args){

DisplayProperties.AutoRotationPreferences =DisplayOrientations.Landscape |DisplayOrientations.LandscapeFlipped;

Window.Current.Content = newMainPage();

Window.Current.Activate();}


32/71

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


33/71

3/12/13

And do you still remember our

good friend,the VisualStateManager?

(Yes you do, remember you need to earn thatbadge!)


34/71

3/12/13

VisualStateManager

VSM can be used in combination withlayout

A VisualState for a layout

FullScreen (this is normal andLandscape)

Filled

Snapped

Portrait

VisualStateManager.GoToState()


35/71

3/12/13

General XAML stufffor Windows 8

DEMO


36/71

3/12/13

Congratulations,

you earned a badge!

General XAML forWindows 8


37/71

3/12/13

Old and new controls

YoucanearntheBe

inControlwith

Windows8badge


38/71

3/12/13

Controls

Most old XAML controls are stillsupported:

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

ones have been added


39/71

3/12/13

Most old controls made the transfer to

Windows 8...

TextGridButt Spell


40/71

3/12/13

ListBox

Hyperlink

Checkbox

ProgressBar

TextBox

Password

ProgressRing

Tooltip

GridView

Button

FlipView

Combo

Box

ScrollBar

ContextMenu

Slider

Toggle

Switch

SemanticZoom

PanningIndicator

Navigati

on

ListView

WebView

RadioButton

SpellCheck


41/71

3/12/13

The Golden Oldies inWindows 8

DEMO


42/71

3/12/13

Some are new and

shiny!

Or perhaps not thatnew...


43/71

3/12/13

Some of the new controls

MediaPlayer

ToggleSwitch

ProgressRing

H ll WP7 A li ti B


44/71

3/12/13

Hello WP7 ApplicationBar(close enough)

Contains UI for app commands

Replaces your typical menus andtoolbars

Persistent, light dismiss or timedismiss

Swipe in from top/bottom to display


45/71

3/12/13

The New controls on theblock

DEMO


46/71

3/12/13

And then there were collections...

Collections are everywhere, also inWindows 8...


47/71

3/12/13


48/71

3/12/13

New XAML list controls that work almostidenticallyto old ones have been added inWindows 8.


49/71

3/12/13

New XAML List controls

ListView

GridView

Supports grouping Semantic zoom (JumpViewer)

FlipView

They support new selection models

Single


50/71

3/12/13

Just use them as you wouldtoday.


51/71

3/12/13

ListView

Like a ListBox, but optimized forWindows 8

Supports virtualization

Often handy in snapped view


52/71

3/12/13

Interaction model

IsItemClickEnabled

ItemClickevent

SelectionMode


53/71

3/12/13

Change ListBox intoListView

DEMO


54/71

3/12/13

GridView

Allows creation of grid-based layouts

Supports grouping of items (nextslide)

Has WrapGrid orVariableSizedWrapGrid


55/71

3/12/13

GRouping in the GRidview

Group content by natural ordering oflists

Needs to be done by the developer,

control doesnt know on what it shouldgroup

Visually appealing headers that fit in

with Metro style UI


56/71

3/12/13

GridView and Grouping

DEMO


57/71

3/12/13

Semantic zoom

...//some xaml here...

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


58/71

3/12/13

Semantic zoom

DEMO

C l i


59/71

3/12/13

Congratulations,you earned a badge!

Be in Control withWindows 8


60/71

3/12/13

Finding your way with

navigation

YoucanearntheTh

e

Navigatorbadge

Same concepts as


61/71

3/12/13

Same concepts asSilverlight 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...(!!!)


62/71

3/12/13

Navigation APIs are similar

Windows.UI.Xaml.Navigation

NavigationCacheMode

NavigationMode

NavigationFailed

NavigationStopped

LoadCompleted Frame

GoBack()

GoForward

Frames and pages in


63/71

3/12/13

Frames and pages inWindows 8

Frame control represents thenavigation container

Always accessible via this.Frame

NavigationService isnt available

Page control represents discretesections of content

Share objects/databetween your pages

This is new!

FramePage 1Page 2Page 3

Some new stuff in the


64/71

3/12/13

Some new stuff in thenavigation area

Page defines caching behavior onNavigationCacheMode

Frame controls navigating historystack

GoBack()

GoForward()

Navigate()

NavigationMode


65/71

3/12/13

Transitions

Integrate Windows 8 look and feel fortransitions

Frame supports content transitions

EntranceThemeTransition

Other transitions available for

different scenarios


66/71

3/12/13

Navigation throughWindows 8

DEMO

C t l ti


67/71

3/12/13

Congratulations,you earned a badge!

TheNavigator


68/71

3/12/13

Summary

Look what you already know!

NEXTWEEKIN

PART 2


69/71

3/12/13

Q&A


70/71

3/12/13

Thanks!


71/71

Click to edit Master subtitle style

Metro and WinRT forthe Silverlight/WPFDeveloperSILVERLIGHTSHOW.NET WEBINARS SERIESGILL CLEEREN, February 2nd 2012www.snowball.be - [email protected] - @gillcleeren

windows 8 for the xaml developer part 1

Documents