Examples in this group show how to use classes in the GrapeCity.Documents.Layout.Composition namespace to create complex and flexible constraint-based layouts with custom z-order and clipping.

Surface (GrapeCity.Documents.Layout.Composition.Surface)
Represents a collection of View's to be drawn on a GrapeCity.Documents.Drawing.GcGraphics (such as GcPdfGraphics, GcSvgGraphics, etc.). A Surface contains a LayoutHost which performs (calculates) the layout. The Surface adds the ability to draw Layer's and Visual's.
Layer (GrapeCity.Documents.Layout.Composition.Layer)
Represents a drawing layer with visuals, spaces, optional clipping, and nested layers. A Layer also has a Draw delegate similar to that of a Visual (see below). It can be used for example to fill an area between contained visuals.
View (GrapeCity.Documents.Layout.Composition.View, derived from Layer)
Space (GrapeCity.Documents.Layout.Composition.Space)
Represents a space on a Layer or View with an associated LayoutRect. While a Space occupies some area in the layout, it does not have any visual representation and does not participate in z-ordering.
Visual (GrapeCity.Documents.Layout.Composition.Visual, derived from Space)
Adds visual representation and z-ordering to Space. Represents a figure, text, or image on a Layer or View. The position and size of a Visual (or Space) is determined by the LayoutRect associated with it.
Note that visuals do not form a hierarchy of classes to draw different content. Instead, a Visual has the Draw delegate which is used to draw the visual. When that delegate is called (by the containing Layer), the target graphics' transform matrix is adjusted so that (0, 0) is in the top left corner of the visual's LayoutRect. The Visual.AsRectf() method returns a rectangle located at (0, 0) that has the same size as the size of the visual's LayoutRect. Also, the Visual.Width and Visual.Height properties are adjusted accordingly.

The following "back-end" layout classes work with composition "front-end" classes listed above:

LayoutHost (GrapeCity.Documents.Layout.LayoutHost)
Represents the host and origin of a coordinate system for LayoutView objects. For each contained LayoutView object the LayoutHost calculates all LayoutRect and AnchorPoint coordinates based on the constraints provided.
LayoutView (GrapeCity.Documents.Layout.LayoutView)
Represents a transformed surface hosting LayoutRect, Contour, and AnchorPoint objects. A LayoutView has the associated transformation matrix (an identity matrix by default). The LayoutView defines the view rectangle with fixed width and height to be referenced from constraints.
LayoutRect (GrapeCity.Documents.Layout.LayoutRect)
Represents a rectangle with constraints. It can be rotated by a multiple of 90 degrees relative to the owner LayoutView. The layout engine calculates the position and size of all LayoutRect objects within a LayoutHost. To make that possible we need to define constraints which unambiguously determine the position and size of each rectangle.
Constraint (GrapeCity.Documents.Layout.Constraint and the derived classes)
Constraints define rules for how that position, angle, or size depend on parameters of other rectangle. Each individual parameter is configured separately and might depend on rectangles from the same LayoutView or on an AnchorPoint or Contour from another LayoutView. There may be several constraints defined for the same target parameter.
AnchorPoint (GrapeCity.Documents.Layout.AnchorPoint)
Represents a point to be used as an anchor for LayoutRect constraints or as a part of the Contour object. AnchorPoint's X and Y coordinates are set in absolute units or as width/height percent relative to the owner LayoutView or LayoutRect.
Contour (GrapeCity.Documents.Layout.Contour)
Represents a closed figure on a LayoutView. Contour consists of AnchorPoints belonging to the same LayoutView. Contours are created using View.LayoutView.CreateContour(). A Contour can have anchor points that are relative to the containing View or its Visuals or Spaces. A constraint can be specified relative to a Contour in any View on the Surface (or any LayoutView in the LayoutHost). This can be used e. g. to draw text within an ellipse.

Typical steps to create a layout:

Create a Surface that will contain the layout.
Use the Surface to create one or more Views. Each View has size and transform matrix.
Add visuals or spaces to the View(s):
- Use the View(s) to create one or more Visuals. A Visual usually has an associated LayoutRect. The constraints must unambiguously determine the rectangle's size and position, otherwise an error will occur. If the Visual has no LayoutRect, it is used to draw on anchor points in the View's coordinate system.
- Or, if you need to add constraint-defined blank spaces to a View, use the View to add Space objects. A Space is basically a Visual without a Draw method. Note that a Space is not a container, its only purpose is to add spacing.
Specify constraints on each Visual's and Space's LayoutRect. Constraints are relative to other Visuals in the same View, or relative to the View itself. The only exception is that constraints can be specified relative to an AnchorPoint in another View, or relative to a Contour in another View.

GrapeCity.Documents.Layout.Composition examples: