Procedure: De oorsprong van een transformatie opgeven met behulp van relatieve waarden

In dit voorbeeld ziet u hoe u relatieve waarden gebruikt om de oorsprong op te geven van een RenderTransform die wordt toegepast op een FrameworkElement.

Wanneer u een FrameworkElement draait, schaalt of scheeftrekken met behulp van de eigenschap RenderTransform, past de standaardinstelling de transformatie toe op de linkerbovenhoek van het element. Als u wilt draaien, schalen of scheeftrekken vanuit het midden van het element, kunt u compenseren door het midden van de transformatie in te stellen op het midden van het element. Deze oplossing vereist echter dat u de grootte van het element kent. Een eenvoudigere manier om een transformatie toe te passen op het midden van een element, is door de eigenschap RenderTransformOrigin in te stellen op (0,5, 0,5), in plaats van een middelste waarde in te stellen op de transformatie zelf.

Voorbeeld

In het volgende voorbeeld wordt een RotateTransform gebruikt om een Button 45 graden met de klok mee te draaien. Omdat in het voorbeeld geen midden 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 transformatieresultaat voor het volgende voorbeeld.

Een draaiing van 45 graden met de klok mee met behulp van de eigenschap RenderTransform

<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 ook een RotateTransform gebruikt om een Button 45 graden rechtsom te draaien; In dit voorbeeld wordt echter de RenderTransformOrigin van de knop ingesteld op (0,5, 0,5). Als gevolg hiervan wordt de draaiing toegepast op het midden van de knop in plaats van op de linkerbovenhoek.

In de volgende afbeelding ziet u het transformatieresultaat voor het volgende voorbeeld.

Een draaiing van 45 graden met behulp van de eigenschap RenderTransform met een RenderTransformOrigin van (0,5, 0,5)

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

Zie het FrameworkElementvoor meer informatie over het transformeren van objecten.

Zie ook

• Transform
• Overzicht van transformaties
• Handleidingonderwerpen