XAML Deep Dive for Windows & Windows Phone Apps Jump Start

1. Jaime Rodriguez | Microsoft Principal Technical Evangelist Laurent Bugnion | IdentityMine Senior Director XAML Deep Dive for Windows & Windows Phone Apps Jump Start

2. Course Topics

3. Module 4 | Panels & Layout

4. Panel class • Responsible for layout of its’ children publicclassPanel : FrameworkElement { protected Panel(); publicBrush Background { get; set; } publicUIElementCollection Children { get; } publicTransitionCollectionChildrenTransitions { get; set; } publicboolIsItemsHost { get; } // from FrameworkElement protectedvirtualSizeArrangeOverride(SizefinalSize); protectedvirtualSizeMeasureOverride(SizeavailableSize); }

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

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

7. StackPanel • Stacks child elements together • Orientation: • Vertical • Horizontal

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

9. Properties affecting layout • Width/Height • HorizontalAlignment/VerticalAlignment • Margin • Padding • Visibility

10. Alignment • Determines position and stretch for an element • HorizontalAlignment • Left, Center, Right, Stretch • VerticalAlignment • Top, Center, Bottom, Stretch

11. Margin • Space outside edges of an element <StackPanel Orientation="Horizontal" Height="200" Background="AliceBlue"> <Rectangle Width="100" Height="100" Fill="Yellow" /> <Rectangle Width="100" Height="100" Fill="Green"/> <Rectangle Width="100" Height="100" Fill="Yellow" Margin="30"/> <Rectangle Width="100" Height="100" Fill="Green" Margin="50"/> <Rectangle Width="100" Height="100" Fill="Yellow" Margin="80"/> </StackPanel>

12. Padding • Space inside edges of an element <Border Width="300" Height="300" Background="Yellow" Padding="40“ > <Rectangle Fill="Red"VerticalAlignment="Stretch"HorizontalAlignment="Stretch" /> </Border> <Border Width="300" Height="300" Background="Yellow" Padding="100,5" Margin="449,112,617,356"> <Rectangle Fill="Red"VerticalAlignment="Stretch"HorizontalAlignment="Stretch"/> </Border>

13. Custom panels