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

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

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();
<Page xmlns="http://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>
Was this page helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2014 Microsoft