XAML DÖNÜŞÜM VE ANİMASYON

DÖNÜŞÜM VE ANİMASYON

Temel olarak beş adet dönüşüm işlemi vardır.
Ø Döndürme (Rotatetransform)
Ø Ölçeklendirme (Scaletransform)
Ø Dönüşüm (Translatetransform)
Ø Çarpıtma (Skewtransform)
Ø Matris (Matrixtransform)

1.     Döndürme (RotateTransform)
Uygulamalarda kullandığımız form kontrollerinin belirli açılarla döndürülmeleri için bu etiket kullanılmaktadır.

<Canvas> <Image Source="Penguins.jpg" Width="137" Height="146" Canvas.Left="120" Canvas.Top="60"> <Image.RenderTransform> <RotateTransform Angle="45" CenterX="50" CenterY="50"/> </Image.RenderTransform> </Image> </Canvas>

2. Ölçeklendirme (ScaleTransform)

Örnek:

<Canvas> <Button Content="Button" Height="23" Margin="79, 160, 0, 0" Name="button1" Width="75"> <Button.RenderTransform> <ScaleTransform ScaleX="3" ScaleY="2"></ScaleTransform> </Button.RenderTransform> </Button> <Button Content="Button" Height="23" Margin="91, 110, 0, 0" Name="button2" Width="75"/> </Canvas>

3. Dönüşüm (TranslateTransform)
Uygulamada kullanılan kontrolleri yatay ve dikey eksenlerinde istenilen birim kadar ötelemek için bu dönüşüm yöntemini kullanabiliriz.
Örnek:

<Canvas> <Ellipse Height="100" Margin="114, 90, 0, 0" Name="ellipse1" Stroke="Black" Width="200" Fill="#FF935E5E"> <Ellipse.RenderTransform> <TranslateTransform X="25" Y="5"></TranslateTransform> </ Ellipse.RenderTransform> </ Ellipse > </Canvas>

4. Çarpıtma (SkewTransform)
Uygulama tasarımında kullandığımız kontrolleri X ve Y eksenlerinde bükmek için kullanılan dönüşüm yöntemidir.
Örnek:

<Canvas> <Image Height="121" Margin="85,39, 0, 0" Name="image1" Stretch="Fill" Width="200" Source="Penguins.jpg" Canvas.Left="-50" Canvas.Top="-14"> <Image.RenderTransform> <SkewTransform AngleX="25" AngleY="30"/> </Image.RenderTransform> </Image > </Canvas>