Übersicht über Transformationen

In diesem Thema wird die Verwendung von 2-D Transform-Klassen zum Drehen, Skalieren, Verschieben (Übersetzen) und Neigen von FrameworkElement-Objekten beschrieben.

Dieses Thema enthält folgende Abschnitte.

• Was ist eine Transformation?
• Transformationsklassen
• Allgemeine Transformationseigenschaften
• Transformationen und Koordinatensysteme
• Transformieren eines FrameworkElement
• Beispiel: Drehen eines FrameworkElement um 45 Grad
• Animieren von Transformationen
• Features von Freezable
• Verwandte Abschnitte

Was ist eine Transformation?

Mit einer Transform-Klasse wird festgelegt, wie Punkte von einem Koordinatenraum zu einem anderen zugeordnet bzw. transformiert werden. Diese Zuordnung wird durch eine Transformations-Matrix beschrieben. Dabei handelt es sich um eine Auflistung von drei Zeilen mit drei Spalten von Double-Werten.

Hinweis
Von Windows Presentation Foundation (WPF) werden zeilengerichtete Matrizen verwendet.Vektoren werden als Zeilenvektoren und nicht als Spaltenvektoren ausgedrückt.

In der folgenden Tabelle wird die Struktur einer WPF-Matrix angezeigt.

2D-Transformationsmatrix

M11 Standard: 1,0	M12 Standard: 0,0	0.0
M21 Standard: 0,0	M22 Standard: 1,0	0.0
OffsetX Standard: 0,0	OffsetY Standard: 0,0	1.0

Indem Sie die Werte der Matrix ändern, können Sie ein Objekt drehen, skalieren, neigen und verschieben (übersetzen). Wenn Sie beispielsweise den Wert in der ersten Spalte der dritten Zeile (OffsetX-Wert) auf 100 ändern, können Sie damit ein Objekt entlang der x-Achse um 100 Einheiten verschieben. Wenn der Wert in der zweiten Spalte der zweiten Zeile auf 3 geändert wird, kann damit ein Objekt auf das Dreifache seiner aktuellen Höhe gestreckt werden. Wenn beide Werte geändert werden, wird das Objekt 100 Einheiten entlang der x-Achse verschoben und seine Höhe um den Faktor 3 gestreckt. Da Windows Presentation Foundation (WPF) nur affine Transformationen unterstützt, sind die Werte in der rechten Spalte immer auf 0, 0, 1 festgelegt.

Obwohl die Werte einer Matrix mithilfe von Windows Presentation Foundation (WPF) direkt geändert werden können, werden auch mehrere Transform-Klassen bereitgestellt, mit denen Objekte transformiert werden können, ohne dass die Konfiguration der zugrunde liegenden Matrixstruktur bekannt ist. Beispielsweise können Sie mit der ScaleTransform-Klasse ein Objekt skalieren, indem Sie die zugehörigen Eigenschaften ScaleX und ScaleY festlegen, anstatt eine Transformationsmatrix zu bearbeiten. Ebenso können Sie mit der RotateTransform-Klasse ein Objekt drehen, indem Sie die zugehörige Angle-Eigenschaft festlegen.

Transformationsklassen

Windows Presentation Foundation (WPF) bietet die folgenden 2-D Transform-Klassen für allgemeine Transformationsvorgänge:

Klasse	Beschreibung	Beispiel	Darstellung
RotateTransform	Dreht ein Element anhand des angegebenen Werts für Angle.	Gewusst wie: Drehen eines Objekts
ScaleTransform	Skaliert ein Element anhand der angegebenen Werte für ScaleX und ScaleY.	Gewusst wie: Skalieren eines Elements
SkewTransform	Neigt ein Element anhand der angegebenen Werte für AngleX und AngleY.	Gewusst wie: Neigen eines Elements
TranslateTransform	Verschiebt (übersetzt) ein Element anhand der angegebenen Werte für X und Y.	Gewusst wie: Übersetzen eines Elements

Zum Erstellen komplexerer Transformationen bietet Windows Presentation Foundation (WPF) die beiden folgenden Klassen:

Klasse	Beschreibung	Beispiel
TransformGroup	Gruppiert mehrere TransformGroup-Objekte in einer einzelnen Transform-Klasse, auf die Sie dann Transformationseigenschaften anwenden können.	Gewusst wie: Anwenden mehrerer Transformationen auf ein Objekt
MatrixTransform	Erstellt benutzerdefinierte Transformationen, die nicht von den anderen Transform-Klassen bereitgestellt werden. Durch Verwendung von MatrixTransform wird eine Matrix direkt bearbeitet.	Gewusst wie: Verwenden von MatrixTransform zum Erstellen benutzerdefinierter Transformationen

Windows Presentation Foundation (WPF) stellt auch 3-D-Transformationen bereit. Weitere Informationen finden Sie in den Ausführungen zur Transform3D-Klasse.

Allgemeine Transformationseigenschaften

