18.3 Canvas 

Canvas ist der einfachste von allen Layoutcontainern. Mit ihm lassen sich die darin enthaltenen Steuerelemente in klassischer Weise beliebig anordnen. Die Positionierung erfolgt in einem kartesischen X-Y-Koordinatensystem. Canvas stellt dazu allen darin enthaltenen Komponenten die Eigenschaften Left, Right, Top und Bottom zur Verfügung.
Diese vier Eigenschaften eines Steuerelements im Canvas gleichzeitig zu setzen, führt nicht zu dem vielleicht erhofften Erfolg. Aus den beiden Pärchen Left und Right beziehungsweise Top und Bottom können Sie immer nur eine Eigenschaft festlegen, also beispielsweise Left und Bottom oder Right und Bottom. Verwenden Sie gleichzeitig Left und Right, könnte man der Meinung sein, dass der Container links und rechts in seiner übergeordneten Komponente, also beispielsweise dem Window, fixiert wird, woraus dann die Breite des Containers resultiert. Dem ist aber nicht so. Die Angabe von Left hat eine höhere Priorität als die von Right. Letztgenannte Eigenschaft wird ignoriert, und das Control wird in seiner Standardbreite dargestellt.
Im folgenden Beispielcode wird diese Situation durch Button1 deutlich gezeigt, bei dem sowohl Left als auch Right gesetzt sind. Button2 wird durch die Angabe von Left und Top im Fenster fixiert, Button3 durch Right und Bottom.
Hinweis |
In den meisten Fällen werden bei der Vorstellung der einzelnen Layoutcontainer Button-Steuerelemente verwendet. Die gemachten Aussagen treffen natürlich analog auch auf alle anderen Steuerelemente zu. |
<Canvas> <Button Canvas.Left="25" Canvas.Right="35" Height="30">Button1</Button> <Button Canvas.Left="55" Canvas.Top="50" Height="30" Width="80">Button2</Button> <Button Canvas.Right="55" Canvas.Bottom="50" Height="30" Width="80">Button3</Button> </Canvas>
Wenn Sie das Fenster zur Laufzeit so weit verkleinern, dass sich zwei Steuerelemente überschneiden, werden die Steuerelemente im Container in der Reihenfolge aufgebaut, wie sie in der XAML-Datei angegeben ist. Dieses Phänomen können Sie sehen, wenn Sie das Fenster in Abbildung 18.6 sehr weit verkleinern: Button3 wird sich über Button2 schieben.
Abbildung 18.6 Button-Anordnung in einem »Canvas«