Dönüşümlere Genel Bakış

Bu konuda, nesneleri döndürmek, ölçeklendirmek, taşımak (çevirmek) ve eğmek Transform için 2B FrameworkElement sınıfların nasıl kullanılacağı açıklanmaktadır.

Dönüşüm Nedir?

A Transform , bir koordinat alanından başka bir koordinat alanına noktaları eşlemeyi veya dönüştürmeyi tanımlar. Bu haritalama, Matrix değerlerinden oluşan üç sütunlu üç satırlık bir koleksiyon olan bir dönüştürme Double ile açıklanmıştır.

Uyarı

Windows Presentation Foundation (WPF), satır ana matrisleri kullanır. Vektörler sütun vektörleri olarak değil satır vektörleri olarak ifade edilir.

Aşağıdaki tabloda WPF matrisinin yapısı gösterilmektedir.

2B dönüştürme matrisi

X-ekseni Y ekseni Affine dönüşümü
M11

Varsayılan: 1.0		 M12

Varsayılan: 0.0		 0,0
M21

Varsayılan: 0.0		 M22

Varsayılan: 1.0		 0,0
OffsetX

Varsayılan: 0.0		 OffsetY

Varsayılan: 0.0		 1.0

Matris değerlerini değiştirerek nesneyi döndürebilir, ölçeklendirebilir, eğebilir ve taşıyabilir (çevirebilirsiniz). Örneğin, üçüncü satırın ilk sütunundaki değeri ( OffsetX değer) 100 olarak değiştirirseniz, nesneyi x ekseni boyunca 100 birim taşımak için kullanabilirsiniz. İkinci satırın ikinci sütunundaki değeri 3 olarak değiştirirseniz, nesneyi geçerli yüksekliğinin üç katına uzatmak için kullanabilirsiniz. Her iki değeri de değiştirirseniz, nesneyi x ekseni boyunca 100 birim taşır ve yüksekliğini 3 kat uzatırsınız. Windows Presentation Foundation (WPF) yalnızca benfin dönüşümlerini desteklediğinden, sağ sütundaki değerler her zaman 0, 0, 1'dir.

Windows Presentation Foundation (WPF) matris değerlerini doğrudan işlemenize olanak sağlasa da, temel matris yapısının nasıl yapılandırıldığını bilmeden bir nesneyi dönüştürmenizi sağlayan çeşitli Transform sınıflar da sağlar. Örneğin, ScaleTransform sınıfı, bir nesneyi, bir dönüştürme matrisini manipüle etmek yerine ScaleX ve ScaleY özelliklerini ayarlayarak ölçeklendirmenize olanak tanır. Benzer şekilde, RotateTransform sınıfı, Angle özelliğini ayarlayarak bir nesneyi döndürmenizi sağlar.

Sınıfları Dönüştür

Windows Presentation Foundation (WPF), yaygın dönüştürme işlemleri için aşağıdaki 2B Transform sınıfları sağlar:

Sınıf Açıklama Örnek İllüstrasyon
RotateTransform Bir öğeyi belirtilen Angledeğerine göre döndürür. Nesneyi Döndürme Çizim döndürme
ScaleTransform Bir öğeyi belirtilen ScaleX ve ScaleY tutarlara göre ölçeklendirir. Bir Öğeyi Ölçeklendir Ölçek çizimi
SkewTransform Belirtilen AngleX ve AngleY miktarlarına göre bir öğeyi eğirir. Öğe Eğme Eğme çizimi
TranslateTransform Bir öğeyi belirtilen X ve Y tutarlara göre taşır (çevirir). Öğe çevirisi Çizim Çevirisini Yap

Windows Presentation Foundation (WPF), daha karmaşık dönüştürmeler oluşturmak için aşağıdaki iki sınıfı sağlar:

