Share via


How to: Create and Use a Canvas

This example shows how to create and use an instance of Canvas.

Example

The following example explicitly positions two TextBlock elements by using the SetTop and SetLeft methods of Canvas. The example also assigns a Background color of LightSteelBlue to the Canvas.

NoteNote:

When you use Extensible Application Markup Language (XAML) to position TextBlock elements, use the Top and Left properties.

    private void CreateAndShowMainWindow()
    {
        // Create the application's main window
        mainWindow = new Window();
        
        // Create a canvas sized to fill the window
        Canvas myCanvas = new Canvas();
        myCanvas.Background = Brushes.LightSteelBlue;
        
        // Add a "Hello World!" text element to the Canvas
        TextBlock txt1 = new TextBlock();
        txt1.FontSize = 14;
        txt1.Text = "Hello World!";
        Canvas.SetTop(txt1, 100);
        Canvas.SetLeft(txt1, 10);
        myCanvas.Children.Add(txt1);
        
        // Add a second text element to show how absolute positioning works in a Canvas
        TextBlock txt2 = new TextBlock();
        txt2.FontSize = 22;
        txt2.Text = "Isn't absolute positioning handy?";
        Canvas.SetTop(txt2, 200);
        Canvas.SetLeft(txt2, 75);
        myCanvas.Children.Add(txt2);
        mainWindow.Content = myCanvas;
        mainWindow.Title = "Canvas Sample";
        mainWindow.Show();
    }
}
WindowTitle = "Canvas Sample"
'Create a Canvas as the root Panel
Dim myCanvas As New Canvas()
myCanvas.Background = Brushes.LightSteelBlue

Dim txt1 As New TextBlock
txt1.FontSize = 14
txt1.Text = "Hello World!"
Canvas.SetLeft(txt1, 10)
Canvas.SetTop(txt1, 100)
myCanvas.Children.Add(txt1)

'Add a second text element to show how absolute positioning works in a Canvas
Dim txt2 As New TextBlock
txt2.FontSize = 22
txt2.Text = "Isn't absolute positioning handy?"
Canvas.SetLeft(txt2, 75)
Canvas.SetTop(txt2, 200)
myCanvas.Children.Add(txt2)
Me.Content = myCanvas
<Page WindowTitle="Canvas Sample" xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation">
  <Canvas Background="LightSteelBlue">
    <TextBlock FontSize="14" Canvas.Top="100" Canvas.Left="10">Hello World!</TextBlock>
    <TextBlock FontSize="22" Canvas.Top="200" Canvas.Left="75">Isn't absolute positioning handy?</TextBlock>
  </Canvas>
</Page>

See Also

Reference

Canvas
TextBlock
SetTop
SetLeft
Top
Left

Concepts

Panels Overview

Other Resources

Canvas How-to Topics
Canvas Samples