Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to Windows 8 Apps for Windows Forms Developers

Kyle Mitofsky
September 21, 2013

Introduction to Windows 8 Apps for Windows Forms Developers

Windows 8 provides a great new distribution mechanism over a touch centric API. This talk will focus on the differences between traditional desktop applications and new Windows Store apps. We'll build a couple small metro applications using VB/XAML while leveraging new controls to build an immersive application that meets Windows 8 Design Guidelines, by supporting app bars, settings panels, snapped layouts, and asynchronous calls. We'll even get to debug code on the SurfaceRT tablet provided by Microsoft to the .NET user group.

Get More Info Here:
http://codingeverything.blogspot.com/2013/09/VTCC5.html

Kyle Mitofsky

September 21, 2013
Tweet

More Decks by Kyle Mitofsky

Other Decks in Programming

Transcript

  1. Intro To Windows 8 Apps
    For Windows Developers
    KYLE MITOFSKY

    View full-size slide

  2. Overview
    Mobile Usages
    WinRT Framework
    Xaml Overview
    Model-View-ViewModel
    ‘Metro’ Design

    View full-size slide

  3. Mobile Proliferation
     Deployment Targets
     Desktop
     Windows
     Web
     All OS
     Mobile
     Windows
     Apple
     Android

    View full-size slide

  4. Framework Design Guidelines
     Metro / Modern UI Style / Window 8 / Windows Store / WinRT
     Fast and Fluid
     Content over chrome
     Immersive
     Touch Centric
     Permissions / Security

    View full-size slide

  5. Async and Await
    Sub Async cmdExecuteTask_Click(sender As Object, e As EventArgs) _
    Handles cmdExecuteTask.Click
    Dim retval = Await DataAccessCode.GetCustomerListAsync("CA")
    End Sub
     With Async (Good)
     With Callbacks (Bad)
    Private TargetHandler As GetCustomerListHandler = AddressOf DataAccessCode.GetCustomerList
    Private CallbackHandler As AsyncCallback = AddressOf MyCallbackMethod
    Sub cmdExecuteTask_Click(sender As Object, e As EventArgs) _
    Handles cmdExecuteTask.Click
    TargetHandler.BeginInvoke("CA", CallbackHandler, Nothing)
    End Sub
    Sub MyCallbackMethod(ByVal ar As IAsyncResult)
    Dim retval As String()
    retval = TargetHandler.EndInvoke(ar)
    End Sub

    View full-size slide

  6. Tips: Logos
     Generate Logos with Expression Designer
     Download Some Templates:
    Square Logo Wide Logo
    Because this
    is a lot of
    work

    View full-size slide

  7. Tips: Namespaces
     Make sure Xaml and Code-Behind namespaces match
     Code scoped inside of root namespace
    x:Class="OpenSettingsButton.Flyouts.Settings">
    Namespace Flyouts
    Public NotInheritable Class Settings
     Xaml must include root namespace

    View full-size slide

  8. Xaml Styles
     Styles are just things that can set one or more properties on an object.
     They can be applied within a scope or individually with keys






    <br/><Setter Property="FontSize" Value="40"/><br/>


    View full-size slide

  9. Templated Control
     Set Style
     Set Behavior
     Let’s make a Control that Navigates to the Settings Panel
    <br/><Setter Property="Content" Value="&#xE115;"/><br/><Setter Property="AutomationProperties.Name" Value="Settings"/><br/>
    Private Sub OpenSettings(ByVal sender As Object, ByVal e As RoutedEventArgs) _
    Handles Me.Click
    Windows.UI.ApplicationSettings.SettingsPane.Show()
    End Sub

    View full-size slide

  10. Binding
     Binding – Declaratively Link Two Properties
     Data Context – Where to Look for Properties




     INotifyPropertyChanged – How the Interface Knows to Update the Binding
    OnPropertyChanged("PropertyName")

    Target Element Target Property Binding Expression

    View full-size slide

  11. Commands
     Invoke In Xaml

    Private _wordSubmitCommand As RelayCommand
    Public ReadOnly Property WordSubmitCommand() As RelayCommand
    Get
    If _wordSubmitCommand Is Nothing Then
    _wordSubmitCommand = New RelayCommand(AddressOf WordSubmit)
    End If
    Return _wordSubmitCommand
    End Get
    End Property
     Binds to RelayCommand on ViewModel
    Called
    Method

    View full-size slide

  12. ReSharper Can Help with Plumbing
     Menu: ReSharper > Templates Explorer
     Live Templates are like VS Code Snippets, but much better.

    View full-size slide

  13. Visual State with LayoutAwarePage
     VisualState has content of StoryBoard
    Full Screen Portrait Snapped Filled








    View full-size slide

  14. App Bar
     Style – AppBarButtonStyle
     Content – Font is Segoe UI Symbol
     AutomationProperties.Name – Binds Button Text



    AutomationProperties.Name="Enter Word"
    Command="{Binding EnterSecretWordCommand}"
    Style="{StaticResource AppBarButtonStyle}"/>



    Character
    Map

    View full-size slide

  15. Settings Charm
    AddHandler SettingsPane.GetForCurrentView.CommandsRequested
     System asks which options you’d like on Settings Page
    Private Sub CommandsRequestedHandler(ByVal sender As SettingsPane, _
    ByVal args As SettingsPaneCommandsRequestedEventArgs)
    Dim command As New SettingsCommand("Key", "Text", Sub(c) Show(New Settings))
    args.Request.ApplicationCommands.Add(command)
    End Sub
     Add SettingsCommands to EventArgs
    Dim helper = New Flyouts.SettingsHelper
    helper.AddCommand(Of Flyouts.Settings)("Settings")
     Use SettingsHelper C# / VB

    View full-size slide

  16. Persisting User Settings
     Store Values Specific to the Current User
    Private Function LoadSettings(key As String) As Object
    Return ApplicationData.Current.LocalSettings.Values(key)
    End Function
    Private Sub SaveSettings(Of T)(value As T, key As String)
    ApplicationData.Current.LocalSettings.Values(key) = value
    End Sub
     Retrieve Values Specific to the Current User

    View full-size slide

  17. Demo
    Demo Time

    View full-size slide

  18. Windows Store
     Get A Windows Developer Account
     https://appdev.microsoft.com/StorePortals/en-US/Home/Index
     Project > Store > Create App Packages
     WACK – Windows Application Certification Kit
     Download New One for 8.1
     Submission
     Windows 8 app certification requirements (Windows)

    View full-size slide

  19. Libraries
     MVVM Light
     By Laurent Bugnion
    (GalaSoft)
     Callisto
     By Tim Heuer (Microsoft)
     WinRT Xaml Toolkit
     Open Source

    View full-size slide

  20. Windows 8 Resources
     Virtual Office Hours
     http://ohours.org/mcummings
     http://ohours.org/jimoneil
     App Builder
     http://build.windowsstore.com

    View full-size slide

  21. Further Reading
     Active Blogs
     Jerry Nixon’s Blog
     Tim Heuer’s Blog
     Pluralsight
     Building Windows 8 Style Apps in C# and XAML
     Building Windows 8 Applications with JavaScript and HTML
     Windows 8 – From Start to Store
     Building Windows 8 MVVM XAML Apps
     Windows 8 – From Design to Delivery with C# and XAML

    View full-size slide

  22. Bibliography
     Async / Await
     Async/Await - Best Practices in Asynchronous
    Programming
     Asynchronous Programming with Async and
    Await (C# and Visual Basic)
     Working with IAsync WinRT Methods
     Logos
     Generating Windows Store Logo Assets At
    Every Resolution
     Windows 8 apps need 28 logo varietals; enter
    Expression Design
     Download Microsoft Expression Design 4 Free
     Templated Control
     Walkthrough: A Custom Control in XAML isn’t a
    User Control
     App Bar
     Guidelines for app bars (Windows Store apps)
     Walkthrough: The Windows 8 AppBar
     Settings Charm
     Guidelines for app settings (Windows Store apps)
     How to Create a Windows 8 Settings Pane in XAML
     SettingsPane.GetForCurrentView
     Settings Helper: C# / VB
     User Settings
     Quickstart: Local application data (Windows Store apps
    using C#/VB/C++ and XAML)
     ApplicationData.LocalSettings
     ReSharper Live Templates
     ReSharper Features: Code Templates

    View full-size slide