04 | UI Presentation & XAML 1/12/2019 04 | UI Presentation & XAML Jaime Rodriguez @jaimerodriguez © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Course Topics Building Windows Store Apps for iOS Developers Jump Start 01 | Introduction to the Windows Store Platform and the tools 02 | C# for Objective-C developers 03 | Async programming & Networking intro Meal Break, around noon PST 45 to 60 mins 04 | Introduction to XAML & UI Patterns for XAML apps 05 | App Model & Storage 06 | Contracts 07 | Notifications 08 | Windows Store APIs

Introducing XAML Serialization format Expressive Toolable <Page Build 2012 1/12/2019 Introducing XAML <Page x:Class="App12.MainPage"…> <Grid> <Grid.Resources> <Style x:Key="PinkButton" TargetType="Button"> <Setter Property="Background" Value="Pink" /> </Style> </Grid.Resources> <Button x:Name="myButton" Style="{StaticResource PinkButton}" Content="{Binding data.buttonName}" Click="OnButtonClick" Width="300" Margin="250" VerticalAlignment="Stretch"> </Button> </Grid> </Page> Containment Serialization format Expressive Controls, Layout, Styles, Animations, Data binding, Events, data templates … Toolable Visual Studio and Blend Visual Hierarchy Styles Outlets bindings Layout Constraints © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Controls Reusable units for presentation 1/12/2019 Controls Reusable units for presentation Defined UI/Interaction patterns Input Feedback Consistency with OS Familiarity to the user © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Content model ContentControl ButtonBase UserControl ItemsControl 1/12/2019 Content model ContentControl ButtonBase Button, RepeatButton, ToggleButton  RadioButton, CheckBox UserControl ItemsControl ListBox, DataGrid, TreeView, ToolBar, TabControl, GridView (Win8), ListView © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Core Controls ProgressBar (indeterminate) Button ToggleSwitch Slider 1/12/2019 Core Controls ProgressBar (indeterminate) Button ToggleSwitch Slider Hyperlink Button ProgressBar (determinate) CheckBox ProgressRing Radio buttons © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Core Controls (part 2 ) TextBox Image ComboBox (with header) 1/12/2019 Core Controls (part 2 ) TextBox Image ComboBox (with header) PasswordBox ListBox TextBox (Multiline) Popup © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Core Controls (part 3 ) Date & Time pickers WebView 1/12/2019 © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Styling and Control Templates 1/12/2019 Demo Styling and Control Templates © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

1/12/2019 Panels & Layout © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Panel class Responsible for layout of its’ children 1/12/2019 Panel class Responsible for layout of its’ children public class Panel : FrameworkElement { protected Panel(); public Brush Background { get; set; } public UIElementCollection Children { get; } public TransitionCollection ChildrenTransitions { get; set; } public bool IsItemsHost { get; } // from FrameworkElement protected virtual Size ArrangeOverride(Size finalSize); protected virtual Size MeasureOverride(Size availableSize); } © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Panels Core Framework panels: Platform specific Canvas StackPanel Grid VirtualizingStackPanel Platform specific Phone: Windows: ItemsWrapGrid, VariableSizedWrapGrid,

Canvas Top, Left Top, Right Y X Absolute Positioning Bottom, Left Bottom, Right

StackPanel Stacks child elements together Orientation: Vertical Horizontal

Grid Column = 0 Column = 1 Column = 2 Row = 0 Row = 1 RowSpan = 3 ColumnSpan = 2

1/12/2019 demo Layouts © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Top 5 tips for an iOS developer 1/12/2019 Top 5 tips for an iOS developer XAML is OK to use and to type by hand Understand layouts Use styles and resources Consider data binding Embrace the Windows personality © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

1/12/2019 UI Patterns © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

MVC – out of the box Controller Model View outlet delegation Build 2012 1/12/2019 MVC – out of the box Controller outlet delegation target/action data source x:Name events data binding object references delegation object references events Model View © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

MVC according to Visual Studio 1/12/2019 demo MVC according to Visual Studio © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

MVVM View-Model Model View x:Name outlet object references commands 1/12/2019 MVVM View-Model x:Name outlet delegation target/action data source object references commands binding object references events delegation Model View © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

1/12/2019 demo MVVM © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Pages and navigation… 1. App references 2. Window.Content is a 1/12/2019 Pages and navigation… 1. App references 2 4 2. Window.Content is a 3 3. Frame.Content is a 4 4. Page can contain Content Back button Appbars WebView Direct X content © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

1/12/2019 Frame (Navigation ) public class Frame : ContentControl, INavigate { public IList<PageStackEntry> BackStack { get; } public int BackStackDepth { get; } public int CacheSize { get; set; } public bool CanGoBack { get; } public bool CanGoForward { get; } public IList<PageStackEntry> ForwardStack { get; } public Type SourcePageType { get; set; } public event NavigatedEventHandler Navigated; public event NavigatingCancelEventHandler Navigating; public event NavigationFailedEventHandler NavigationFailed; public event NavigationStoppedEventHandler NavigationStopped; public void GoBack(); public void GoForward(); public bool Navigate(Type sourcePageType); public bool Navigate(Type sourcePageType, object parameter); public bool Navigate(Type sourcePageType, object parameter, NavigationTransitionInfo infoOverride); public void SetNavigationState(string navigationState); } © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Page (life cycle) 1/12/2019 public class Page : UserControl { public AppBar BottomAppBar { get; set; } public Frame Frame { get; } public NavigationCacheMode NavigationCacheMode { get; set; } public AppBar TopAppBar { get; set; } public static DependencyProperty TopAppBarProperty { get; } protected virtual void OnNavigatedTo(NavigationEventArgs e); protected virtual void OnNavigatingFrom(NavigatingCancelEventArgs e); /* These are inherited from UserControl public event RoutedEventHandler Loaded; */ protected virtual void OnNavigatedFrom(NavigationEventArgs e); public event RoutedEventHandler Unloaded; } © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.