1. Waukesha, Wisconsin November, 15 2012 Daryl Rudolph

2. Windows 8 Unleashed Sponsored by Component Arts and Magenic Technologies Hosted by Microsoft Magenic presenting in 4 cities throughout the Midwest Lectures, demos and hands-on labs 3. Daryl Rudolph Principal Consultant, Magenic Technologies darylr@magenic.com 4. Magenic Technologies Custom application development since 1995 Microsoft Gold Partner Local Delivery, Global Reach Onsite - Minneapolis, Chicago, Boston, San Francisco, Atlanta, Ann Arbor Onshore Magenic Delivery Center (MDC) Offshore - Manila Leading authors and speakers on Microsoft technology Rockford Lhotka (inventor of the CSLA .NET framework) Looking for Software Superheroes ! www.magenic.com 5. Agenda Session I Windows 8 Overview Hands-on Lab I Session II Location and Data Hands-on Lab II Lunch Session III Lifecycle and More Hands-on Lab III Windows 8 App Contest 6. Session I Windows 8 Overview 7. Agenda Windows 8 Apps Overview Developing Windows 8 Apps > Working with Controls Implementing Navigation 8. Windows 8 Apps Overview Session 1 - Windows 8 Overview 9. 8 Traits of a Great Windows 8 App Embrace Core Principals Roam to the Cloud Feel Connected and AliveInvest in a Great Tile Use the Right Contracts Snap and Scale BeautifullyFast and Fluid Modern Design Language 10. Design App Silhouette 11. Design - Content Before Chrome 12. Design Leverage the Edge Left is for Back Right is for Charms Top and Bottom is for the Apps App Bars Top and Bottom edges do the same thing 13. Fast and Fluid Cornerstone of how Windows 8 Apps should feel Key Aspects Speed and Responsiveness Animations Touch Language Windows has an animation library built in to help! Command-Line Interface (CLI)Graphical User Interface (GUI)Touch User Interface (TUI) 14. Press and Hold to Learn Tap for Primary Action Slide to Drag Swipe to Select Pinch to Zoom Swipe from Edge Rotate to Rotate Fast and Fluid Touch Language 15. Snap and Scale Beautifully Full FillSnap 16. Use the Right Contracts Support communication between Apps Even though apps dont know each other Many exposed via the Charms Bar Contracts include: Search to allow users to search data from your app Share to provide information to another app Settings to store Application Settings File Picker provides App to App file services Play To to play Media to connected DNLA devices 17. Invest in a Great Tile A front door A complete picture Draw you in Remind youPersona l While you were away Connected Next upAn extension to the App 18. Feel Connected and Alive Live Tiles Keep user connected to your app Draw the user in Used for ambient info Notifications Users should be allowed to opt-in Notifications interrupt the user Could be missed if user isnt online Missed notifications arent saved anywhere Better Together Use notifications when it is ok for the user to miss the info Update live tile with longer term info 19. Roam to the Cloud Multiple Devices App Settings App State Users will likely have multiple devices Desktop, Laptop Tablet Phone Save settings to the cloud so that applications that run on multiple devices have consistent configuration. When user changes a setting on one device, it should be reflected on their other devices Application state should be persisted to the cloud and consumed by all devices: Current page in a document Current level in a game Etc. 20. Embrace Modern App Principals Fast and Fluid Win as One Authentically Digital Do More with Less Pride in Craftsmanship For more on Windows 8 App Design go to design.windows.com 21. Windows 8 Architecture Windows Kernel Services .NET SL Win32 Internet Explorer C# VB C / C++ HTML JavaScript Desktop Apps (x86/x64 Devices Only) Windows Runtime APIs (WinRT) Application Model Communication & Data Graphics & Media Devices & Printing C /C++ C# / VB.NET JavaScript XAML HTML5 Modern Windows 8 Apps (ARM & x86/x64 Devices) The New Way Works on ARM Devices as Well The Old Way Still Works 22. Value of Windows 8 Apps Windows Kernel Services Windows Runtime APIs (WinRT) Application Model Communication & Data Graphics & Media Devices & Printing C /C++ C# / VB.NET JavaScript XAML HTML5 Modern Windows 8 Apps (ARM & x86/x64 Devices) Runs on ARM Tablets Windows Store Contracts Search Share Printer File Play To. View States Full Fill Snap Application Lifecycle & much more! 23. Windows Store = Opportunity Windows 7 690M Android 345M iOS 190M Mac 32M As of March, 2012 - IDC 24. Developing Windows 8 Apps Session 1 - Windows 8 Overview 25. Development Tools You must be running Windows 8! Go to dev.windows.com Visual Studio 2012 Express for Win 8 Online documentation Windows, Live and Advertising SDKs Sample Apps Full Versions of Visual Studio can be used Visual Studio 2012 26. Design Tools design.windows.com UX Documentation UX Guidance Blend for Visual Studio Included with Visual Studio 2012 Can open VS Solutions & Projects Provides a more designer oriented UI Visual Studio and Blend share features Has an interactive mode for HTML5/CSS Better tool than Visual Studio for View States, Animations Gradients & More Blend for Visual Studio 2012 27. Windows 8 Simulator Windows 8 Simulator Still requires Windows 8 Its a Simulator NOT An Emulator Simulates GPS Touch & Gestures Screen Resolutions Portrait & Landscape Orientations 28. Visual Studio Project Templates 29. Blank App Clean Slate Add your own Controls and Code 30. Items Groups Hub Grid App Projects Hub & Spoke 3-Tier UI Hierarchy for Grouped Data 31. Items Groups Hub Split App Projects Hub & Spoke 2-Tier UI Hierarchy for Grouped Data 32. App Manifest File Package.Appxmanifest 33. App.xaml & App.xaml.cs Partial files defining a subclass of the Windows.UI.Xaml.Application class Subclass name is App Entry point of the application Supports Lifecycle Events OnLaunched OnSuspending OnActivated Supports Contracts (Search, Share, FilePicker) Stores Application Wide Resources (in App.xaml) Starts initial page for the app in OnLaunched // Create a Frame to act navigation context and navigate to the first page var rootFrame = new Frame(); if (!rootFrame.Navigate(typeof(MainPage))) { throw new Exception("Failed to create initial page"); } // Place the frame in the current Window and ensure that it is active Window.Current.Content = rootFrame; Window.Current.Activate(); 34. MainPage.xaml & MainPage.xaml.cs Partial files defining a Subclass of Windows.UI.Xaml.Controls.Page Subclass name is MainPage Windows.UI.Xaml.Controls.Page supports Navigation Frame property references the Frame that contains the page OnNavigatedTo event handler OnNavigatingFrom event handler OnNavigatedFrom event handler Use the .xaml document for Storing page level resources Defining Control Instances declaratively Use the .xaml.cs file for Code behind Implementing Page navigation events Page logic Consider using MVVM rather than using code-behind 35. Project Folders Assets Logo images Splash Screen Image Common (Depends on project type) StandardStyles.xaml Resource Dictionary BindableBase class Boolean Converters LayoutWarePage class & more DataModel (Depends on project type) Arbitrary folder. You can create your own Contains classes for data model 36. Demo Visual Studio Project Templates 37. Good By MessageBox, Hello MessageDialog Command bar that supports up to three custom UICommand buttons If no commands are specified a default close button is shown Dims the screen & Blocks interaction with the rest of the app Should be used sparingly MessageDialog and UICommand from Windows.UI.Popups namespace(new MessageDialog("Hello, Windows 8")).ShowAsync(); 38. Windows Run Time Asynchronous Operations Applications based on WinRT are inherently asynchronous Calls to Network Services Working with the File System Anything that might cause event the perception of delay By convention, asynchronous method names end with Async MessageDialog messages are shown Asynchronously: (new MessageDialog("Hello, Windows 8")).ShowAsync(); Previous asynchronous programming models have been difficult WinRT supports a simpler async programming model The C#, VB.NET, JavaScript & C++ langauges use this functionality 39. Using await with Aysnc operations C# await keyword wraps async calls up Allows you to call async calls as if they were synchronous Still benefit from async nature. UI remains responsive Much simpler programming model Compiler does all the heavy lifting for you No event handlers, callbacks, passing async state, etc. To use await, the calling method must be marked as async private async void ShowDialogButton_Click(object sender, RoutedEventArgs e) { MessageDialog dialog = new MessageDialog("Hello, Windows 8"); dialog.Commands.Add(new UICommand("First Command", null, 0)); dialog.Commands.Add(new UICommand("Second Command", null, 1)); var clickedCommand = await dialog.ShowAsync(); StatusText.Text = string.Format("You clicked the "{0}" button!", clickedCommand.Label); } 40. Demo Message Dialog Demo 41. Splash Screens Basic Splash Screen defined in Package.appxmanifest Splash Screen Image (supports multiple scales: 100, 140, 180) Background Color You may want to extend the Splash Screen display time Your App needs to load additional resources before it is ready Provide loading progress to the user on the splash screen Better than an incomplete or unresponsive UI being displayed Splash Screen Guidance: bit.ly/w8ussgl How to extend the Splash Screen: bit.ly/w8ussext 42. Splash Screen Scale Factor Images Windows 8 can be run on numerous devices & resolutions Can automatically select appropriate image for device You need to provide image at multiple resolutions: Include the scale factor in the actual file name: SplashScreen.scale-100.png SplashScreen.scale-140.png SplaceScreen.scale-180.png Refer to the image WITHOUT the Scale Factor: SplashScreen.png And For more information, read: bit.ly/w8uscale and bit.ly/w8ussgl Scale Factor Target Screen Resolution Splash Screen Image Size Splash Screen Image Name 100% (Original Size no scaling) 1366 x 768 620 x 300 ImageName.scale-100.ext 140% for HD Tablets 1920 x 1080 868 x 420 ImageName.scale-140.ext 180% for quad-XGA Tablets 2560 x 1440 1116 x 540 ImageName.scale-180.ext 43. Demo Splash Screen Demo 44. Working with Controls Session 1 - Windows 8 Overview 45. Controls Overview Controls are classes that provide a User Interface (usually) They make building your App easier Layout controls help position other controls on the page Text controls to display text or allow the user to edit text Button controls to allow user to invoke actions Checkboxes and Radio Buttons to set options Etc. Where do you get Controls? Many are included with the Windows 8 SDKs Third Party toolkits are available from control vendors Create your own if you cant find on that meets your needs 46. Types of Controls Layout Panels (Canvas, Grid, StackPanel) Buttons (Button, HyperlinkButton) Toggle Buttons (ToggleButton,CheckBox, RadioButton) Static Text (TextBlock, RichTextBlock) Text Editors (TextBox, PasswordBox, RichEditBox) Range Controls (Slider, ScrollBar) Media Controls (Image, MediaElement) Items Controls (ListView, GridView, FlipView) Progress Controls (ProgressBar, Progress Ring) Graphics Elements (Rectangle, Ellipse) Much More. 47. Adding controls to your page Using the Toolbox Type the XAML directly Create in Code-Behind Object Instance Name Property Name & ValueNamespace & Class Button button = new Button { Content = "Button" }; rootGrid.Children.Add(button); 48. Assigning Properties using the Properties Window Object Name and Type View Properties or Events Search for properties by name Arrange properties by Category Name Source Brush Editors Advanced Properties Property Mark to set value source Default (Reset) Local Resources Data Binding 49. Assigning Properties in XAML Missing properties assume defaults Simple property values use Attributes Complex property values use Elements: 50. Assigning Properties in Code Behind Assume the following is declared in XAML: Get a reference the control By using its name (x:Name) Walking the control tree and finding it manually if it isn't named Use code to set the objects property values MyButton Grid grid = this.Content as Grid; Button myButton = grid.Children[0] as Button; myButton.Content = "Set in Code"; myButton.Width = 100; myButton.Margin = new Thickness(10, 20, 10, 20); myButton.Foreground = new SolidColorBrush(Colors.Orange); 51. Parent Properties that are attached to a child element Property values are set by the child using the format: ParentType.Property=value Example: Attached Properties 10 10 80 80 52. Assigning Event Handlers Events allow you to respond to the user interaction with a control e.g. When the Click on Button, or change text in a TextBox You can assign the method as an event hander In XAML In Code Behind ShowDialogButton.Click += ShowDialogButton_Click; 53. Applying Styles Windows 8 Projects ship with a ton of available styles Change the look and feel of controls Applying styles is easy: Right click control Select Edit Template Select Apply Resource Select a resource to apply Resource Dictionaries AssetsStandardStyles.xaml Default Styles: C:Program Files (x86) Windows Kits 8.0 Include winrt xaml design 54. The MVVM Pattern MVVM Stands for Model The data your application uses View The user interface that the user sees and interacts with View Model Manages the View / Model interactions Provides Separation of business logic from UI/UX Code Easier Testing of both Business Logic and UI Logic Easier way designers to implement UI with no code Easier migration between platforms (Windows Phone 8 / Windows 8) Relies on Models that use standard web services or data access APIs View Models that Implement INotifyProperty Changed on their public properties Expose actions as properties with an Icommand type Views that have Controls with DependecyProperties that bind to View Model properties Controls that inherit from ButtonBase that bind to View Mode ICommands 55. Demo Working with Controls 56. Implementing Navigation Session 1 - Windows 8 Overview 57. Navigation Basics Most applications have more than one screen or Page If you have more than one Page, you need to Navigate Windows.UI.Xaml.Controls.Frame Class Maintains navigation History Navigate method to navigate to a specific page CanGoBack and CanGoForward Properties GoBack and GoForward Methods Windows.UI.Xaml.Controls.Page Class Target of navigation. Individual pages inherit from this. Provides a reference to the Frame it is in Supports Navigation caching (keeping the same copy in memory) OnNagivatedTo, OnNavigatingFrom & OnNavigatedFrom events 58. How Navigation Starts MainPage Splash Screen App Starts and Windows automatically shows the Splash Screen App.OnLaunched creates a new Frame Navigates to MainPage Sets the Frame as the Windows Content Activates the Window The Splash Screen is dismissed and the MainPage Shows protected override void OnLaunched(LaunchActivatedEventArgs args) { // Simplified code. Refer to App.xaml.cs for actual code var rootFrame = new Frame(); rootFrame.Navigate(typeof(MainPage)) Window.Current.Content = rootFrame; Window.Current.Activate(); } 59. Navigating to a new Page Page 2MainPage Code on a current page uses the Frame.Navigate method to navigate to a new page Initial Pages OnNavigatingFrom and OnNavigatedFrom events fire A new instance of the target page type is created, and the new page is navigated to Target Pages OnNavigatedTo event fires The Initial Pages state is discarded unless its NavigationCacheMode is Enabled Frame.Navigate(typeof(Page2)) 60. Navigating back to a Previous Page MainPageMainPage Page 2 Code on the Current page checks Frame.CanGoBack If it Frame.CanGoBack is true, the current page calls Frame.GoBack A new instance of the previous page type is created unless it was Cached Target Pages OnNavigatedTo event fires The Current Pages state is discarded unless its NavigationCacheMode is Enabled if (Frame.CanGoBack) Frame.GoBack(); 61. Passing objects during Navigation Frame.Navigate(TypeName,Object) can pass objects Target page uses OnNavigatedTos NavigationEventArgs Target page needs to know the type of the object Cast NavigationEventArgs.Parameter property to that type Target page can then use the object as needed: protected override void OnNavigatedTo(NavigationEventArgs e) { base.OnNavigatedTo(e); string name = e.Parameter as string; if (!string.IsNullOrWhiteSpace(name)) { tb1.Text = "Hello, " + name; } else { tb1.Text = "Name is required. Go back and enter a name."; } } 62. LayoutAwarePage Navigation Functionality & Issues LayoutAwarePage is a class provided by Visual Studio Included when certain project or item templates are used Grid App & Split App Project Template Basic Page, Grouped Items Page, Split Page, etc, Item Templates Implements OnNavigatedTo & OnNavigatedFrom overrides GoHome, GoBack and GoForward methods If your page overrides Navigation event handlers: Call base.OnNavigatedTo from your own OnNavigatedTo handler Call base.OnNavigatedFrom in your own OnNavigatedFrom handler Ensures that the LayoutWarePage class functions properly 63. Demo Implementing Navigation 64. Agenda Windows 8 Apps Overview Developing Windows 8 Apps > Working with Controls Implementing Navigation 65. Hands-On Lab 1 Building a Windows Store Style App