1.
Windows 8 for Silverlight/WPF Coderz Jeremy Likness (@JeremyLikness) Principal Consultant jlikness@wintellect.com Copyright © 2012consulting training design debugging wintellect.com

2.
what we do consulting training design debugging who we are 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. how we do it Training • On-site instructor-led training Consulting & Debugging • Virtual instructor-led training • Architecture, analysis, and design services • Devscovery conferences • Full lifecycle custom software development • Content creation Design • Project management • User Experience Design • Debugging & performance tuning • Visual & Content Design • Video & Animation Productionconsulting training design debugging wintellect.com

3.
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/win8designconsulting training design debugging wintellect.com

4.
Agenda • 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 • Recapconsulting training design debugging wintellect.com

5.
Introduction: Windows 8 Apps • 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 iconsconsulting training design debugging wintellect.com

6.
demo Windows 8 Appsconsulting training design debugging wintellect.com

7.
XAML and Blend • 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!consulting training design debugging wintellect.com

8.
demo XAML and Blendconsulting training design debugging wintellect.com

9.
Animations • Same old story(board) • Plus a whole lot more • Animations Library makes life easyconsulting training design debugging wintellect.com

10.
demo Animationsconsulting training design debugging wintellect.com

11.
Styles • 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 stylesconsulting training design debugging wintellect.com

12.
Theme Dictionaries <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>consulting training design debugging wintellect.com

13.
StyleSelector 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}" />consulting training design debugging wintellect.com

14.
New Controls • Progress ring • Spell-check support • GridView • ListView • FlipView • SemanticZoom • Touch-firstconsulting training design debugging wintellect.com

15.
demo Controlsconsulting training design debugging wintellect.com

16.
Visual State Manager • Behaves the same as Silverlight • Used in the fundamental templates • Helpful for orientation and display mode changes • Full Blend supportconsulting training design debugging wintellect.com

17.
demo VSMconsulting training design debugging wintellect.com

18.
WinRT • 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:windowssystem32WinMetadata • Uses ECMA-335 for type definitions – use ILDASM.execonsulting training design debugging wintellect.com

19.
demo WinRTconsulting training design debugging wintellect.com

20.
Charms, Contracts, Extensions • 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/certificatesconsulting training design debugging wintellect.com

21.
demo Contracts and Extensionsconsulting training design debugging wintellect.com

22.
Application Bar • 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 commandsconsulting training design debugging wintellect.com

23.
Portable Class Library • 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 areaconsulting training design debugging wintellect.com

24.
Strategies for Managing the Gap • 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.consulting training design debugging wintellect.com

25.
demo Wintellog (MVVM + WPF and Windows Store)consulting training design debugging wintellect.com

26.
Recap • 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 Gapconsulting training design debugging wintellect.com

27.
Links • Twitter me: @JeremyLikness • Blog me: http://csharperimage.jeremylikness.com/ • Book me: http://bit.ly/win8design • Source me: http://windows8applications.codeplex.com/consulting training design debugging wintellect.com

28.
Questions? Jeremy Likness (@JeremyLikness) Principal Consultant jlikness@wintellect.comconsulting training design debugging wintellect.com