WPF Canvas

The Canvas element in XAML represents a Canvas control.  

<Canvas/>

The Canvas control has three properties.  The Left property represents the distance between the left side of a control and its parent container Canvas. The Top property represents the distance between the top of a control and its parent container Canvas.

The code in Listing 1 creates a Canvas and adds three Rectangle controls and position them using Canvas control properties.

<Canvas Background="LightCyan" >

    <Rectangle

    Canvas.Left="10" Canvas.Top="10"

    Height="200" Width="200"

    Stroke="Black" StrokeThickness="10" Fill="Red" />

    <Rectangle

    Canvas.Left="60" Canvas.Top="60"

    Height="200" Width="200"

    Stroke="Black" StrokeThickness="10" Fill="Blue" />

    <Rectangle

    Canvas.Left="110" Canvas.Top="110"

    Height="200" Width="200"

    Stroke="Black" StrokeThickness="10" Fill="Green" />

</Canvas>

Listing 1

The output looks like Figure 1.

Figure 1

The Canvas class in WPF represents a Canvas control.  The code listed in Listing creates a Canvas Panel dynamically, add three Rectangle controls to it, and sets their left and top positions using Canvas.SetLeft and Canvas.SetTop methods. The output of Listing generates Figure 1.

private void CreateDynamicCanvasPanel()

{

    // Create a Canvas Panel control

    Canvas canvasPanel = new Canvas();

    // Set Canvas Panel properties

    canvasPanel.Background = new SolidColorBrush(Colors.LightCyan );

    // Add Child Elements to Canvas

    Rectangle redRectangle = new Rectangle();

    redRectangle.Width = 200;

    redRectangle.Height = 200;

    redRectangle.Stroke = new SolidColorBrush(Colors.Black);

    redRectangle.StrokeThickness = 10;

    redRectangle.Fill = new SolidColorBrush(Colors.Red);

    // Set Canvas position

    Canvas.SetLeft(redRectangle, 10);

    Canvas.SetTop(redRectangle, 10);

    // Add Rectangle to Canvas

    canvasPanel.Children.Add(redRectangle);

    // Add Child Elements to Canvas

    Rectangle blueRectangle = new Rectangle();

    blueRectangle.Width = 200;

    blueRectangle.Height = 200;

    blueRectangle.Stroke = new SolidColorBrush(Colors.Black);

    blueRectangle.StrokeThickness = 10;

    blueRectangle.Fill = new SolidColorBrush(Colors.Blue);

    // Set Canvas position

    Canvas.SetLeft(blueRectangle, 60);

    Canvas.SetTop(blueRectangle, 60);

    // Add Rectangle to Canvas

    canvasPanel.Children.Add(blueRectangle);

    // Add Child Elements to Canvas

    Rectangle greenRectangle = new Rectangle();

    greenRectangle.Width = 200;

    greenRectangle.Height = 200;

    greenRectangle.Stroke = new SolidColorBrush(Colors.Black);

    greenRectangle.StrokeThickness = 10;

    greenRectangle.Fill = new SolidColorBrush(Colors.Green);

    // Set Canvas position

    Canvas.SetLeft(greenRectangle, 110);

    Canvas.SetTop(greenRectangle, 110);

    // Add Rectangle to Canvas

    canvasPanel.Children.Add(greenRectangle);

    // Set Grid Panel as content of the Window

    RootWindow.Content = canvasPanel;

}

Listing 1