How to: Create and Use a Canvas

 

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

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.

System_CAPS_ICON_note.jpg Note

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();
        }
    }

Canvas
TextBlock
SetTop
SetLeft
Top
Left
Panels Overview
How-to Topics

Show: