In meiner letzten Silverlight Schulung hat ein Teilnehmer ziemlich pentrant nachgefragt in welcher Reihenfolge Transformationen ausgeführt werden. Ich habe geantwortet gleichzeitig. Damit hatte ich recht und unrecht zugleich.
Seit Silverlight 4 erzeugt Expression Blend Transformationen per Attribute in einem CompositeTransform Element
<Button Content="Button" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" Margin="5">
<Button.RenderTransform>
<CompositeTransform TranslateY="-13" Rotation="19.549"/>
</Button.RenderTransform>
</Button>
Wenn nun mehrere Buttons in einem Stackpanel platziert werden sieht man in Blend zwei Effekte
Die Ursprüngliche Position des Buttons wird hellblau dargestellt. Das liegt daran das das Reendering zunächst durchgeführt wird als ob das UIElement ganz normal vorhanden wäre. Hier eben drei Buttons in einem Stackpanel. Das macht auch sicher Sinn. Wohin sollten die Buttons auch rutschen? Danach wird die Transformation angewandt. In diesem Beispiel eine Drehung und eine Positionsänderung auf der Y Achse.
Vor Silverlight 4 hat Expression Blend (als 3 oder kleiner) eine Transformgroup erzeugt. Diese enthielt dann die Transformationen als Unterelemente. Eine Menge XAML Code und vor allem teuflisch da Animationen die Elemtente per Index angesteuert haben. Ein entferntes Transformation Element hat so ziemlich weit reichende Auswirkungen. Entsprechend ist der Lösungsansatz von Silverlight 4 per CompositeTransform auch wesentlich besser.
Seltsamerweise enthalten die Silverlight 4 Design Vorlagen auch noch immer den alten Weg per Transformgroup
<LinearGradientBrush EndPoint="0,1" MappingMode="Absolute" SpreadMethod="Repeat" StartPoint="20,1">
<LinearGradientBrush.Transform>
<TransformGroup>
<TranslateTransform X="0"/>
<SkewTransform AngleX="-30"/>
</TransformGroup>
Nun zur zentralen Frage. Spielt die Reihenfolge der Element in der Transformgroup eine Rolle? Die Standardreihenfolge unter Blend war wie folgt. Dies habe ich auch nie in Frage gestellt und verändert.
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
Wenn man nun die Reihenfolge von TranslateTransform und RotateTransform wie folgt tauscht, ändert sich in der Tat die Oberfläche, was der Beweis dafür ist, das es eine entscheidende Rolle spielt.
<TransformGroup>
<TranslateTransform X="200"/>
<RotateTransform Angle="45"/>
</TransformGroup>
