Dönüşümlere Genel Bakış

Bu konuda nesneleri döndürmek, ölçeklendirmek, taşımak (çevirmek) ve çarpıklık yapmak için 2D Transform sınıflarını kullanma FrameworkElement açıklanmıştır.

Dönüşüm Nedir?

, Transform bir koordinat boşluğundan başka bir koordinat alanıyla noktaları eşlemeyi veya dönüştürmeyi tanımlar. Bu eşleme, üç değer sütunu Matrix içeren üç satırdan bir koleksiyon olan dönüştürme ile Double açıklanmıştır.

Not

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

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

2D dönüştürme matrisi

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 işerek bir nesneyi döndürebilir, ölçeklendirebilir, çarpıtıp hareket ettirebilirsiniz (çevirebilirsiniz). Örneğin, üçüncü satırın ilk sütunundaki değeri (değer) 100 olarak değiştirirsiniz, x ekseninde bir nesneyi 100 birim taşımak için OffsetX kullanabilirsiniz. İkinci satırın ikinci sütunundaki değeri 3 olarak değiştirirsiniz, nesneyi geçerli yüksekliğini üç esndirmek için kullanabilirsiniz. Her iki değeri de değiştirirsiniz, nesneyi x ekseninde 100 birim hareket ettirin ve yüksekliği 3 kat esnetin. Bu Windows Presentation Foundation (WPF) yalnızca affine dönüşümlerini desteklediğinden, sağ sütundaki değerler her zaman 0, 0, 1 olur.

Bu Windows Presentation Foundation (WPF), matris değerlerini doğrudan işlemeye olanak sağlar, ancak temel alınan matris yapısının nasıl yapılandırıldığından emin olmadan nesneyi dönüştürmeye olanak sağlayan Transform çeşitli sınıflar da sağlar. Örneğin sınıfı, bir nesneyi dönüştürme matrisini düzenleme yerine ve ScaleTransform özelliklerini ScaleXScaleY ayarerek ölçeklendirmeye olanak sağlar. Benzer şekilde, RotateTransform sınıfı yalnızca özelliğini ayarerek bir nesneyi döndürmeye olanak Angle sağlar.

Dönüşüm Sınıfları

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

Sınıf Açıklama Örnek Illüstrasyon
RotateTransform Belirtilen öğesine göre bir öğeyi Angle döndürer. Nesne Döndürme Rotate illustration
ScaleTransform Bir öğeyi belirtilen ve miktarlarına ScaleX göre ScaleY ölçeklendirer. Öğe Ölçeklendirme Scale illustration
SkewTransform Bir öğeyi belirtilen ve miktarlarına göre AngleXAngleY yaslar. Bir Öğeyi Eğme Skew illustration
TranslateTransform Bir öğeyi belirtilen ve miktarlarına göre taşır XY (çevirir). Bir Öğeyi Çevirme Translate illustration

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

Sınıf Açıklama Örnek
TransformGroup Birden çok TransformGroup nesne, daha sonra Transform dönüştürme özelliklerine uygulayabilecek tek bir nesne halinde grup oluşturur. Nesneye Birden Çok Dönüşüm Uygulama
MatrixTransform Diğer sınıflar tarafından sağlanmaz özel dönüşümler Transform oluşturur. bir MatrixTransform kullanırken, matrisi doğrudan işlemeniz gerekir. Özel Dönüşümler Oluşturmak için MatrixTransform Kullanma

Windows Presentation Foundation (WPF), 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 türü Transform bildiren ve nesnenin dönüştürme özelliğine uygulamaktır. Farklı nesne türleri farklı türlerde dönüştürme özelliklerine sahiptir. Aşağıdaki tabloda, yaygın olarak kullanılan birkaç Windows Presentation Foundation (WPF) türü ve bunların dönüştürme özellikleri listelebildi.

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ükleri zaman yalnızca nesneyi dönüştürmez, o nesnenin var olduğu koordinat alanı da dönüştürebilirsiniz. Varsayılan olarak, dönüştürme hedef nesnenin koordinat sisteminin kaynağında ortalar: (0,0). Tek özel durum şudur: Çeviri etkisi, ortalı olduğu yerden bağımsız olarak aynı olduğundan ayar için TranslateTransformTranslateTransform merkezi bir özelliği yoktur.

Aşağıdaki örnek, bir öğe türünü varsayılan merkezi RotateTransformRectangleFrameworkElement (0, 0) hakkında 45 derece döndürmek için kullanır. Aşağıdaki çizimde döndürmenin etkisi gösterilmiştir.

