This document discusses how to build custom panels for Windows developers. It explains that custom panels should derive from the Panel class and override the MeasureOverride and ArrangeOverride methods. These methods are responsible for measuring and arranging child elements during layout. The MeasureOverride method queries child elements for their desired sizes, while ArrangeOverride positions each child by calling its Arrange method. Examples are provided for a master/details and tabs panel layout. Recommended resources for further reading on Windows and XAML development are also included.

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