Översikt över transformeringar

Det här avsnittet beskriver hur du använder 2D-Transform klasser för att rotera, skala, flytta (översätta) och snedställa FrameworkElement objekt.

Vad är en transformation?

En Transform definierar hur du mappar eller transformerar punkter från ett koordinatutrymme till ett annat koordinatutrymme. Den här mappningen beskrivs av en transformering Matrix, som är en samling med tre rader med tre kolumner med Double värden.

I följande tabell visas strukturen för en WPF-matris.

En 2D-transformeringsmatris

Genom att ändra matrisvärden kan du rotera, skala, skeva och flytta (översätta) ett objekt. Om du till exempel ändrar värdet i den första kolumnen på den tredje raden (värdet OffsetX) till 100 kan du använda det för att flytta ett objekt 100 enheter längs x-axeln. Om du ändrar värdet i den andra kolumnen på den andra raden till 3 kan du använda det för att sträcka ut ett objekt till tre gånger dess aktuella höjd. Om du ändrar båda värdena flyttar du objektet 100 enheter längs x-axeln och sträcker ut dess höjd med en faktor 3. Eftersom Windows Presentation Foundation (WPF) endast stöder affintransformeringar är värdena i den högra kolumnen alltid 0, 0, 1.

Även om Windows Presentation Foundation (WPF) gör det möjligt att direkt manipulera matrisvärden, innehåller det också flera Transform klasser som gör att du kan transformera ett objekt utan att veta hur den underliggande matrisstrukturen konfigureras. Med klassen ScaleTransform kan du till exempel skala ett objekt genom att ange dess egenskaper för ScaleX och ScaleY, i stället för att ändra en transformeringsmatris. På samma sätt kan du med klassen RotateTransform rotera ett objekt genom att bara ange dess egenskap Angle.

Omvandla klasser

Windows Presentation Foundation (WPF) tillhandahåller följande 2D-Transform klasser för vanliga omvandlingsåtgärder:

Klass	Beskrivning	Exempel	Illustration
RotateTransform	Roterar ett element med den angivna Angle.	Rotera ett objekt
ScaleTransform	Skalar ett element efter angivna ScaleX och ScaleY belopp.	Skala ett element
SkewTransform	Skevar ett element efter angivna AngleX och AngleY belopp.	Förvränga ett element
TranslateTransform	Flyttar (översätter) ett element med angivna X och Y belopp.	Översätta ett element

För att skapa mer komplexa transformeringar tillhandahåller Windows Presentation Foundation (WPF) följande två klasser:

Windows Presentation Foundation (WPF) tillhandahåller även 3D-transformeringar. Mer information finns i Transform3D klassen .

Vanliga transformeringsegenskaper

Ett sätt att transformera ett objekt är att deklarera lämplig Transform typ och tillämpa den på objektets transformeringsegenskap. Olika typer av objekt har olika typer av transformeringsegenskaper. I följande tabell visas flera vanliga WPF-typer (Windows Presentation Foundation) och deras transformeringsegenskaper.

Transformeringar och koordinatsystem

När du transformerar ett objekt transformerar du inte bara objektet, utan transformerar koordinatutrymmet där objektet finns. Som standard centreras en transformering efter ursprunget till målobjektets koordinatsystem: (0,0). Det enda undantaget är TranslateTransform; en TranslateTransform inte har några centeregenskaper att ange eftersom översättningseffekten är densamma oavsett var den är centrerad.

I följande exempel används en RotateTransform för att rotera ett Rectangle-element, en typ av FrameworkElement, med 45 grader om dess standardcenter, (0, 0). Följande bild visar rotationens effekt.

