Overzicht van transformaties

In dit onderwerp wordt beschreven hoe u de 2D-klassen Transform gebruikt om objecten te draaien, schalen, verplaatsen (vertalen) en scheeftrekken FrameworkElement .

Wat is een transformatie?

Een Transform definieert hoe punten van de ene coördinaatruimte naar een andere coördinaatruimte toegewezen of getransformeerd worden. Deze toewijzing wordt beschreven door een transformatie Matrix, een verzameling van drie rijen met drie kolommen met Double waarden.

Opmerking

Windows Presentation Foundation (WPF) maakt gebruik van rijen-primaire matrices. Vectoren worden uitgedrukt als rijvectors, niet als kolomvectoren.

In de volgende tabel ziet u de structuur van een WPF-matrix.

Een 2D-transformatiematrix

X-axis	Y-as	Affinustransformatie
M11 Standaard: 1.0	M12 Standaard: 0.0	0,0
M21 Standaard: 0.0	M22 Standaard: 1.0	0,0
OffsetX Standaard: 0.0	OffsetY Standaard: 0.0	1.0

Door matrixwaarden te bewerken, kunt u een object draaien, schalen, scheeftrekken en verplaatsen (vertalen). Als u bijvoorbeeld de waarde in de eerste kolom van de derde rij (de OffsetX waarde) wijzigt in 100, kunt u deze gebruiken om een object 100 eenheden langs de x-as te verplaatsen. Als u de waarde in de tweede kolom van de tweede rij wijzigt in 3, kunt u deze gebruiken om een object uit te rekken tot drie keer de huidige hoogte. Als u beide waarden wijzigt, verplaatst u het object 100 eenheden langs de x-as en rekt u de hoogte uit met een factor 3. Omdat Windows Presentation Foundation (WPF) alleen affinetransformaties ondersteunt, zijn de waarden in de rechterkolom altijd 0, 0, 1.

Hoewel u met WPF (Windows Presentation Foundation) matrixwaarden rechtstreeks kunt bewerken, biedt het ook verschillende Transform klassen waarmee u een object kunt transformeren zonder te weten hoe de onderliggende matrixstructuur is geconfigureerd. Met de ScaleTransform klasse kunt u bijvoorbeeld een object schalen door de ScaleX eigenschappen en ScaleY eigenschappen ervan in te stellen in plaats van een transformatiematrix te bewerken. Op dezelfde manier kunt u met de RotateTransform klasse een object draaien door de eigenschap ervan in te stellen Angle .

Klassen transformeren

Windows Presentation Foundation (WPF) biedt de volgende 2D-klassen Transform voor algemene transformatiebewerkingen:

Klasse	Beschrijving	Voorbeeld	Illustratie
RotateTransform	Draai een element door de opgegeven Angle.	Een object draaien
ScaleTransform	Hiermee wordt een element geschaald op basis van de opgegeven ScaleX en ScaleY bedragen.	een element schalen
SkewTransform	Trekt een element scheef met de opgegeven AngleX- en AngleY-waarden.	Scheeftrekken van een element
TranslateTransform	Hiermee verplaatst (vertaalt) u een element op basis van de opgegeven X en Y bedragen.	Een element vertalen

Voor het maken van complexere transformaties biedt Windows Presentation Foundation (WPF) de volgende twee klassen:

Klasse	Beschrijving	Voorbeeld
TransformGroup	Hiermee worden meerdere TransformGroup objecten gegroepeerd tot één Transform object, dat u vervolgens kunt gebruiken om eigenschappen te transformeren.	meerdere transformaties toepassen op een object
MatrixTransform	Hiermee maakt u aangepaste transformaties die niet worden geleverd door de andere Transform klassen. Wanneer u een MatrixTransformmatrix gebruikt, bewerkt u een matrix rechtstreeks.	Een MatrixTransform gebruiken om aangepaste transformaties te maken

Windows Presentation Foundation (WPF) biedt ook 3D-transformaties. Zie de Transform3D klas voor meer informatie.

Algemene transformatie-eigenschappen

Een manier om een object te transformeren, is door het juiste Transform type te declareren en toe te passen op de transformatie-eigenschap van het object. Verschillende typen objecten hebben verschillende typen transformatie-eigenschappen. De volgende tabel bevat verschillende veelgebruikte WPF-typen (Windows Presentation Foundation) en de bijbehorende transformatie-eigenschappen.

Typologie	Transformatie-eigenschappen
Brush	Transform, RelativeTransform
ContainerVisual	Transform
DrawingGroup	Transform
FrameworkElement	RenderTransform, LayoutTransform
Geometry	Transform
TextEffect	Transform
UIElement	RenderTransform

Transformaties en coördinatensystemen

Wanneer u een object transformeert, transformeert u het object niet alleen, dan transformeert u de coördinaatruimte waarin dat object bestaat. Standaard wordt een transformatie gecentreerd op de oorsprong van het coördinaatsysteem van het doelobject: (0,0). De enige uitzondering is TranslateTransform; een TranslateTransform heeft geen middelste eigenschappen die moeten worden ingesteld omdat het vertaaleffect hetzelfde is, ongeacht waar het is gecentreerd.