A FrameworkElement rotated 45 degrees about (0,0)
Dikdörtgen öğe, nokta hakkında 45 derece döndürülmüş (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) hakkında döndürülür. , ve sınıfları, dönüştürmenin uygulandığı noktayı belirtmenize olanak sağlayan RotateTransformScaleTransformSkewTransform CenterX ve CenterY özellikleri sağlar.

Sonraki örnek, bir öğeyi 45 derece döndürmek için de kullanır; ancak, bu kez ve özellikleri RotateTransformRectangleCenterXCenterYRotateTransform ortası (25, 25) olacak şekilde ayarlanır. Aşağıdaki çizimde döndürmenin etkisi gösterilmiştir.

A Geometry rotated 45 degrees about (25, 25)
Dikdörtgen öğe, nokta hakkında 45 derece döndürülmüş (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>

FrameworkElement Dönüştürme

dönüştürmelerini bir 'a uygulamak için, bir oluşturun ve bunu FrameworkElementTransform sınıfın sağladığı iki özelliklerden biri için FrameworkElement geçerli olacak şekilde kullanın:

  • LayoutTransform – Düzen başarılı olmadan ö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. özelliğinin RenderTransform yerine özelliğini kullanarak LayoutTransform performans avantajları elde edin.

Hangi özelliği kullanlısınız? Sağladığı performans avantajları nedeniyle, özellikle animasyonlu RenderTransform nesneler kullanıyorken özelliğini mümkün olduğunca Transform kullanın. Ölçeklendirme, döndürme veya çekme özelliği kullanılırken öğesinin üst öğesinin öğenin dönüştürülmüş boyutuna ayarlanması LayoutTransform gerekir. özelliğiyle birlikte kullanıldıklarında nesnelerin LayoutTransform öğeler üzerinde hiçbir etkisi olmadığını TranslateTransform unutmayın. Bunun nedeni, düzen sisteminin çevrilmiş öğeyi işlemenin bir parçası olarak özgün konuma geri döndüren öğedir.

Windows Presentation Foundation (WPF) içinde düzen hakkında ek bilgi için bkz. Düzene genel bakış.

Örnek: FrameworkElement 45 Derece Döndürme

Aşağıdaki örnek, düğmeyi RotateTransform saat yönünde 45 derece döndürmek için kullanır. Düğme, başka iki düğmesi StackPanel olan bir içinde yer alan bir içindedir.

Varsayılan olarak, bir RotateTransform nokta (0, 0) hakkında döndürülür. Örnek bir orta değer belirtmez, düğme sol üst köşesi olan nokta (0, 0) hakkında döndürülür. RotateTransformözelliğine RenderTransform uygulanır. Aşağıdaki çizimde dönüştürmenin sonucu gösterilmiştir.

A button transformed using RenderTransform
Sol üst köşeden saat yönü 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, bir düğmeyi saat yönünde 45 derece döndürmek için de bir kullanır, ancak düğmenin de RotateTransformRenderTransformOrigin (0.5, 0.5) olarak ayarlar. özelliğinin RenderTransformOrigin değeri düğmenin boyutuna göredir. Sonuç olarak döndürme, sol üst köşesi yerine düğmenin merkezine uygulanır. Aşağıdaki çizimde dönüştürmenin sonucu gösterilmiştir.

A button transformed about its center
Merkezde 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 örnekte LayoutTransform düğmeyi döndürmek için özelliği RenderTransform yerine özelliği kullanılır. Bu, dönüştürmenin düğmenin düzenini etkilemesini sağlar ve bu da düzen sistemi tarafından tam geçişi tetikler. Sonuç olarak düğme döndürülür ve ardından boyutu değişerek yeniden konumlandırıldı. Aşağıdaki çizimde dönüştürmenin sonucu gösterilmiştir.

A button transformed using LayoutTransform
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 Hareketlendirme

AnimatableSınıfından devraldığı için Transform sınıflar canlandırılabilirler. Hareketlendirmek için Transform , hareketlendirmek istediğiniz özelliğe uyumlu bir tür animasyonu uygulayın.

Aşağıdaki örnek, tıklandığında bir StoryboardDoubleAnimationRotateTransform döndürme yapmak için bir ve ile bir kullanır Button .

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

Tüm örnek için bkz. 2B dönüşümler örneği. Animasyonlar hakkında daha fazla bilgi için bkz. animasyona genel bakış.

Freezable özellikleri

Sınıfından devraldığı Freezable için, Transform sınıfı birkaç özel özellik sağlar: Transform nesneler Freezableolarak, birden fazla nesne arasında paylaşılan, performansı artırmak için salt okuma, klonlanmış ve iş parçacığı açısından güvenli hale getirilebilir. Nesneler tarafından sunulan farklı özellikler hakkında daha fazla bilgi için Freezable bkz. Freezable.

Ayrıca bkz.