Sdílet prostřednictvím

Postupy: Změna velikosti elementu

  • Článek

Tento příklad ukazuje, jak použít ScaleTransform ke škálování elementu.

ScaleX Pomocí a ScaleY vlastností změňte velikost prvku podle zadaného faktoru. ScaleX Například hodnota 1,5 roztáhne prvek na 150 procent původní šířky. Hodnota ScaleY 0,5 zmenší výšku prvku o 50 procent.

CenterX Pomocí vlastností CenterY určete bod, který je středem operace škálování. Ve výchozím nastavení ScaleTransform je středem v bodě (0,0), který odpovídá levému hornímu rohu obdélníku. To má vliv na přesunutí prvku a také jeho zvětšení, protože při použití objektu Transformzměníte souřadnicový prostor, ve kterém se objekt nachází.

Následující příklad používá ScaleTransform k dvojité velikosti 50-by-50 Rectangle. Má ScaleTransform hodnotu 0 (výchozí) pro obě CenterX a CenterY.

Příklad

<!-- Scales a rectangle by 200% from a center of (0,0).-->
<Rectangle Height="50" Width="50" Fill="#CCCCCCFF" 
  Stroke="Blue" StrokeThickness="2"
  Canvas.Left="100" Canvas.Top="100">
  <Rectangle.RenderTransform>
    <ScaleTransform CenterX="0" CenterY="0" ScaleX="2" ScaleY="2" />
  </Rectangle.RenderTransform>
</Rectangle>

Obvykle nastavíte CenterX a CenterY na střed objektu, který se škáluje: (Width/2, Height/2).

Následující příklad ukazuje další Rectangle , který se zdvojnásobí ve velikosti, ScaleTransform ale má hodnotu 25 pro obě CenterX a CenterY, která odpovídá středu obdélníku.

<!-- Scales a rectangle by 200% from a center of (25,25).-->
<Rectangle Height="50" Width="50" Fill="#CCCCCCFF"
  Canvas.Left="100" Canvas.Top="100" Stroke="Blue" StrokeThickness="2">
  <Rectangle.RenderTransform>
    <ScaleTransform CenterX="25" CenterY="25" ScaleX="2" ScaleY="2" />
  </Rectangle.RenderTransform>
</Rectangle>

Následující obrázek znázorňuje rozdíl mezi těmito dvěma ScaleTransform operacemi. Tečkovaná čára zobrazuje velikost a umístění obdélníku před měřítkem.

2x scales with different center points
Dvě operace ScaleTransform s identickými hodnotami ScaleX a ScaleY, ale různými centry

Kompletní ukázku najdete v části Ukázka 2D transformací.

Viz také