In het volgende voorbeeld wordt een RotateTransformRectangle element, een type FrameworkElement, met 45 graden geroteerd rond zijn standaardcentrum, (0, 0). In de volgende afbeelding ziet u het effect van de draaiing.

Een rechthoekelement draaide 45 graden rond het punt (0,0)

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

Standaard draait het element over de linkerbovenhoek (0, 0). De RotateTransformeigenschappen , ScaleTransformen SkewTransform klassen bieden CenterX- en CenterY-eigenschappen waarmee u het punt kunt opgeven waarop de transformatie wordt toegepast.

In het volgende voorbeeld wordt ook een RotateTransform gebruikt om een Rectangle element met 45 graden te draaien; deze keer worden de CenterX en CenterY eigenschappen zo ingesteld dat het RotateTransform een midden van (25, 25) heeft. In de volgende afbeelding ziet u het effect van de draaiing.

Een rechthoekelement draaide 45 graden over het punt (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>

Een FrameworkElement transformeren

Als u transformaties wilt toepassen op een FrameworkElement, maakt u een Transform en past u deze toe op een van de twee eigenschappen die de FrameworkElement klasse biedt:

• LayoutTransform – Een transformatie die wordt toegepast voordat de indeling wordt doorgegeven. Nadat de transformatie is toegepast, verwerkt het indelingssysteem de getransformeerde grootte en positie van het element.

• RenderTransform – Een transformatie die het uiterlijk van het element wijzigt, maar wordt toegepast nadat de indelingspas is voltooid. Door de RenderTransform eigenschap te gebruiken in plaats van de LayoutTransform eigenschap, kunt u prestatievoordelen verkrijgen.

Welke eigenschap moet u gebruiken? Vanwege de prestatievoordelen die het biedt, kunt u de RenderTransform eigenschap waar mogelijk gebruiken, met name wanneer u geanimeerde Transform objecten gebruikt. Gebruik de LayoutTransform eigenschap bij het schalen, roteren of schuinen en u wilt dat het bovenliggende element zich aanpast aan de getransformeerde grootte van het element. Houd er rekening mee dat wanneer ze worden gebruikt met de LayoutTransform eigenschap, TranslateTransform objecten geen effect hebben op elementen. Dat komt doordat het indelingssysteem het vertaalde element retourneert naar de oorspronkelijke positie als onderdeel van de verwerking.

Zie indelingsoverzicht voor meer informatie over de indeling in Windows Presentation Foundation (WPF).

Voorbeeld: Een FrameworkElement 45 Graden draaien

In het volgende voorbeeld wordt een knop met behulp van RotateTransform 45 graden met de klok mee gedraaid. De knop bevindt zich in een StackPanel knop met twee andere knoppen.

Normaal gesproken draait een RotateTransform om het punt (0, 0). Omdat in het voorbeeld geen middelste waarde wordt opgegeven, draait de knop over het punt (0, 0), wat de linkerbovenhoek is. De RotateTransform wordt toegepast op de eigenschap RenderTransform. In de volgende afbeelding ziet u het resultaat van de transformatie.

Draai rechtsom 45 graden vanuit de linkerbovenhoek

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

In het volgende voorbeeld wordt een RotateTransform knop 45 graden rechtsom gedraaid en wordt de RenderTransformOrigin van de knop ingesteld op (0,5, 0,5). De waarde van de RenderTransformOrigin eigenschap is relatief ten opzichte van de grootte van de knop. Als gevolg hiervan wordt de draaiing toegepast op het midden van de knop in plaats van de linkerbovenhoek. In de volgende afbeelding ziet u het resultaat van de transformatie.

Rechtsom draaien 45 graden rond het middenpunt

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

In het volgende voorbeeld wordt de LayoutTransform eigenschap gebruikt in plaats van de RenderTransform eigenschap om de knop te draaien. Dit zorgt ervoor dat de transformatie invloed heeft op de indeling van de knop, die een volledige doorgang door het indelingssysteem activeert. Als gevolg hiervan wordt de knop gedraaid en vervolgens verplaatst omdat de grootte ervan is gewijzigd. In de volgende afbeelding ziet u het resultaat van de transformatie.

LayoutTransform gebruikt om de knop te draaien

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

Animaties voor transformaties

Omdat ze overnemen van de Animatable klasse, kunnen de Transform klassen worden geanimeerd. Om een Transform te animeren, past u een animatie van een compatibel type toe op de eigenschap die u wilt animeren.

In het volgende voorbeeld wordt een Storyboard, een DoubleAnimation en een RotateTransform gebruikt om een Button ter plaatse te laten draaien wanneer erop wordt geklikt.

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

Zie 2D Transforms Samplevoor het volledige voorbeeld. Zie het animatieoverzicht voor meer informatie over animaties.

Invriesbare functies

Omdat deze wordt overgenomen van de Freezable klasse, biedt de Transform klasse verschillende speciale functies: Transform objecten kunnen worden gedeclareerd als resources, gedeeld tussen meerdere objecten, alleen-lezen gemaakt om de prestaties te verbeteren, gekloond en thread-veilig gemaakt. Zie het Freezable voor meer informatie over de verschillende functies die worden geleverd door objecten.

Zie ook

• Transform
• Matrix
• Handleidingonderwerpen
• Voorbeeld van 2D-transformaties