Übersicht über Transformationen

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

Was ist eine Transformation?

Ein Transform definiert, wie Punkte von einem Koordinatenbereich in einen anderen Koordinatenbereich umgewandelt oder transformiert werden. Diese Zuordnung wird durch eine Transformation Matrixbeschrieben, bei der es sich um eine Sammlung von drei Zeilen mit drei Wertespalten Double handelt.

Hinweis

Windows Presentation Foundation (WPF) verwendet zeilenweise geordnete Matrizen. Vektoren werden als Zeilenvektoren und nicht als Spaltenvektoren ausgedrückt.

Die folgende Tabelle zeigt die Struktur einer WPF-Matrix.

Eine 2D-Transformationsmatrix

X-Achse	Y-Achse	Affine Transformation
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

Durch das Bearbeiten von Matrixwerten können Sie ein Objekt drehen, skalieren, schiefen und verschieben (übersetzen). Wenn Sie beispielsweise den Wert in der ersten Spalte der dritten Zeile (dem OffsetX Wert) in 100 ändern, können Sie ihn verwenden, um ein Objekt um 100 Einheiten entlang der X-Achse zu verschieben. Wenn Sie den Wert in der zweiten Spalte der zweiten Zeile in 3 ändern, können Sie ihn verwenden, um ein Objekt dreimal auf seine aktuelle Höhe zu strecken. Wenn Sie beide Werte ändern, verschieben Sie das Objekt um 100 Einheiten entlang der X-Achse, und strecken Sie die Höhe um den Faktor 3. Da Windows Presentation Foundation (WPF) nur affine Transformationen unterstützt, sind die Werte in der rechten Spalte immer 0, 0, 1.

Obwohl Windows Presentation Foundation (WPF) es Ihnen ermöglicht, Matrixwerte direkt zu bearbeiten, bietet es auch mehrere Transform Klassen, mit denen Sie ein Objekt transformieren können, ohne zu wissen, wie die zugrunde liegende Matrixstruktur konfiguriert ist. Mit der ScaleTransform Klasse können Sie z. B. ein Objekt skalieren, indem Sie deren ScaleX Eigenschaften festlegen ScaleY , anstatt eine Transformationsmatrix zu bearbeiten. Ebenso können Sie mit der RotateTransform Klasse ein Objekt drehen, indem Sie seine Angle Eigenschaft festlegen.

Transformieren von Klassen

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

Klasse	BESCHREIBUNG	Beispiel	Abbildung
RotateTransform	Dreht ein Element um den angegebenen Wert Angle.	Drehen eines Objekts
ScaleTransform	Skaliert ein Element nach den angegebenen ScaleX Und ScaleY Beträgen.	Skalieren eines Elements
SkewTransform	Verzerrt ein Element nach den angegebenen AngleX und AngleY Werten.	Ein Element verzerren
TranslateTransform	Verschiebt ein Element um die angegebenen X und Y Werte.	Übersetzen eines Elements

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

Klasse	BESCHREIBUNG	Beispiel
TransformGroup	Gruppiert mehrere TransformGroup Objekte in einer einzelnen Transform , die Sie dann auf transformationseigenschaften anwenden können.	Anwenden mehrerer Transformationen auf ein Objekt
MatrixTransform	Erstellt benutzerdefinierte Transformationen, die nicht von den anderen Transform Klassen bereitgestellt werden. Wenn Sie eine MatrixTransformMatrix verwenden, bearbeiten Sie eine Matrix direkt.	Verwenden eines MatrixTransform-Formulars zum Erstellen von benutzerdefinierten Transformationen

Windows Presentation Foundation (WPF) stellt auch 3D-Transformationen bereit. Weitere Informationen finden Sie in der Transform3D Klasse.

Allgemeine Transformationseigenschaften

Eine Möglichkeit zum Transformieren eines Objekts besteht darin, den entsprechenden Transform Typ zu deklarieren und auf die Transformationseigenschaft des Objekts anzuwenden. Verschiedene Objekttypen weisen unterschiedliche Arten von Transformationseigenschaften auf. In der folgenden Tabelle sind mehrere häufig verwendete Windows Presentation Foundation (WPF)-Typen und ihre Transformationseigenschaften aufgeführt.

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

Transformationen und Koordinatensysteme

Wenn Sie ein Objekt transformieren, transformieren Sie nicht nur das Objekt, sie transformieren den Koordinatenbereich, in dem dieses Objekt vorhanden ist. Standardmäßig wird eine Transformation am Ursprung des Koordinatensystems des Zielobjekts zentriert: (0,0). Die einzige Ausnahme ist TranslateTransform; eine TranslateTransform hat keine zentrierten Eigenschaften festzulegen, da der Übersetzungseffekt unabhängig davon, wo er zentriert ist, identisch ist.

Im folgenden Beispiel wird ein RotateTransform-Element, ein Typ von Rectangle, um seine Standardmitte (0, 0) bei 45 Grad gedreht. Die folgende Abbildung zeigt den Effekt der Drehung.

Ein Rechteckelement wird um 45 Grad um den Punkt (0,0) gedreht.

