19.2 Steuerelemente positionieren 

19.2.1 Die Eigenschaften »Top«, »Bottom«, »Right« und »Left« 

Da in den meisten Layoutcontainern automatisch positioniert wird, erübrigen sich die Eigenschaften Top und Left. Diese beschreiben bekanntlich die Position eines Controls in einem Container. Anders verhält es sich beim Canvas. Wie Sie wissen, können Sie in diesem Layoutcontainer die Komponenten frei positionieren. Das Canvas gibt die Eigenschaften Top und Left als sogenannte angehängte Eigenschaften (Attached Properties) weiter, die sich auf das übergeordnete Control beziehen.
<Canvas> <Button Canvas.Left="100" Canvas.Top="40">Button1</Button> </Canvas>
19.2.2 Außenrand mit der Eigenschaft »Margin« festlegen 

Die Eigenschaft Margin legt den Abstand zum Rand eines umgebenden Layoutcontainers fest. Demnach wird der Abstand zwischen dem Außenrand einer Komponente und dem Layoutcontainer mit ihr festgelegt. Sie können Margin auf drei verschiedene Weisen einsetzen:
- Mit Margin="10" wird ein Rand von zehn Pixeln nach allen vier Seiten gewährleistet.
- Geben Sie zwei Werte an, z. B. Margin="10, 20", legt der erste Wert den linken und den rechten Rand fest, während der zweite Wert den oberen und den unteren Rand bestimmt.
- Wenn Sie Margin vier Werte mitteilen, beispielsweise Margin="10, 20, 5, 25", gilt die folgende Reihenfolge für die Randabstände: links, oben, rechts, unten.
<StackPanel> <Button Margin="10, 30, 40, 5" Height="50">Button1</Button> </StackPanel>
Abbildung 19.2 Festlegung des Außenrandes
19.2.3 Innenrand mit der Eigenschaft »Padding« festlegen 

Den Abstand des Außenrands einer Komponente zu dem Container, der sie umgibt, legen Sie mit der Eigenschaft Margin fest. Mit Padding wird auch ein Randabstand beschrieben, allerdings der Abstand einer Komponente zu ihrem eigenen Inhalt. Gewissermaßen schafft Padding einen inneren Rahmen. Der Abstand kann durch einen Wert beschrieben werden, der rundum gilt. Legen Sie vier Werte fest, gelten diese der Reihenfolge nach für den linken, oberen, rechten und unteren Randabstand.
Im folgenden Beispiel wird in einem Button ein Image dargestellt. Dabei hat der Button einen Abstand von fünf Pixeln zu seinem Container, und das Bildchen in der Schaltfläche hat rundum einen Abstand von zehn Pixeln.
<StackPanel> <Button Padding="10,10,10,10" Margin="5, 5, 5, 5" Height="200"> <Image Source="Egypt.jpg" Height="200" Width="300"> </Image> </Button> </StackPanel>