wintellect.comconsulting training design debugging
Windows 8 for Silverlight/WPF Coderz
Jeremy Likness (@JeremyLikness)Principal [email protected] 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 [email protected]