Create a Custom Panel

Search…

This example shows how to override the default layout behavior of the Panel element and create custom layout elements that are derived from Panel.
The example defines a simple custom Panel element called PlotPanel, which positions child elements according to two hard-coded x- and y-coordinates. In this example, x and y are both set to 50; therefore, all child elements are positioned at that location on the x and y axes.
To implement custom Panel behaviors, the example uses the MeasureOverride and ArrangeOverride methods. Each method returns the Size data that is necessary to position and render child elements.
1
public class PlotPanel : Panel
2
{
3
    // Override the default Measure method of Panel
4
    protected override Size MeasureOverride(Size availableSize)
5
    {
6
        var panelDesiredSize = new Size();
7
​
8
        // In our example, we just have one child. 
9
        // Report that our panel requires just the size of its only child.
10
        foreach (var child in Children)
11
        {
12
            child.Measure(availableSize);
13
            panelDesiredSize = child.DesiredSize;
14
        }
15
​
16
        return panelDesiredSize;
17
    }
18
​
19
    protected override Size ArrangeOverride(Size finalSize)
20
    {
21
        foreach (var child in Children)
22
        {
23
            double x = 50;
24
            double y = 50;
25
​
26
            child.Arrange(new Rect(new Point(x, y), child.DesiredSize));
27
        }
28
        
29
        return finalSize; // Returns the final Arranged size
30
    }
31
}
Copied!

Alignment, Margins and Padding

Next - Documentation

Distribution / Publishing

Last modified 1yr ago

Export as PDF

Copy link

Edit on GitHub