Window Presentation Foundation

Transformationen

Die konsequente Benutzung von Vektorgrafiken bei allen grafischen Elementen ermöglicht unter anderem die stufenlose Transformation von Steuerelementen und anderen grafischen Objekten schon im Layout, ohne das dafür komplizierter Code geschrieben werden muss. Trotzdem muss man zwischen zwei unterschiedlichen Transformationsarten unterscheiden.

Die erste Art ist der RenderTransform. Dieser Transformation verändert nur die Art wie ein Objekt im Fenster abgebildet wird. Am Besten wir das im Folgenden Beispiel deutlich in dem eine Button in einem StackPanel um 45 Grad gedreht werden soll.

<StackPanel>
   <Button Width="100" Height="25" Margin="5">Hallo Welt 1</Button>
   <Button Width="100" Height="25" Margin="5">Hallo Welt 2
   <Button.RenderTransform>
      <RotateTransform Angle="45" CenterX="50" CenterY="12.5" />
   </Button.RenderTransform>
   </Button>
<Button Width="100" Height="25" Margin="5">Hallo Welt 3</Button>
</StackPanel>

stacks_image_7990E71C-CB95-432C-8ADA-8537A3BEE0BD

Obwohl diese Transformation genau das tut was man ihr vorgibt, nämlich den Button um 45 Grad zu drehen ist das Ergebnis möglicherweise nicht das Gewünschte. Hier überlagern sich die Button, der definierte Abstand von fünf Einheiten kommt nicht mehr zum tragen. Möchte man mit diesem transformierten Objekt auch andere Objekte in ihrer Position beeinflussen, so ist dies mit dem LayoutTransfrom zu realisieren.

<StackPanel>
   <Button Width="100" Height="25" Margin="5">Hallo Welt 1</Button>
   <Button Width="100" Height="25" Margin="5">Hallo Welt 2
   <Button.LayoutTransform>
      <RotateTransform Angle="45" CenterX="50" CenterY="12.5" />
   </Button.LayoutTransform>
   </Button>
   <Button Width="100" Height="25" Margin="5">Hallo Welt 3</Button>
</StackPanel>

stacks_image_6A0C581D-E78A-4CC7-A16D-EC77AF934FAA

Auch dieser Button dreht sich um 45 Grad, verschiebt dabei aber den folgenden Button im StackPanel nach unten. Auch der angegebene Abstand zu den anderen Steuerelementen wird eingehalten.
Eine weitere Transformation ist das Skalieren. Hierbei kann die Größe eines Objekts in der X und Y Achse manipuliert werden.

<Button Width="100" Height="25" Margin="5">Hallo Welt 2
<Button.LayoutTransform>
<ScaleTransform ScaleX="1.2" ScaleY="0.8"/>
</Button.LayoutTransform>
</Button>

Will man mehrere Transformationen auf ein Objekt anwenden, benötigt man eine TransformGroup. Dabei sollte man nicht außer Acht lassen, dass die Reihenfolge der Transformationen durchaus Einfluss auf das Ergebnis hat.

<Button.LayoutTransform>
<TransformGroup>
<RotateTransform Angle="45" CenterX="50" CenterY="12.5" />
<ScaleTransform ScaleX="1.2" ScaleY="0.8"/>
</TransformGroup>
</Button.LayoutTransform>

Natürlich ist man bei Transformationen nicht auf einzelne Steuerelemente begrenzt. Auch komplette StackPanel samt Inhalt lassen sich problemlos transformieren.

<StackPanel>
<Button Width="100" Height="25" Margin="5">Hallo Welt 1</Button>
<Button Width="100" Height="25" Margin="5">Hallo Welt 2</Button>
<Button Width="100" Height="25" Margin="5">Hallo Welt 3</Button>
<StackPanel.LayoutTransform>
<RotateTransform Angle="45" CenterX="50" CenterY="12.5" />
</StackPanel.LayoutTransform>
</StackPanel>

stacks_image_D5611670-B5FB-47F7-8C75-B5DABAB45752

SkewTransform ist eine Transformation, die man am besten mit "abschrägen" übersetzten kann. Damit ist es möglich, ein Objekt über eine oder zwei Achsen hinweg abzuschrägen.

<StackPanel>
<Button Width="100" Height="25" Margin="5">Hallo Welt 1</Button>
<Button Width="100" Height="25" Margin="5">
Hallo Welt 2
<Button.LayoutTransform>
<SkewTransform AngleX="-20" AngleY="0"/>
</Button.LayoutTransform>
</Button>
<Button Width="100" Height="25" Margin="5">Hallo Welt 3</Button>
</StackPanel>

Die einfachste Transformation ist die TranslateTransform, die nichts weiter tut als ein Objekt in der X oder Y Achse zu verschieben. Hierbei gibt es allerdings gewisse Einschränkungen. So ist es durchaus möglich, dass diese Transformation keine Wirkung zeigt. Nämlich dann, wenn LayoutTransform benutzt wird und sich ein Objekt in einem StackPanel oder einem ähnlichem Container befindet. Ein RenderTransform funktioniert hingegen immer, kann aber unerwartete Ergebnisse im Layout zur Folge haben. Im folgenden Beispiel wird ein Button aus einem StackPanel heraus transformiert. Die so entstehende Lücke wird aber, anders als man es von einem StackPanel gewohnt ist, nicht geschlossen.

<StackPanel>
<Button Width="100" Height="25" Margin="5">Hallo Welt 1</Button>
<Button Width="100" Height="25" Margin="5">
Hallo Welt 2
<Button.RenderTransform>
<TransformGroup>
<TranslateTransform X="80" />
<TranslateTransform Y="80" />
</TransformGroup>
</Button.RenderTransform>
</Button>
<Button Width="100" Height="25" Margin="5">Hallo Welt 3</Button>
</StackPanel>

stacks_image_8E174715-A6A6-42CA-9492-28951E34B419