Eine Möglichkeit zum Transformieren eines Objekts ist die Deklaration des entsprechenden Transform-Typs und dessen Anwendung auf die Transformationseigenschaft des Objekts. Verschiedene Typen von Objekten haben unterschiedliche Typen von Transformationseigenschaften. Die folgende Tabelle enthält mehrere häufig verwendete Windows Presentation Foundation (WPF)-Typen sowie die zugehörigen Transformationseigenschaften.

Typ	Transformationseigenschaften
Brush	Transform, RelativeTransform
ContainerVisual	Transform
DrawingGroup	Transform
FrameworkElement	RenderTransform, LayoutTransform
Geometry	Transform
TextEffect	Transform
UIElement	RenderTransform

Transformationen und Koordinatensysteme

Bei der Transformation eines Objekts wird nicht nur das Objekt transformiert, sondern auch der Koordinatenraum, in dem sich das Objekt befindet. Standardmäßig ist eine Transformation am Ursprung des Koordinatensystems des Zielobjekts zentriert: (0,0). Die einzige Ausnahme ist TranslateTransform. Für TranslateTransform müssen keine Zentrierungseigenschaften festgelegt werden, da sich die Zentrierung nicht auf die Übersetzung auswirkt.

Im folgenden Beispiel wird mit einem RotateTransform-Element ein Rectangle-Element (vom Typ FrameworkElement) um 45 Grad um seinen Standardmittelpunkt (0,0) gedreht. In der nachstehenden Abbildung sehen Sie die Auswirkung der Drehung.

Ein 45 Grad um den Punkt (0,0) gedrehtes Rectangle-Element

<Canvas Width="200" Height="200">
  <Rectangle 
    Canvas.Left="100" Canvas.Top="100"
    Width="50" Height="50" 
    Fill="RoyalBlue" Opacity="1.0">
    <Rectangle.RenderTransform>
      <RotateTransform Angle="45" />
    </Rectangle.RenderTransform>
  </Rectangle>
</Canvas>

Standardmäßig wird das Element um seine obere linke Ecke (0, 0) gedreht. Die Klassen RotateTransform, ScaleTransform und SkewTransform enthalten CenterX- und CenterY-Eigenschaften, mit denen der Punkt angegeben werden kann, auf den die Transformation angewendet wird.

Im nächsten Beispiel wird ebenfalls eine RotateTransform-Klasse verwendet, um ein Rectangle-Element um 45 Grad zu drehen. Dabei sind die Eigenschaften CenterX und CenterY jedoch so festgelegt, dass die RotateTransform-Klasse den Mittelpunkt (25, 25) hat. In der nachstehenden Abbildung sehen Sie die Auswirkung der Drehung.

Ein 45 Grad um den Punkt (25, 25) gedrehtes Rectangle-Element

<Canvas Width="200" Height="200">
  <Rectangle 
    Canvas.Left="100" Canvas.Top="100"
    Width="50" Height="50" 
    Fill="RoyalBlue" Opacity="1.0">
    <Rectangle.RenderTransform>
      <RotateTransform Angle="45" CenterX="25" CenterY="25" />
    </Rectangle.RenderTransform>
  </Rectangle>
</Canvas>

Transformieren eines FrameworkElement

Um Transformationen auf eine FrameworkElement-Klasse anzuwenden, erstellen Sie eine Transform-Klasse und wenden diese auf eine der beiden Eigenschaften der FrameworkElement-Klasse an:

• LayoutTransform – Eine Transformation, die vor dem Layoutdurchlauf angewendet wird. Nach Anwendung der Transformation wird die transformierte Größe und Position des Elements vom Layoutsystem verarbeitet.

• RenderTransform – Eine Transformation, durch die die Darstellung des Elements geändert wird, die jedoch nach Abschluss des Layoutdurchlaufs angewendet wird. Sie können die Leistung verbessern, indem Sie die RenderTransform-Eigenschaft anstelle der LayoutTransform-Eigenschaft verwenden.

Welche Eigenschaft sollte verwendet werden? Verwenden Sie aufgrund der Leistungsvorteile nach Möglichkeit die RenderTransform-Eigenschaft, insbesondere dann, wenn Sie mit animierten Transform-Objekten arbeiten. Verwenden Sie die LayoutTransform-Eigenschaft zum Skalieren, Drehen oder Neigen, wenn das übergeordnete Element an die transformierte Größe des Elements angepasst werden muss. Beachten Sie, dass bei Verwendung mit der LayoutTransform-Eigenschaft TranslateTransform-Objekte scheinbar keine Auswirkung auf Elemente haben. Der Grund hierfür ist, dass das übersetzte Element vom Layoutsystem als Teil der Verarbeitung an seine ursprüngliche Position zurückgesetzt wird.

Weitere Informationen über das Layout in Windows Presentation Foundation (WPF) finden Sie unter Layoutsystem.

Beispiel: Drehen eines FrameworkElement um 45 Grad

Im folgenden Beispiel wird ein RotateTransform-Element verwendet, um eine Schaltfläche um 45 Grad im Uhrzeigersinn zu drehen. Die Schaltfläche ist zusammen mit zwei weiteren Schaltflächen in einer StackPanel-Klasse enthalten.