Ett rektangelelement roterade 45 grader runt punkten (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>

Som standard roterar elementet runt det övre vänstra hörnet, (0, 0). Klasserna RotateTransform, ScaleTransformoch SkewTransform innehåller CenterX- och CenterY-egenskaper som gör att du kan ange den punkt där transformering tillämpas.

I nästa exempel används också en RotateTransform för att rotera ett Rectangle element med 45 grader. Men den här gången anges egenskaperna CenterX och CenterY så att RotateTransform har en mittpunkt på (25, 25). Följande bild visar rotationens effekt.

Ett rektangelelement roterade 45 grader runt punkten (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>

Transformera ett FrameworkElement

Om du vill tillämpa transformeringar på en FrameworkElementskapar du en Transform och tillämpar den på en av de två egenskaper som FrameworkElement-klassen tillhandahåller:

• LayoutTransform – en transform som tillämpas innan layoutpasset. När transformeringen har tillämpats bearbetar layoutsystemet elementets transformerade storlek och position.

• RenderTransform – en transformering som ändrar utseendet på elementet men som tillämpas när layoutpasset har slutförts. Genom att använda egenskapen RenderTransform i stället för egenskapen LayoutTransform kan du få prestandafördelar.

Vilken egenskap ska du använda? På grund av de prestandafördelar som den ger använder du egenskapen RenderTransform när det är möjligt, särskilt när du använder animerade Transform objekt. Använd egenskapen LayoutTransform när du skalar, roterar eller skevar och du behöver elementets överordnade för att justera till elementets transformerade storlek. Observera att när de används med egenskapen LayoutTransform verkar TranslateTransform objekt inte ha någon effekt på elementen. Det beror på att layoutsystemet returnerar det översatta elementet till sin ursprungliga position som en del av bearbetningen.

Mer information om layout i Windows Presentation Foundation (WPF) finns i Layout översikt.

Exempel: Rotera ett FrameworkElement 45 grader

I följande exempel används en RotateTransform för att rotera en knapp medsols med 45 grader. Knappen finns i en StackPanel som har två andra knappar.

Som standard roterar en RotateTransform om punkten (0, 0). Eftersom exemplet inte anger ett mittvärde roterar knappen om punkten (0, 0), som är dess övre vänstra hörn. RotateTransform tillämpas på egenskapen RenderTransform. Följande bild visar resultatet av omvandlingen.

Medsols rotation 45 grader från övre vänstra hörnet

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

I nästa exempel används också en RotateTransform för att rotera en knapp 45 grader medsols, men den anger även knappens RenderTransformOrigin till (0,5, 0,5). Värdet för egenskapen RenderTransformOrigin är i förhållande till knappens storlek. Därför tillämpas rotationen i mitten av knappen i stället för det övre vänstra hörnet. Följande bild visar resultatet av omvandlingen.

Medsols rotation 45 grader runt centrum

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

I följande exempel används egenskapen LayoutTransform i stället för egenskapen RenderTransform för att rotera knappen. Detta gör att omvandlingen påverkar knappens layout, vilket utlöser en fullständig genomgång av layoutsystemet. Därför roteras knappen och flyttas sedan eftersom dess storlek har ändrats. Följande bild visar resultatet av omvandlingen.

LayoutTransform som används för att rotera knappen

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

Animera transformationer

Eftersom de ärver från klassen Animatable kan de Transform klasserna animeras. För att animera en Transform, använd en animation av en kompatibel typ på egenskapen du vill animera.

I följande exempel används en Storyboard och en DoubleAnimation med en RotateTransform för att få en Button att snurra på stället när den klickas på.

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

Det fullständiga exemplet finns i 2D Transforms Sample. Mer information om animeringar finns i Översikt över animeringar.

Funktionen för fryst läge

Eftersom den ärver från klassen Freezable tillhandahåller klassen Transform flera specialfunktioner: Transform-objekt kan deklareras som -resurser, delas mellan flera objekt, göras skrivskyddade för att förbättra prestanda, klonas och göras trådsäkra. Mer information om de olika funktioner som tillhandahålls av Freezable-objekt finns i översikten över frysbara objekt .

Se även

• Transform
• Matrix
• Ämnen om hur man gör
• 2D-transformationsexempel