<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 dreht sich das Element um seine obere linke Ecke (0, 0). Die Klassen RotateTransform, ScaleTransform und SkewTransform stellen Eigenschaften für CenterX und CenterY bereit, mit denen Sie den Punkt angeben können, an dem die Transformation angewendet wird.

Im nächsten Beispiel wird auch ein RotateTransform-Element um 45 Grad gedreht; jedoch werden dieses Mal die Rectangle und CenterX Eigenschaften so festgelegt, dass das CenterY eine Mitte von (25, 25) aufweist. Die folgende Abbildung zeigt den Effekt der Drehung.

Ein Rechteckelement drehte sich um 45 Grad um den Punkt (25, 25)

<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 FrameworkElements

Um Transformationen auf ein FrameworkElementObjekt anzuwenden, erstellen Sie eine Transform und wenden sie auf eine der beiden von der FrameworkElement Klasse bereitgestellten Eigenschaften an:

• LayoutTransform – Eine Transformation, die vor dem Layoutdurchlauf angewendet wird. Nachdem die Transformation angewendet wurde, verarbeitet das Layoutsystem die transformierte Größe und Position des Elements.

• RenderTransform – Eine Transformation, die die Darstellung des Elements ändert, aber nach Abschluss des Layoutdurchlaufs angewendet wird. Wenn Sie die RenderTransform Eigenschaft anstelle der LayoutTransform Eigenschaft verwenden, können Sie Leistungsvorteile erzielen.

Welche Eigenschaft sollten Sie verwenden? Aufgrund der Leistungsvorteile, die es bereitstellt, verwenden Sie die RenderTransform Eigenschaft nach Möglichkeit, insbesondere wenn Sie animierte Transform Objekte verwenden. Verwenden Sie die LayoutTransform Eigenschaft beim Skalieren, Drehen oder Verzerren, damit sich das übergeordnete Element an die transformierte Größe des Elements anpasst. Beachten Sie, dass LayoutTransform-Objekte, wenn sie zusammen mit der TranslateTransform-Eigenschaft verwendet werden, anscheinend keine Auswirkungen auf Elemente haben. Das liegt daran, dass das Layoutsystem das übersetzte Element als Teil der Verarbeitung an seine ursprüngliche Position zurückgibt.

Weitere Informationen zum Layout in Windows Presentation Foundation (WPF) finden Sie in der Layoutübersicht .

Beispiel: Drehen eines FrameworkElements um 45 Grad

Im folgenden Beispiel wird eine RotateTransform Schaltfläche im Uhrzeigersinn um 45 Grad gedreht. Die Schaltfläche ist in einer StackPanel Schaltfläche enthalten, die zwei weitere Schaltflächen enthält.

Standardmäßig dreht sich RotateTransform um den Punkt (0, 0). Da im Beispiel kein Mittelwert angegeben wird, dreht sich die Schaltfläche um den Punkt (0, 0), der sich in der oberen linken Ecke befindet. RotateTransform wird auf die RenderTransform-Eigenschaft angewendet. Die folgende Abbildung zeigt das Ergebnis der Transformation.

Drehung im Uhrzeigersinn um 45 Grad von der oberen linken 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 ein RotateTransform verwendet, um eine Schaltfläche um 45 Grad im Uhrzeigersinn zu drehen, und es wird auch die RenderTransformOrigin der Schaltfläche auf (0,5, 0,5) festgelegt. Der Wert der RenderTransformOrigin Eigenschaft ist relativ zur Größe der Schaltfläche. Daher wird die Drehung auf die Mitte der Schaltfläche anstelle der oberen linken Ecke angewendet. Die folgende Abbildung zeigt das Ergebnis der Transformation.

Drehung im Uhrzeigersinn um 45 Grad um das Zentrum

<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 verwendet, um die Schaltfläche zu drehen. Dies bewirkt, dass sich die Transformation auf das Layout der Schaltfläche auswirkt, wodurch ein vollständiger Durchlauf durch das Layoutsystem ausgelöst wird. Daher wird die Schaltfläche gedreht und dann neu positioniert, da sich die Größe geändert hat. Die folgende Abbildung zeigt das Ergebnis der Transformation.

LayoutTransform wurde verwendet, um die Schaltfläche zu drehen

<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

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

Im folgenden Beispiel wird eine Storyboard und eine DoubleAnimation mit einem RotateTransform verwendet, um Button sich zu drehen, wenn darauf geklickt wird.

<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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 Beispiel für 2D-Transformationen. Weitere Informationen zu Animationen finden Sie in der Animationsübersicht.

Freezable-Features

Da sie von der Freezable Klasse erbt, stellt die Transform Klasse mehrere spezielle Features bereit: Transform Objekte können als Ressourcen deklariert werden, die von mehreren Objekten gemeinsam genutzt werden, schreibgeschützt gemacht werden, um die Leistung zu verbessern, geklont und threadsicher zu machen. Weitere Informationen zu den verschiedenen Features, die von Freezable Objekten bereitgestellt werden, finden Sie in der Übersicht über Freezable Objects.

Siehe auch

• Transform
• Matrix
• Hilfe & Anleitung
• Beispiel für 2D-Transformationen