Das Canvas Control

Eine Canvas ist wahrscheinlich das simpelste Panel überhaupt. Es tut eigentlich standardmässig gar nichts, es erlaubt dir nur Controls hinzuzufügen und diese dann mittels expliziter Koordinaten selbst zu positionieren.

Falls du schon einmal eine andere UI-Library wie WinForms genutzt hast, wird dich das wahrscheinlich direkt zur Verwendung animieren, aber obwohl es befriedigend sein kann, absolute Kontrolle über alle Kind-Controls zu haben, bedeutet das auch, dass das Panel nichts für einen tun wird sobald der User das Fenster vergrössert, wenn du absolut positionierten Text ausrichtest, oder wenn der Inhalt vergrössert wird.

Mehr dazu später, kommen wir zu einem kleinen Beispiel. Bei diesem hier geht es vor allem darum, zu zeigen, wie wenig eine Canvas standardmässig tut:

<Window x:Class="WpfTutorialSamples.Panels.Canvas"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Canvas" Height="200" Width="200">
	<Canvas>
		<Button>Button 1</Button>
		<Button>Button 2</Button>
	</Canvas>
</Window>

Wie du sehen kannst werden beide Buttons am exakt gleichen Ort positioniert, obwohl es zwei von ihnen gibt, deshalb ist nur der zweite Sichtbar. Die Canvas tut absolut nichts, so lange keine Koordinaten an die Inhaltsobjekte vergeben werden. Dass wird mittels der Left, Right, Top und Bottom Eigenschaften getan, die vom Canvas Control an alle Kind-Controls vergeben werden.

Diese Eigenschaften erlauben es dir, eine Position relativ zu den vier Ecken der Canvas anzugeben. Standardmässig sind sie alle auf NaN (Not a Number [Keine Zahl]) gesetzt, was die Canvas dazu veranlasst die Objekte in der oberen linken Ecke zu positionieren. Aber wie bemerkt, kannst du das einfach ändern.

<Window x:Class="WpfTutorialSamples.Panels.Canvas"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Canvas" Height="200" Width="200">
	<Canvas>
		<Button Canvas.Left="10">Top left</Button>
		<Button Canvas.Right="10">Top right</Button>
		<Button Canvas.Left="10" Canvas.Bottom="10">Bottom left</Button>
		<Button Canvas.Right="10" Canvas.Bottom="10">Bottom right</Button>
	</Canvas>
</Window>

Beachte, dass ich lediglich die Eigenschaften setze, die ich brauche. Für die ersten beiden Knöpfe, möchte ich nur einen Wert für die X-Achse definieren, deshalb nutze ich die Left- und Right-Eigenschaften, um die Knöpfe von beiden Seiten aus in Richtung Zentrum zu drücken.

Für die unteren Knöpfe verwende ich beides Left/Right und Bottom um sie von beiden Richtungen aus zum Zentrum zu setzen. Normalerweise wirst du entweder einen Top- oder Bottomwert und/oder einen Left oder Rightwert setzen.

Wie gesagt, da die Canvas dir die komplette Kontrolle über die Positionen gibt, interessiert es sie kaum, ob es genug Platz für alle Controls gibt oder nicht, genausowenig ob sie überlappen. Das macht sie zu einer schlechten Wahl für ziemlich alle Arten von Dialog-Designs. Aber Canvas ist, wie auch der Name aussagt, bestens geeignet für zumindest etwas: Zeichnen. WPF hat einige Controls, die man in eine Canvas platzieren kann, um schöne Illustrationen zu erzeugen.

Z-Index

Im nächsten Beispiel werden wir ein paar "Zeichnungs"-Controls von WPF verwenden, um ein anderes sehr wichtiges Konzept von Canvas zu illustrieren: den Z-Index. Wenn in einer Canvas mehrere Controls überlappen, wird normalerweise der später definierte die Überhand gewinnen, und den (die) anderen überlappen. Wie auch immer durch Nutzung der Z-Index Eigenschaft kann dieses Verhalten einfach verändert werden.

Zuerst ein Beispiel bei dem wir den Z-Index überhaupt nicht nutzen:

<Window x:Class="WpfTutorialSamples.Panels.CanvasZIndex"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="CanvasZIndex" Height="275" Width="260">
    <Canvas>
        <Ellipse Fill="Gainsboro" Canvas.Left="25" Canvas.Top="25" Width="200" Height="200" />
        <Rectangle Fill="LightBlue" Canvas.Left="25" Canvas.Top="25" Width="50" Height="50" />
        <Rectangle Fill="LightCoral" Canvas.Left="50" Canvas.Top="50" Width="50" Height="50" />
        <Rectangle Fill="LightCyan" Canvas.Left="75" Canvas.Top="75" Width="50" Height="50" />
    </Canvas>
</Window>

Beachte, dass alle Rechtecke über dem Kreis liegen, weil sie später definiert sind, und dass jedes von ihnen das vorher definierte überlappet. Versuchen wir, dass zu ändern:

<Window x:Class="WpfTutorialSamples.Panels.CanvasZIndex"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="CanvasZIndex" Height="275" Width="260">
    <Canvas>
        <Ellipse Panel.ZIndex="2" Fill="Gainsboro" Canvas.Left="25" Canvas.Top="25" Width="200" Height="200" />
        <Rectangle Panel.ZIndex="3" Fill="LightBlue" Canvas.Left="25" Canvas.Top="25" Width="50" Height="50" />
        <Rectangle Panel.ZIndex="2" Fill="LightCoral" Canvas.Left="50" Canvas.Top="50" Width="50" Height="50" />
        <Rectangle Panel.ZIndex="4" Fill="LightCyan" Canvas.Left="75" Canvas.Top="75" Width="50" Height="50" />
    </Canvas>
</Window>

Der StandardZ-Index ist 0, aber wir weisen jeder Form einen neuen Wert zu. Die Regel ist, dass das Element mit dem höheren Z-Index alle mit kleineren Werten überlagert. Wenn 2 Werte identisch sind, "gewinnt" das später definierte. Wie man auf dem Screenshot sehen kann, gibt es einen ziemlich anderen Look, wenn man den Z-Index ändert.