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:

Kyle Mitofsky

September 21, 2013

More Decks by Kyle Mitofsky

Other Decks in Programming


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

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

  3. Mobile Proliferation  Deployment Targets  Desktop  Windows 

    Web  All OS  Mobile  Windows  Apple  Android
  4. Framework Design Guidelines  Metro / Modern UI Style /

    Window 8 / Windows Store / WinRT  Fast and Fluid  Content over chrome  Immersive  Touch Centric  Permissions / Security
  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
  6. Tips: Logos  Generate Logos with Expression Designer  Download

    Some Templates: Square Logo Wide Logo Because this is a lot of work
  7. Tips: Namespaces  Make sure Xaml and Code-Behind namespaces match

     Code scoped inside of root namespace <UserControl x:Class="OpenSettingsButton.Flyouts.Settings"> Namespace Flyouts Public NotInheritable Class Settings  Xaml must include root namespace
  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 <!-- Set Explicitly --> <TextBlock Text="Inline" FontSize="40"/>   <!-- Inline style --> <TextBlock Text="Inline Style"> <TextBlock.Style> <Style TargetType="TextBlock"> <Setter Property="FontSize" Value="40"/> </Style> </TextBlock.Style> </TextBlock>
  9. Templated Control  Set Style  Set Behavior  Let’s

    make a Control that Navigates to the Settings Panel <Style TargetType="common:GoToSettings" BasedOn="{StaticResource AppBarButtonStyle}"> <Setter Property="Content" Value="&#xE115;"/> <Setter Property="AutomationProperties.Name" Value="Settings"/> </Style> Private Sub OpenSettings(ByVal sender As Object, ByVal e As RoutedEventArgs) _ Handles Me.Click Windows.UI.ApplicationSettings.SettingsPane.Show() End Sub
  10. Binding  Binding – Declaratively Link Two Properties  Data

    Context – Where to Look for Properties <common:LayoutAwarePage x:Class="View.EmployeeView"> <Page.DataContext> <ViewModel:EmployeeViewModel/> </Page.DataContext>  INotifyPropertyChanged – How the Interface Knows to Update the Binding OnPropertyChanged("PropertyName") <TextBlock Text="{Binding Path=Title}" /> Target Element Target Property Binding Expression
  11. Commands  Invoke In Xaml <Button Content="Enter Guess" Command="{Binding WordSubmitCommand}"/>

    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
  12. ReSharper Can Help with Plumbing  Menu: ReSharper > Templates

    Explorer  Live Templates are like VS Code Snippets, but much better.
  13. Visual State with LayoutAwarePage  VisualState has content of StoryBoard

    Full Screen Portrait Snapped Filled <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="ApplicationViewStates"> <VisualState x:Name="FullScreenLandscape"/> <VisualState x:Name="FullScreenPortrait" /> <VisualState x:Name="Snapped" /> <VisualState x:Name="Filled"/> </VisualStateGroup> </VisualStateManager.VisualStateGroups>
  14. App Bar  Style – AppBarButtonStyle  Content – Font

    is Segoe UI Symbol  AutomationProperties.Name – Binds Button Text <Page.BottomAppBar> <AppBar> <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"> <Button Content="&#xE090;" AutomationProperties.Name="Enter Word" Command="{Binding EnterSecretWordCommand}" Style="{StaticResource AppBarButtonStyle}"/> </StackPanel> </AppBar> </Page.BottomAppBar> Character Map
  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
  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
  17. Demo Demo Time

  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)
  19. Libraries  MVVM Light  By Laurent Bugnion (GalaSoft) 

    Callisto  By Tim Heuer (Microsoft)  WinRT Xaml Toolkit  Open Source
  20. Windows 8 Resources  Virtual Office Hours  http://ohours.org/mcummings 

    http://ohours.org/jimoneil  App Builder  http://build.windowsstore.com
  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
  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