如何:使用画布的附加属性来定位子元素

更新:2007 年 11 月

本示例演示如何使用 Canvas 的附加属性来定位子元素。

示例

下面的示例将四个 Button 元素添加为父 Canvas 的子元素。每个子元素代表 Canvas 的一个不同附加属性:BottomLeftRightTop。每个 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 ();

<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>

请参见

任务

画布的附加属性示例

概念

面板概述

附加属性概述

参考

Canvas

Bottom

Left

Right

Top

Button

其他资源

Canvas 示例

画布帮助主题