Anvisningar: Ange ursprunget för en transformering med hjälp av relativa värden

Det här exemplet visar hur du använder relativa värden för att ange ursprunget för en RenderTransform som tillämpas på en FrameworkElement.

När du roterar, skalar eller skevar en FrameworkElement med hjälp av RenderTransform-egenskapen tillämpar standardinställningen transformeringen på elementets övre vänstra hörn. Om du vill rotera, skala eller skeva från mitten av elementet kan du justera genom att ställa in mittpunkten för transformationen till elementets mittpunkt. Den lösningen kräver dock att du vet storleken på elementet. Ett enklare sätt att tillämpa en transformering i mitten av ett element är att ange dess RenderTransformOrigin egenskap till (0,5, 0,5) i stället för att ange ett mittvärde för själva transformeringen.

Exempel

I följande exempel används en RotateTransform för att rotera Button 45 grader medsols. Eftersom exemplet inte anger någon mittpunkt roterar knappen om punkten (0, 0), som är dess övre vänstra hörn. RotateTransform tillämpas på egenskapen RenderTransform.

Följande bild visar transformeringsresultatet för exemplet som följer.

En rotation på 45 grader medurs genom att använda egenskapen 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>

I följande exempel används även en RotateTransform för att rotera en Button 45 grader medsols; men i det här exemplet sätts knappens RenderTransformOrigin till (0.5, 0.5). Därför tillämpas rotationen i mitten av knappen i stället för på det övre vänstra hörnet.

Följande bild visar transformeringsresultatet för exemplet som följer.

En 45-graders rotation med egenskapen RenderTransform med en RenderTransformOrigin på (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>

Mer information om hur du transformerar FrameworkElement objekt finns i Översikt över transformeringar.

Se även

• Transform
• Transformationsöversikt
• Ämnen om hur man gör