Sınıf Açıklama Örnek
TransformGroup Birden çok TransformGroup nesneyi tek Transform bir nesne halinde gruplandırarak dönüştürme özelliklerine uygulayabilirsiniz. Bir Nesneye Birden Çok Dönüşüm Uygulama
MatrixTransform Diğer Transform sınıflar tarafından sağlanmayan özel dönüştürmeler oluşturur. Siz bir MatrixTransform kullandığınızda, bir matrisi doğrudan işlersiniz. Özel Dönüşümler Oluşturmak için Bir MatrixTransform Kullanın

Windows Presentation Foundation (WPF) ayrıca 3B dönüştürmeler de sağlar. Daha fazla bilgi için sınıfına Transform3D bakın.

Ortak Dönüştürme Özellikleri

Bir nesneyi dönüştürmenin bir yolu, uygun Transform türü bildirmek ve nesnenin dönüştürme özelliğine uygulamaktır. Farklı nesne türlerinin farklı dönüştürme özellikleri vardır. Aşağıdaki tabloda yaygın olarak kullanılan çeşitli Windows Presentation Foundation (WPF) türleri ve bunların dönüştürme özellikleri listelenmiştir.

Türü Dönüştürme özellikleri
Brush Transform, RelativeTransform
ContainerVisual Transform
DrawingGroup Transform
FrameworkElement RenderTransform, LayoutTransform
Geometry Transform
TextEffect Transform
UIElement RenderTransform

Dönüşümler ve Koordinat Sistemleri

Bir nesneyi dönüştürdüğünüzde, yalnızca nesneyi dönüştürmezsiniz, o nesnenin bulunduğu koordinat alanını da dönüştürürsunuz. Varsayılan olarak, bir dönüşüm hedef nesnenin koordinat sisteminin kaynağında ortalanır: (0,0). Tek istisna TranslateTransform; bir TranslateTransform için, çeviri efekti ortalandığı yerden bağımsız olarak aynı olduğundan merkezi ayarlanacak özellikler yoktur.

Aşağıdaki örnekte, RotateTransform kullanılarak varsayılan merkezi (0, 0) olan Rectangle türü bir FrameworkElement öğesi 45 derece döndürülür. Aşağıdaki çizimde döndürmenin etkisi gösterilmektedir.

