方法 : Canvas の添付プロパティを使用して子要素を配置する

[アーティクル]
08/09/2011

この例では、Canvas の添付プロパティを使用して子要素を配置する方法を示します。

使用例

次の例では、4 つの Button 要素を親 Canvas の子要素として追加します。各子要素は、Canvas の異なる添付プロパティである Bottom、Left、Right、および Top を表します。各 Button は、親の Canvas を基準に、割り当てられているプロパティ値に従って配置されます。

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>