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

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

Foundational Layout Controls

Layout Fluid & Responsive Design Different screen sizes Different orientations

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

Canvas Example

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

StackPanel Example

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)

Grid Example

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

WrapGrid & ItemsWrapGrid Example

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

ScrollViewer

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)

Viewbox

Advanced Layout Controls

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

Data Template

Items Panel Template

Repeaters Items Control Grid View List View Flip View Hub

Grid View Syntax

List View Syntax

Flip View Syntax

Hub Syntax

Hub control

Resource Management

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

Resource Scope

Data Binding

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

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

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

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

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