Export (0) Print
Expand All

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 = 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 ();
<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>
Show:
© 2014 Microsoft