Cómo: Utilizar las propiedades asociadas de Canvas para situar elementos secundarios

En este ejemplo se muestra cómo utilizar las propiedades adjuntas de Canvas para situar elementos secundarios.

Ejemplo

En el ejemplo siguiente se agregan cuatro elementos Button como elementos secundarios de un objeto Canvas primario. Cada elemento secundario representa una propiedad adjunta distinta de Canvas: Bottom, Left, Right y Top. Cada Button se sitúa con respecto al objeto Canvas primario y de acuerdo con su valor de propiedad asignado.

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

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

         // 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="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>

Vea también

Referencia

Canvas

Bottom

Left

Right

Top

Button

Conceptos

Información general sobre elementos Panel

Información general sobre propiedades asociadas

Otros recursos

Temas "Cómo..." de Canvas