Standardmäßig erfolgt mit RotateTransform eine Drehung um den Punkt (0, 0). Da im Beispiel kein Wert für den Mittelpunkt angegeben ist, wird die Schaltfläche um den Punkt (0, 0) gedreht, also um ihre linke obere Ecke. Die RotateTransform-Klasse wird auf die RenderTransform-Eigenschaft angewendet. In der folgenden Darstellung wird das Ergebnis der Transformation veranschaulicht.

45-Grad-Drehung im Uhrzeigersinn um die obere linke Ecke

<Border Margin="30" 
  HorizontalAlignment="Left" VerticalAlignment="Top"
  BorderBrush="Black" BorderThickness="1" >
  <StackPanel Orientation="Vertical">
    <Button Content="A Button" Opacity="1" />
    <Button Content="Rotated Button">
      <Button.RenderTransform>
        <RotateTransform Angle="45" />
      </Button.RenderTransform>
    </Button>
    <Button Content="A Button" Opacity="1" />
  </StackPanel>
</Border>

Im nächsten Beispiel wird ebenfalls eine RotateTransform-Klasse verwendet, um eine Schaltfläche um 45 Grad im Uhrzeigersinn zu drehen. Darüber hinaus wird die RenderTransformOrigin-Eigenschaft der Schaltfläche auf (0,5, 0,5) gesetzt. Der Wert der RenderTransformOrigin-Eigenschaft verhält sich relativ zur Größe der Schaltfläche. Als Ergebnis wird die Drehung anstatt um die obere linke Ecke um den Mittelpunkt der Schaltfläche ausgeführt. In der folgenden Darstellung wird das Ergebnis der Transformation veranschaulicht.

45-Grad-Drehung im Uhrzeigersinn um den Mittelpunkt

<Border Margin="30"   
  HorizontalAlignment="Left" VerticalAlignment="Top"
  BorderBrush="Black" BorderThickness="1">
  <StackPanel Orientation="Vertical">
    <Button Content="A Button" Opacity="1" />
    <Button Content="Rotated Button"
      RenderTransformOrigin="0.5,0.5">
      <Button.RenderTransform>
        <RotateTransform Angle="45" />
      </Button.RenderTransform>
    </Button>
    <Button Content="A Button" Opacity="1" />
  </StackPanel>
</Border>

Im folgenden Beispiel wird die LayoutTransform-Eigenschaft anstelle der RenderTransform-Eigenschaft zum Drehen der Schaltfläche verwendet. Dadurch wirkt sich die Transformation auf das Layout der Schaltfläche aus, wodurch ein vollständiger Durchlauf des Layoutsystems ausgelöst wird. Als Ergebnis wird die Schaltfläche gedreht und anschließend neu positioniert, da ihre Größe geändert wurde. In der folgenden Darstellung wird das Ergebnis der Transformation veranschaulicht.

Mit LayoutTransform gedrehte Schaltfläche

<Border Margin="30"   
 HorizontalAlignment="Left" VerticalAlignment="Top"
 BorderBrush="Black" BorderThickness="1">
  <StackPanel Orientation="Vertical">

    <Button Content="A Button" Opacity="1" />   
    <Button Content="Rotated Button">
      <Button.LayoutTransform>
        <RotateTransform Angle="45"  />
      </Button.LayoutTransform>
    </Button>   
    <Button Content="A Button" Opacity="1" />
  </StackPanel>
</Border>

Animieren von Transformationen

Weil sie von der Animatable-Klasse erben, können die Transform-Klassen animiert werden. Um eine Transform-Klasse zu animieren, wenden Sie die Animation eines kompatiblen Typs auf die zu animierende Eigenschaft an.

Im folgenden Beispiel werden ein Storyboard und eine DoubleAnimation zusammen mit einer RotateTransform-Klasse verwendet, um eine Button ohne Positionsänderung zu drehen, wenn darauf geklickt wird.

<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  Title="Button Animated RotateTransform Example"
  Background="White" Margin="50">
  <StackPanel>



    <Button Content="A Button"
      RenderTransformOrigin="0.5,0.5">
      <Button.RenderTransform>
        <RotateTransform x:Name="AnimatedRotateTransform" Angle="0" />
      </Button.RenderTransform>
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation 
                Storyboard.TargetName="AnimatedRotateTransform"
                Storyboard.TargetProperty="Angle" 
                To="360" Duration="0:0:1" FillBehavior="Stop" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>

  </StackPanel>
</Page>

Das vollständige Beispiel finden Sie unter 2-D Transforms Sample. Weitere Informationen zu Animationen finden Sie unter Übersicht über Animationen.

Features von Freezable

Da die Transform-Klasse von der Freezable-Klasse erbt, bietet sie mehrere spezielle Features: Transform-Objekte können als Ressourcen deklariert, von mehreren Objekten gleichzeitig verwendet, zur Leistungsoptimierung als schreibgeschützt definiert, geklont sowie als threadsicher festgelegt werden. Weitere Informationen über die verschiedenen Features von Freezable-Objekten finden Sie unter Übersicht über Freezable-Objekte.

Siehe auch

Referenz

Transform

Matrix

Weitere Ressourcen

Gewusst-wie-Themen zu Transformationen

Beispiel für 2D-Transformation