FrameworkElement yaklaşık 45 derece döndürüldü (0,0)
Dikdörtgen öğesi nokta hakkında 45 derece döndürüldü (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>

Varsayılan olarak, öğe sol üst köşesi (0, 0) etrafında döner. , RotateTransformve ScaleTransform sınıfları, dönüşümün SkewTransformuygulandığı noktayı belirtmenizi sağlayan CenterX ve CenterY özelliklerini sağlar.

Sonraki örnek aynı zamanda bir RotateTransform kullanarak bir Rectangle öğesini 45 derece döndürür; ancak bu kez CenterX ve CenterY özellikleri RotateTransform unsurunun merkezi (25, 25) olacak şekilde ayarlanır. Aşağıdaki çizimde döndürmenin etkisi gösterilmektedir.

Geometri yaklaşık 45 derece döndürüldü (25, 25)
Dikdörtgen öğesi nokta hakkında 45 derece döndürüldü (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>

Bir FrameworkElement'in Dönüştürülmesi

bir öğesine dönüştürmeleri uygulamak için FrameworkElementbir Transform oluşturun ve sınıfın sağladığı iki özelliğin FrameworkElement birine uygulayın:

  • LayoutTransform – Düzen aşamasından önce uygulanan bir dönüşüm. Dönüştürme uygulandıktan sonra düzen sistemi, öğenin dönüştürülmüş boyutunu ve konumunu işler.

  • RenderTransform – Öğenin görünümünü değiştiren ancak düzen geçişi tamamlandıktan sonra uygulanan bir dönüşüm. RenderTransform özelliğini yerine LayoutTransform özelliğini kullanarak performans avantajları elde edebilirsiniz.

Hangi özelliği kullanmalısınız? Sağladığı performans avantajları nedeniyle, özellikle animasyonlu RenderTransform nesneler kullanırken Transform mümkün olduğunca özelliğini kullanın. LayoutTransform özelliğini, ölçeklendirme, döndürme veya eğriltme sırasında ve öğenin üst öğesinin öğenin dönüştürülen boyutuna uyum sağlaması gerektiğinde kullanın. LayoutTransform özelliğiyle birlikte kullanıldığında, öğeler üzerinde TranslateTransform nesnelerin hiçbir etkisi olmadığını unutmayın. Bunun nedeni, düzen sisteminin çevrilmiş öğeyi işlemenin bir parçası olarak özgün konumuna döndürmesidir.

Windows Presentation Foundation'daki (WPF) düzen hakkında ek bilgi için Düzen genel bakış bölümüne bakın.

Örnek: FrameworkElement'i 45 Derece Döndürme

Aşağıdaki örnekte, bir RotateTransform kullanılarak düğme saat yönünde 45 derece döndürülür. Düğme, iki düğme daha içeren bir StackPanel içinde yer alır.

Varsayılan olarak, bir RotateTransform nokta (0, 0) etrafında döner. Örnek bir orta değer belirtmediğinden, düğme sol üst köşesi olan nokta (0, 0) hakkında döner. RotateTransform RenderTransform özelliğine uygulanır. Aşağıdaki çizimde dönüşümün sonucu gösterilmektedir.

RenderTransform kullanılarak dönüştürülmüş bir düğme
Saat yönünde üst sol köşeden 45 derece döndürme

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

Sonraki örnekte, düğmeyi saat yönünde 45 derece döndürmek için de bir RotateTransform kullanılır, ancak düğmenin değerini de (0,5, 0,5) olarak ayarlar RenderTransformOrigin . özelliğinin RenderTransformOrigin değeri düğmenin boyutuna göre belirlenir. Sonuç olarak döndürme, düğmenin sol üst köşesi yerine ortasına uygulanır. Aşağıdaki çizimde dönüşümün sonucu gösterilmektedir.

Merkezine göre dönüştürülen bir düğme
Merkez etrafında saat yönünde 45 derece döndürme

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

Aşağıdaki örnek, düğmeyi döndürmek için LayoutTransform özelliğini RenderTransform özelliği yerine kullanır. Bu, dönüşümün düğmenin düzenini etkilemesine ve düzen sistemi tarafından tam bir işlem başlatılmasına neden olur. Sonuç olarak düğme döndürülür ve boyutu değiştiğinden yeniden konumlandırılır. Aşağıdaki çizimde dönüşümün sonucu gösterilmektedir.

LayoutTransform kullanılarak dönüştürülmüş bir düğme
Düğmeyi döndürmek için kullanılan LayoutTransform

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

Dönüşümleri Animasyona Ekleme

Sınıftan Animatable devraldıkları için sınıflar Transform animasyonlu olabilir. Animasyon Transform eklemek için, uyumlu türde bir animasyonu, animasyon eklemek istediğiniz özelliğe uygulayın.

Aşağıdaki örnekte, tıklandığında bir Storyboard'ün yerinde dönmesini sağlamak için bir DoubleAnimation ve RotateTransform, Button ile birlikte kullanılır.

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

Örneğin tamamı için bkz. 2D Dönüşümler Örneği. Animasyonlar hakkında daha fazla bilgi için bkz. Animasyona Genel Bakış.

Dondurulabilir Özellikler

sınıfından Freezable devraldığından, Transform sınıfı birkaç özel özellik sağlar: Transform nesneler kaynak olarak bildirilebilir, birden çok nesne arasında paylaşılabilir, performansı geliştirmek için salt okunur hale getirilebilir, kopyalanabilir ve iş parçacığı güvenli hale getirilebilir. Farklı özellikler hakkında daha fazla bilgi almak için Freezable nesnelerinin sağladığı, Freezable Nesne Genel Bakışı'ı inceleyebilirsiniz.

Ayrıca bakınız

  • Last updated on