How to: Use the Attached Properties of Canvas to Position Child Elements

  • Article

This example shows how to use the attached properties of Canvas to position child elements.

Example

The following example adds four Button elements as child elements of a parent Canvas. Each child element represents a distinct attached property of Canvas: Bottom, Left, Right, and Top. Each Button is positioned relative to the parent Canvas and according to its assigned property value.

// Create the application's main window
mainWindow = gcnew System::Windows::Window();
mainWindow->Title = "Canvas Attached Properties Sample";

// Add a Border
Border^ myBorder = gcnew Border();
myBorder->HorizontalAlignment = HorizontalAlignment::Left;
myBorder->VerticalAlignment = VerticalAlignment::Top;
myBorder->BorderBrush = Brushes::Black;
myBorder->BorderThickness = System::Windows::Thickness(2);

// Create the Canvas
Canvas^ myCanvas = gcnew Canvas();
myCanvas->Background = Brushes::LightBlue;
myCanvas->Width = 400;
myCanvas->Height = 400;

// Create the child Button elements
Button^ myButton1 = gcnew Button();
Button^ myButton2 = gcnew Button();
Button^ myButton3 = gcnew Button();
Button^ myButton4 = gcnew Button();

// Set Positioning attached properties on Button elements
Canvas::SetTop(myButton1, 50);
myButton1->Content = "Canvas.Top=50";
Canvas::SetBottom(myButton2, 50);
myButton2->Content = "Canvas.Bottom=50";
Canvas::SetLeft(myButton3, 50);
myButton3->Content = "Canvas.Left=50";
Canvas::SetRight(myButton4, 50);
myButton4->Content = "Canvas.Right=50";

// Add Buttons to the Canvas' Children collection
myCanvas->Children->Add(myButton1);
myCanvas->Children->Add(myButton2);
myCanvas->Children->Add(myButton3);
myCanvas->Children->Add(myButton4);

// Add the Canvas as the lone Child of the Border
myBorder->Child = myCanvas;

// Add the Border as the Content of the Parent Window Object
mainWindow->Content = myBorder;
mainWindow->Show();

// Create the application's main window
mainWindow = new Window ();
mainWindow.Title = "Canvas Attached Properties Sample";

// Add a Border
Border myBorder = new Border();
myBorder.HorizontalAlignment = HorizontalAlignment.Left;
myBorder.VerticalAlignment = VerticalAlignment.Top;
myBorder.BorderBrush = Brushes.Black;
myBorder.BorderThickness = new Thickness(2);

// Create the Canvas
Canvas myCanvas = new Canvas();
myCanvas.Background = Brushes.LightBlue;
myCanvas.Width = 400;
myCanvas.Height = 400;

// Create the child Button elements
Button myButton1 = new Button();
Button myButton2 = new Button();
Button myButton3 = new Button();
Button myButton4 = new Button();

// Set Positioning attached properties on Button elements
Canvas.SetTop(myButton1, 50);
myButton1.Content = "Canvas.Top=50";
Canvas.SetBottom(myButton2, 50);
myButton2.Content = "Canvas.Bottom=50";
Canvas.SetLeft(myButton3, 50);
myButton3.Content = "Canvas.Left=50";
Canvas.SetRight(myButton4, 50);
myButton4.Content = "Canvas.Right=50";

// Add Buttons to the Canvas' Children collection
myCanvas.Children.Add(myButton1);
myCanvas.Children.Add(myButton2);
myCanvas.Children.Add(myButton3);
myCanvas.Children.Add(myButton4);

// Add the Canvas as the lone Child of the Border
myBorder.Child = myCanvas;

// Add the Border as the Content of the Parent Window Object
mainWindow.Content = myBorder;
mainWindow.Show ();

WindowTitle = "Attached Properties Sample"
' Add a Border
Dim myBorder As New Border()
myBorder.HorizontalAlignment = Windows.HorizontalAlignment.Left
myBorder.VerticalAlignment = Windows.VerticalAlignment.Top
myBorder.BorderBrush = Brushes.Black
myBorder.BorderThickness = New Thickness(2)

' Create a Canvas as the root Panel
Dim myCanvas As New Canvas()
myCanvas.Background = Brushes.LightBlue
myCanvas.Width = 400
myCanvas.Height = 400

' Create the child Button elements
Dim myButton1 As New Button()
Dim myButton2 As New Button()
Dim myButton3 As New Button()
Dim myButton4 As New Button()

' Set Positioning attached properties on Button elements
Canvas.SetTop(myButton1, 50)
myButton1.Content = "Canvas.Top=50"
Canvas.SetBottom(myButton2, 50)
myButton2.Content = "Canvas.Bottom=50"
Canvas.SetLeft(myButton3, 50)
myButton3.Content = "Canvas.Left=50"
Canvas.SetRight(myButton4, 50)
myButton4.Content = "Canvas.Right=50"

' Add Buttons to the Canvas' Children collection
myCanvas.Children.Add(myButton1)
myCanvas.Children.Add(myButton2)
myCanvas.Children.Add(myButton3)
myCanvas.Children.Add(myButton4)

' Add the Canvas as the lone Child of the Border
myBorder.Child = myCanvas
Me.Content = myBorder

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" WindowTitle="Canvas Attached Properties Sample">
  <Border HorizontalAlignment="Left" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="2">
    <Canvas Background="LightBlue" Width="400" Height="400">
      <Button Canvas.Top="50">Canvas.Top="50"</Button>
      <Button Canvas.Bottom="50">Canvas.Bottom="50"</Button>
      <Button Canvas.Left="50">Canvas.Left="50"</Button>
      <Button Canvas.Right="50">Canvas.Right="50"</Button>
    </Canvas>
  </Border>    
</Page>

See Also

Reference

Canvas
Bottom
Left
Right
Top
Button

Concepts

Panels Overview
Attached Properties Overview

Other Resources

Canvas Attached Properties Sample
Canvas Samples
Canvas How-to Topics