New Xaml components for Windows developers

1. NewXAMLComponents
forWindows Developers
Jiri Danihelka

2. Why build a custom panel?

3. Do you really need a custom panel?

4. What about this?

5. Derive from Panel
• Derive from Panel (or a more specific panel such as Grid)
• Inherits
– Children
– Background, ChildrenTransitions and ItemsHost
• Typically unchanged
• Override and implement (most work here)
– MeasureOverride - not override Measure()
– ArrangeOverride - not override Arrange()

6. Children
• UIElementCollection (IList<T>)
• Stores contained child elements
• Children.Count may be useful in your layout algorithm

7. Layout Methods
There are two panel phases:
1. Measure
2. Arrange Measure
Arrange

8. Measure Phase
• Implemented in MeasureOverride
• Query each child for DesiredSize
– By calling their Measure method
• Determine your DesiredSize
– This is a product of your unique layout
• Do not call base.MeasureOverride();
– It has not native implementation
Page calls
Panel.Measure –
passing available size
Panel calls each
Child.Measure
(recursively) – passing
available size
Child returns to Panel its
Desired Size
Panel calculates layout –
resulting in Desired Size
Panel returns to Page its
Desired Size

9. Panel.MeasureOverride(Size)

10. Arrange Phase
• Implemented in ArrangeOverride
• Determine each child’s location (x, y)
• Calls child’s Arrange method
– This ensures the child is rendered
• Do not call base.ArrangeOverride()
• Notes:
– Your panel may have to force size
restrictions on children
– Children may need to be clipped
Page calls
Panel.Arrange
– passing final
size and
location
Panel calculates
layout using Final
Size
Panel calls each
Child.Arrange
(recursively) –
passing final size
and location

11. Panel.ArrangeOverride(Size)
protected override Size ArrangeOverride(Size finalSize)
{
var height =0d;
foreach (var child in Children)
{
if ((height +child.DesiredSize.Height) > finalSize.Height)
break;
child.Arrange(new Rect(new Point(0, height), child.DesiredSize));
height += child.DesiredSize.Height;
}
return new Size(finalsize.Width, height);
}

12. • Active Canvas
• Master/Details
• Tabs and Pivots
• Nav Panel
Module Overview

13. Master / Detail
https://msdn.microsoft.com/en-us/library/windows/apps/dn997765.aspx

15. Tabs and Pivot
https://msdn.microsoft.com/en-us/library/windows/apps/dn997788.aspxs

17. Nav Pane
https://msdn.microsoft.com/en-us/library/windows/apps/dn997766.aspx

19. Recommended Resources
• https://dev.windows.com/
• MSDN Windows 10 XAML Overview
– https://msdn.microsoft.com/en-
us/library/windows/apps/mt185595.aspx