1. 03 | Building Windows Store Apps with XAML Part 3
Daren May | President (CRANK211)
Jerry Nixon | Developer Evangelist (Colorado)

2. Module Agenda Foundational Layout Controls Advanced Layout Controls
Resource Management
Data Binding

3. Foundational Layout Controls

4. Layout Fluid & Responsive Design Different screen sizes
Different orientations

5. Canvas Used when to absolutely position children No flow layout
Positions from top-left
Least flexible

6. Canvas Example

7. StackPanel Stacks children horizontally or vertically
Always provides infinite space for children
Place inside ScrollViewer

8. StackPanel Example

9. Grid Most commonly used Specify rows and columns
Works well with flow layouts
Specify rows and columns
Cells can span multiple row/columns
Rows & columns can be sized:
* (variable sizing -default)
Fixed (point sizing)
Auto (sizes to content)

10. Grid Example

11. WrapGrid & ItemsWrapGrid
Used inside an ItemControl
Automatically wraps items to fill space
Fills based upon orientation
Can be constrained to max number of rows or columns
Can scroll/swipe to see more items

12. WrapGrid & ItemsWrapGrid Example

13. ScrollViewer Wraps other content
Contains one element (that may contain others)
Provides infinite space for the contained element
Supports touch and zoom

14. ScrollViewer

15. Viewbox Exists to resize content Different modes:
None – no resizing, but is clipped
Fill – distorted to fill the space
Uniform – scaled up but not distorted to fill
UniformToFill – scaled up to completely fill space (may clip)

16. Viewbox

17. Advanced Layout Controls

18. New Controls & Features in 8.1
AppBar Controls
AppBarButton
AppBarToggleButton
AppBarSeparator
Flyout
MenuFlyout
CommandBar
FlipView updates
Hub
SettingsFlyout
Header support
DatePicker
TimePicker
XAML -> bitmap

19. Data Template

20. Items Panel Template

21. Repeaters
Items Control
Grid View
List View
Flip View
Hub

22. Grid View Syntax

23. List View Syntax

24. Flip View Syntax

25. Hub Syntax

26. Hub control

27. Resource Management

28. What is a resource? Types of resources Constants Styles Templates
Colors
Font sizes
More…
Styles
Templates
Control templates
Data templates

29. Resource Scope

31. Data Binding

32. Literal Data You could hard code everything, but…
… this isn’t very dynamic!

33. Dynamic Data Use data binding to connect to a data source
Typical data source would be a view model

34. Converting Data Converters are used to change data during binding
IValueConverter
Convert
Converts the Object Property data to a new format/value before assignment to the FrameworkElement Property
ConvertBack
Converts the FrameworkElement Property data to a new format/value before assignment to the Object Property in two-way bindings
Often not implemented

35. Updating the UI INotifyPropertyChanged INotifyCollectionChanged
Implement in a view model class
Raised by View Model when property value changes
INotifyCollectionChanged
Implemented in ObservableCollection<T> and ReadOnlyObservableCollection<T>
Raised by the collection when the collection is modified

37. Module Agenda Foundational Layout Controls Advanced Layout Controls
Resource Management
Data Binding