wintellect.comconsulting training design debugging

Windows 8 for Silverlight/WPF Coderz

Jeremy Likness (@JeremyLikness)Principal Consultantjlikness@wintellect.com Copyright © 2012

wintellect.comconsulting training design debugging

Founded by top experts on Microsoft – Jeffrey Richter, Jeff Prosise, and John Robbins – we pull out all the stops to help our customers achieve their goals through advanced software-based consulting and training solutions.

Consulting & Debugging• Architecture, analysis, and design services• Full lifecycle custom software development• Content creation• Project management• Debugging & performance tuning

Training• On-site instructor-led training• Virtual instructor-led training• Devscovery conferences

Design• User Experience Design• Visual & Content Design• Video & Animation Production

what we do

who we are

how we do it

consulting training debuggingdesign

wintellect.comconsulting training design debugging

Building Windows 8 Apps

• Everything you need to build and deploy Windows 8 Apps

• Full source code online• Leverage your C# and XAML

skills• Learn about new concepts,

like:– Roaming storage– Live Tiles and Notifications – The Windows Store

http://bit.ly/win8design

wintellect.comconsulting training design debugging

• Introduction• XAML and Blend• Animations• Styles – Parts and States• New Controls – Grouping and Sorting • Visual State Manager (Orientations, Snapped, Resolutions)• WinRT• Charms and Contracts• Application Bar • Portable Class Library• Strategies for Managing the Gap • Recap

Agenda

wintellect.comconsulting training design debugging

• Brand new look and feel• Run on a variety of devices• Sold through the Windows Store• Language choice (we’ll focus on C#/XAML, but

C++/XAML and HTML5/JavaScript are available)• Single, chromeless window that fills the entire screen• Multiple layouts – orientation, snapped, form-factors,

etc.• Touch-first but pen, mouse, and keyboard friendly • Apps “talk to each other” through contracts• New controls and UI surfaces• Tiles instead of icons

Introduction: Windows 8 Apps

wintellect.com

demo

consulting training design debugging

Windows 8 Apps

wintellect.comconsulting training design debugging

• XAML very similar to Silverlight/WPF–Namespaces change–No markup extensions

• Still design-time friendly• MVVM built-in to the templates• You still have a friend in Blend!

XAML and Blend

wintellect.com

demo

consulting training design debugging

XAML and Blend

wintellect.comconsulting training design debugging

• Same old story(board)• Plus a whole lot more• Animations Library makes life

easy

Animations

wintellect.com

demo

consulting training design debugging

Animations

wintellect.comconsulting training design debugging

• Same concept, can use styles “as is” in many cases

• Resource keys allow for theme-aware styles (ex: high contrast)

• Same parts and states for controls• StyleSelector to return styles

Styles

wintellect.comconsulting training design debugging

<ResourceDictionary> <ResourceDictionary.ThemeDictionaries> <ResourceDictionary x:Key="Default"> <SolidColorBrush x:Key="AppBarBackgroundThemeBrush“ Color="#E5000000" /> <SolidColorBrush x:Key="AppBarBorderThemeBrush“ Color="#E5000000" /> </ResourceDictionary> <ResourceDictionary x:Key="HighContrast"> <SolidColorBrush x:Key="AppBarBackgroundThemeBrush“ Color="{StaticResource SystemColorButtonFaceColor}" /> <SolidColorBrush x:Key="AppBarBorderThemeBrush“ Color="{StaticResource SystemColorHighlightColor}" /> </ResourceDictionary> </ResourceDictionary.ThemeDictionaries></ResourceDictionary>

Theme Dictionaries

wintellect.comconsulting training design debugging

public class MyStyleSelector: StyleSelector{ protected override Style SelectStyleCore( object item, DependencyObject container) { Style style = new Style(typeof(ListViewItem)); style.Setters.Add(new Setter( ListViewItem.ForegroundProperty, new SolidColorBrush(Colors.Red))); return style; }}

<ListView ItemsSource="{Binding Widgets}" ItemContainerStyleSelector="{StaticResource MyStyleSelector}" />

StyleSelector

wintellect.comconsulting training design debugging

• Progress ring• Spell-check support • GridView• ListView• FlipView• SemanticZoom• Touch-first

New Controls

wintellect.com

demo

consulting training design debugging

Controls

wintellect.comconsulting training design debugging

• Behaves the same as Silverlight• Used in the fundamental

templates • Helpful for orientation and display

mode changes• Full Blend support

Visual State Manager

wintellect.com

demo

consulting training design debugging

VSM

wintellect.comconsulting training design debugging

• The new API for Windows 8 apps• Has it’s own type system • Provides language projections for support in

JavaScript, C#, C++, etc. • Automatic mapping between types• You can create WinRT using managed code for

consumption by non-managed Windows Store apps• See the built-in WinRT types:

c:\windows\system32\WinMetadata• Uses ECMA-335 for type definitions – use

ILDASM.exe

WinRT

wintellect.com

demo

consulting training design debugging

WinRT

wintellect.comconsulting training design debugging

• Use Charms (Windows Key + C) to invoke certain contracts

• Contracts are agreements between Windows Store apps

• Extensions are agreements between Windows Store apps and the Windows 8 operating system

• Contracts: Cached file updater, file picker, play to, search, settings, share

• Extensions: account picture provider, AutoPlay, background tasks, camera settings, contact picker, file activation, game explorer, print task settings, protocol activation, SSL/certificates

Charms, Contracts, Extensions

wintellect.com

demo

consulting training design debugging

Contracts and Extensions

wintellect.comconsulting training design debugging

• Similar to Windows Phone concept• Drop-in control • Automatically handles show/hide• Advanced scenarios like IE10• Commands live at the edge:

– Right-edge = Charms and “system level” commands– Bottom, top edges = Application commands

Application Bar

wintellect.comconsulting training design debugging

• Built into Visual Studio 2012• Dozens of profiles based on various combinations• Finds the common API surface area between target

platforms• Supported targets:

– .NET Framework 4.0 – 4.5– Silverlight 4 – 5 – Windows Phone 7 – 7.5– .NET for Windows Store apps– Xbox 360

• More targets = less surface area

Portable Class Library

wintellect.comconsulting training design debugging

• Only target the specific frameworks you know you will use (i.e. don’t target Windows Phone if that’s not on your radar)

• Build as much functionality into the API surface area you can

• Use interfaces (IoC/DI) and delegates for functionality that must be platform specific

• Don’t try to share XAML. The various targets all have different design considerations.

Strategies for Managing the Gap

wintellect.com

demo

consulting training design debugging

Wintellog (MVVM + WPF and Windows Store)

wintellect.comconsulting training design debugging

• XAML and Blend• Animations• Styles – Parts and States• New Controls – Grouping and Sorting • Visual State Manager (Orientations, Snapped,

Resolutions)• WinRT• Charms and Contracts• Application Bar • Portable Class Library• Strategies for Managing the Gap

Recap

wintellect.comconsulting training design debugging

• Twitter me: @JeremyLikness

• Blog me: http://csharperimage.jeremylikness.com/

• Book me:http://bit.ly/win8design

• Source me:http://windows8applications.codeplex.com/

Links

wintellect.com

Questions?

consulting training design debugging

Jeremy Likness (@JeremyLikness)Principal Consultantjlikness@wintellect.com