UPF Layout

Overview

The Ultraviolet Presentation Foundation measures and arranges its elements using a cycle very similar to the one used by the Windows Presentation Foundation, upon which it is based. This article provides a brief overview of that process.

There are three main stages to the layout cycle:

1. Style
2. Measure
3. Arrange

Style

The first step to laying out an element is to apply the appropriate styles. The element's existing styles are first cleared, and then the style sheet associated with the element's current view is re-applied to the element. This is done by the Style() method of UIElement; if you're implementing a custom control which derives from FrameworkElement, you should override the StyleOverride() method if you want to change your element's styling behavior.

Changing an element's styles automatically invalidates the element's measure.

Measure

The measurement phase involves determining how big the element should be. Some elements have their sizes explicitly specified in markup; others are given free reign to determine their own size based on their content. An element reports its desired size to its layout container via the Measure() method of UIElement; if you're implementing a custom control which derives from FrameworkElement, you should override the MeasureOverride() method if you want to change your element's measurement behavior.

Changing an element's measure automatically invalidates the element's arrangement.

Arrange

The final phase of the layout cycle is arrangement. Once all of the interface's elements have provided their desired measures, the layout containers can determine how to position their children within themselves. This is performed in the layout container's Arrange() method; if you're implementing a custom layout container which derives from FrameworkElement, you should override the ArrangeOverride() method in order to provide your container's custom layout behavior.

Invalidation

When an element's style, measure, or arrangement are invalidated, that element is placed on the appropriate layout queue. These queues are serviced every frame; elements with invalid styles are re-styled, then elements with invalid measures are re-measured, and finally elements with invalid arrangements are re-arranged. The layout queues are arranged so that elements which are higher in the visual tree are always processed before elements which are lower in the visual tree.

An element will be automatically invalidated when the values of certain dependency properties are changed, based on that property's options. You can also manually invalidate an element using the InvalidateStyle(), InvalidateMeasure(), and InvalidateArrange() methods.