This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Base Classes - Panel

The thirty-eighth part of the Windows Presentation Foundation Fundamentals tutorial is the last to examine base classes of layout controls. This article looks at the Panel class; a base class for controls that determine the layout of their children.


In the final article to discuss base classes for WPF layout controls, we'll look at the Panel class. Panel provides members that allow a control to have nested child controls. It is designed to be inherited by WPF controls that position and arrange their children. Many of the layout controls that we've already seen in this tutorial are descendants of Panel, including Canvas, DockPanel, Grid, StackPanel, UniformGrid and WrapPanel.

To demonstrate the use of the Panel class we need a sample program. Create a new WPF Application project in Visual Studio, naming the solution, "PanelDemo". Once initialised, replace the XAML of the main window with the code shown below. This creates a Canvas control, which is derived from Panel, with three children.

<Window x:Class="PanelDemo.MainWindow"
        Title="Panel Demo"
    <Canvas Name="MyCanvas">
        <Ellipse Canvas.Left="10" Canvas.Top="5"
                 Width="100" Height="100"
                 Stroke="Black" Fill="Red"/>
        <Ellipse Canvas.Left="60" Canvas.Top="5"
                 Width="100" Height="100"
                 Stroke="Black" Fill="Yellow"/>
        <Ellipse Canvas.Left="110" Canvas.Top="5"
                 Width="100" Height="100"
                 Stroke="Black" Fill="Green"/>

If you run the program you should see that the window appears similar to that shown below.

Canvas with three children

Children Property

The most important Panel property is Children, as this is the collection property that holds all of the child controls of any panel. You can see in the sample XAML that the Children property is not explicitly included. It is assumed that any controls within the Canvas's XAML element are child controls. However, if you prefer to be more explicit, you can use property element syntax and declare a Canvas.Children element containing the child controls.

The Children property is a collection of UIElements, and is defined using the UIElementCollection type. Although you might not have used this collection type before, it should be familiar, as it implements IList and ICollection. This means that you can add, insert and remove new items using recognisable methods. When you do, the user interface elements of the control are updated accordingly.

In the only example in this article we'll add a control programmatically when the window is loaded. To begin, modify the Window element in the XAML to register the Loaded event.

<Window x:Class="PanelDemo.MainWindow"
        Title="Panel Demo"

We can now add code behind the window to programmatically add a new child control to the Children collection. The sample below creates a fourth ellipse and sets its size and colours before adding it to the collection. The final two lines position the ellipse using the Canvas control's attached properties.

private void Window_Loaded(object sender, RoutedEventArgs e)
    Ellipse ellipse = new Ellipse();
    ellipse.Width = 200;
    ellipse.Height = 50;
    ellipse.Stroke = Brushes.Black;
    ellipse.Fill = Brushes.Blue;
    Canvas.SetLeft(ellipse, 10);
    Canvas.SetTop(ellipse, 30);

When you run the program you should see that a blue ellipse is rendered in front of the three that are defined in the XAML.

Canvas with dynamically added child

3 December 2013