In this example, we show how to create containers with custom headers and padding. DiagramControl supports a special language for defining containers. The root element that contains a container description is ContainerShapeTemplate. This element describes a container contour and may contain several segments:- Start. Specifies the start point- Line. Defines a line with start and end points- Arc. Defines an arc with start and end pointsTo define a container’s header editor position, use the EditorBounds property. To specify a padding, set the ActualPadding property.To register custom containers in the ribbon gallery, use the DiagramContainerGalleryRegistrator.RegisterContainerShapes method.
<?xml version="1.0"?>
<Shapes xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<ContainerShapeTemplate Id="Frame" Style="ShapeId.Moderate5" DefaultSize="200,200">
<Start X="0" Y="0" />
<Line X="1" Y="0" />
<Line X="1" Y="1" />
<Line X="0" Y="1" />
<Start X="PaddingRatio.Left" Y="HeaderHeightRatio + PaddingRatio.Top" FillColor="White" />
<Line X="1 - PaddingRatio.Right" Y="HeaderHeightRatio + PaddingRatio.Top" />
<Line X="1 - PaddingRatio.Right" Y="1 - PaddingRatio.Bottom" />
<Line X="PaddingRatio.Left" Y="1 - PaddingRatio.Bottom" />
</ContainerShapeTemplate>
<ContainerShapeTemplate
Id="Frame1"
Style="ShapeId.Moderate6"
DefaultSize="200,200"
EditorBounds="CreateRect(0,Height - HeaderHeight,Width,HeaderHeight)"
ActualPadding="CreatePadding(Padding.Left, Padding.Top, Padding.Right, Padding.Bottom + HeaderHeight)">
<Start X="0" Y="0" />
<Line X="1" Y="0" />
<Line X="1" Y="1" />
<Line X="0" Y="1" />
<Start X="PaddingRatio.Left" Y="PaddingRatio.Top" FillColor="White" />
<Line X="1 - PaddingRatio.Right" Y="PaddingRatio.Top" />
<Line X="1 - PaddingRatio.Right" Y="1 - PaddingRatio.Bottom - HeaderHeightRatio" />
<Line X="PaddingRatio.Left" Y="1 - PaddingRatio.Bottom - HeaderHeightRatio" />
</ContainerShapeTemplate>
<ContainerShapeTemplate
Id="Frame2"
Style="ShapeId.Moderate7"
DefaultSize="200,200"
EditorBounds="CreateRect(0,-HeaderHeight,Width,HeaderHeight)"
ActualPadding="Padding"
UseBackgroundAsForeground="true">
<Start X="0" Y="0" />
<Line X="1" Y="0" />
<Line X="1" Y="1" />
<Line X="0" Y="1" />
<Start X="PaddingRatio.Left" Y="PaddingRatio.Top" FillColor="White" />
<Line X="1 - PaddingRatio.Right" Y="PaddingRatio.Top" />
<Line X="1 - PaddingRatio.Right" Y="1 - PaddingRatio.Bottom" />
<Line X="PaddingRatio.Left" Y="1 - PaddingRatio.Bottom" />
</ContainerShapeTemplate>
<ContainerShapeTemplate Id="HeaderFrame" Style="ShapeId.Moderate3" DefaultSize="200,200" UseBackgroundAsForeground="true">
<Start X="0" Y="0" FillColor="White" />
<Line X="1" Y="0" />
<Line X="1" Y="1" />
<Line X="0" Y="1" />
<Start X="0" Y="0" />
<Line X="1" Y="0" />
<Line X="1" Y="HeaderHeightRatio" />
<Line X="0" Y="HeaderHeightRatio" />
<Start X="HeaderPaddingRatio.Left" Y="HeaderPaddingRatio.Top" FillColor="White" />
<Line X="1 - HeaderPaddingRatio.Right" Y="HeaderPaddingRatio.Top" />
<Line X="1 - HeaderPaddingRatio.Right" Y="HeaderHeightRatio - HeaderPaddingRatio.Bottom" />
<Line X="HeaderPaddingRatio.Left" Y="HeaderHeightRatio - HeaderPaddingRatio.Bottom" />
</ContainerShapeTemplate>
</Shapes>
<?xml version="1.0"?>
<Shapes xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<ContainerShapeTemplate Id="Frame" Style="ShapeId.Moderate5" DefaultSize="200,200">
<Start X="0" Y="0" />
<Line X="1" Y="0" />
<Line X="1" Y="1" />
<Line X="0" Y="1" />
<Start X="PaddingRatio.Left" Y="HeaderHeightRatio + PaddingRatio.Top" FillColor="White" />
<Line X="1 - PaddingRatio.Right" Y="HeaderHeightRatio + PaddingRatio.Top" />
<Line X="1 - PaddingRatio.Right" Y="1 - PaddingRatio.Bottom" />
<Line X="PaddingRatio.Left" Y="1 - PaddingRatio.Bottom" />
</ContainerShapeTemplate>
<ContainerShapeTemplate
Id="Frame1"
Style="ShapeId.Moderate6"
DefaultSize="200,200"
EditorBounds="CreateRect(0,Height - HeaderHeight,Width,HeaderHeight)"
ActualPadding="CreatePadding(Padding.Left, Padding.Top, Padding.Right, Padding.Bottom + HeaderHeight)">
<Start X="0" Y="0" />
<Line X="1" Y="0" />
<Line X="1" Y="1" />
<Line X="0" Y="1" />
<Start X="PaddingRatio.Left" Y="PaddingRatio.Top" FillColor="White" />
<Line X="1 - PaddingRatio.Right" Y="PaddingRatio.Top" />
<Line X="1 - PaddingRatio.Right" Y="1 - PaddingRatio.Bottom - HeaderHeightRatio" />
<Line X="PaddingRatio.Left" Y="1 - PaddingRatio.Bottom - HeaderHeightRatio" />
</ContainerShapeTemplate>
<ContainerShapeTemplate
Id="Frame2"
Style="ShapeId.Moderate7"
DefaultSize="200,200"
EditorBounds="CreateRect(0,-HeaderHeight,Width,HeaderHeight)"
ActualPadding="Padding"
UseBackgroundAsForeground="true">
<Start X="0" Y="0" />
<Line X="1" Y="0" />
<Line X="1" Y="1" />
<Line X="0" Y="1" />
<Start X="PaddingRatio.Left" Y="PaddingRatio.Top" FillColor="White" />
<Line X="1 - PaddingRatio.Right" Y="PaddingRatio.Top" />
<Line X="1 - PaddingRatio.Right" Y="1 - PaddingRatio.Bottom" />
<Line X="PaddingRatio.Left" Y="1 - PaddingRatio.Bottom" />
</ContainerShapeTemplate>
<ContainerShapeTemplate Id="HeaderFrame" Style="ShapeId.Moderate3" DefaultSize="200,200" UseBackgroundAsForeground="true">
<Start X="0" Y="0" FillColor="White" />
<Line X="1" Y="0" />
<Line X="1" Y="1" />
<Line X="0" Y="1" />
<Start X="0" Y="0" />
<Line X="1" Y="0" />
<Line X="1" Y="HeaderHeightRatio" />
<Line X="0" Y="HeaderHeightRatio" />
<Start X="HeaderPaddingRatio.Left" Y="HeaderPaddingRatio.Top" FillColor="White" />
<Line X="1 - HeaderPaddingRatio.Right" Y="HeaderPaddingRatio.Top" />
<Line X="1 - HeaderPaddingRatio.Right" Y="HeaderHeightRatio - HeaderPaddingRatio.Bottom" />
<Line X="HeaderPaddingRatio.Left" Y="HeaderHeightRatio - HeaderPaddingRatio.Bottom" />
</ContainerShapeTemplate>
</Shapes>