1. 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.

2. 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

3. 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.

4. 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.

5. 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.

6. 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.

7. 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.

8. 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.

9. 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.

10. 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.

11. 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.

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

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

14. StackPanel Stacks child elements together Orientation: Vertical
Horizontal

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

16. 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.

17. 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.

18. 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.

19. 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.

20. 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.

21. 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.

22. 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.

23. 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.

24. 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.

25. 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.