Átalakítások áttekintése

Megtudhatja, hogyan használhat átalakításokat a Windows-futtatókörnyezet API-ban az elemek relatív koordináta-rendszerének módosításával a felhasználói felületen. Ezzel módosíthatja az egyes XAML-elemek megjelenését, például a méretezést, a forgatást vagy az x-y tér pozíciójának átalakítását.

Mi az átalakítás?

A átalakító meghatározza, hogyan képezheti le vagy alakíthatja át a pontokat egy koordinátatérből egy másik koordinátatérbe. Amikor egy átalakítást alkalmaz egy felhasználói felületi elemre, az megváltoztatja, hogy a felhasználói felület részeként hogyan jelenik meg az adott felhasználói felületi elem a képernyőn.

Gondoljon az átalakításokra négy átfogó besorolásban: fordítás, forgatás, skálázás és ferdeség (vagy nyírás). Ha grafikus API-kat használ a felhasználói felület elemeinek megjelenésének módosítására, általában a legegyszerűbb olyan átalakításokat létrehozni, amelyek egyszerre csak egy műveletet határoznak meg. A Windows futtatókörnyezet tehát külön osztályt határoz meg az átalakítás egyes besorolásaihoz:

• TranslateTransform: elmozdít egy elemet az x-y térben azáltal, hogy beállítja az értékeket a X és a Y.
• ScaleTransform: középpont alapján skálázza az átalakítást CenterX, CenterY, ScaleX és ScaleYértékeinek beállításával.
• Forgatási transzformáció: x-y térben forog azáltal, hogy beállítja a Szög, a CenterX és a CenterYértékeit.
• SkewTransform: x-y síkban ferdít vagy nyír, amely a AngleX, AngleY, CenterX és CenterYértékeinek beállításával történik.

Valószínűleg ezek közül a leggyakrabban a TranslateTransform és a ScaleTransform átalakításokat használod a felhasználói felületi forgatókönyvekben.

Egyesítheti az átalakításokat, és két Windows futtatókörnyezeti osztály támogatja ezt: CompositeTransform és TransformGroup. Egy CompositeTransformesetében az átalakításokat ebben a sorrendben alkalmazzuk: skálázás, torzítás, elforgatás, fordítás. A CompositeTransform helyett TransformGroup használjon, ha az átalakításokat más sorrendben szeretné alkalmazni. További információ: CompositeTransform.

Átalakítások és elrendezés

Az XAML-elrendezésben az átalakítások az elrendezési passz befejezése után lesznek alkalmazva, így a rendelkezésre álló térszámítások és egyéb elrendezési döntések az átalakítások alkalmazása előtt történtek. Mivel az elrendezés az első, néha váratlan eredményekhez juthat, ha olyan elemeket alakít át, amelyek egy Grid- cellában vagy hasonló elrendezési tárolóban találhatók, és helyet foglalnak az elrendezés során. Az átalakított elem csonkoltnak vagy elhomályosítottnak tűnhet, mert olyan területre próbál rajzolni, amely nem számította ki az átalakítás utáni dimenziókat a szülőtárolón belüli térelválasztókor. Előfordulhat, hogy kísérleteznie kell az átalakítás eredményeivel, és módosítania kell néhány beállítást. Például ahelyett, hogy adaptív elrendezésre és csillagméretezésre támaszkodik, előfordulhat, hogy módosítania kell a Központ tulajdonságait, vagy rögzített képpontméreteket kell deklarálnia az elrendezési területhez, hogy a szülő elegendő helyet biztosítson.

Migrálási megjegyzés: A Windows megjelenítési alaprendszer (WPF) LayoutTransform tulajdonsága átalakításokat alkalmazott az elrendezési folyamat előtt. A Windows-futtatókörnyezet XAML azonban nem támogatja a LayoutTransform tulajdonságot. (A Microsoft Silverlightnak sem volt ez a tulajdonsága.)

Átalakítás alkalmazása felhasználói felületi elemre

Amikor átalakítást alkalmaz egy objektumra, általában ezt az UIElement.RenderTransformtulajdonság beállításához teszi. A tulajdonság beállítása nem módosítja szó szerint az objektum képpontonkénti értékét. A tulajdonság valójában az átalakítást alkalmazza azon a helyi koordinátatéren belül, amelyben az objektum létezik. Ezután a renderelési logika és művelet (az elrendezés utáni) megjeleníti az egyesített koordinátateret, így úgy tűnik, mintha az objektum megváltozott volna, és az elrendezési pozíciója is megváltozott (ha TranslateTransform alkalmazták).

Alapértelmezés szerint minden renderelt átalakítás a célobjektum helyi koordináta-rendszerének – annak (0,0) forrásánál van középpontban. Az egyetlen kivétel egy TranslateTransform, amelynek nincs beállítva középtulajdonsága, mert a fordítási effektus a középponttól függetlenül ugyanaz. A többi átalakítás azonban olyan tulajdonságokkal rendelkezik, amelyek CenterX és CenterY értékeket állítottak be.

Amikor UIElement.RenderTransformhasznál átalakításokat, ne feledje, hogy UIElement egy másik tulajdonsága is van, amely befolyásolja az átalakítás viselkedését: RenderTransformOrigin. Amit RenderTransformOrigin deklarál, az az, hogy a teljes átalakításnak egy elem alapértelmezett (0,0) pontjára vagy az elem relatív koordinátaterén belüli más forráspontra kell-e vonatkoznia. A tipikus elemek esetében (0,0) az átalakítást a bal felső sarokba helyezi. Amennyiben a kívánt hatást szeretné elérni, választhatja a RenderTransformOrigin módosítását a CenterX és CenterY értékek módosítása helyett. Vegye figyelembe, hogy ha RenderTransformOrigin és CenterX / CenterY értékeket is alkalmaz, az eredmények elég zavarosak lehetnek, különösen akkor, ha bármelyik értéket animáljuk.

Találattesztelés céljából az átalakítást végző objektumok továbbra is a várt módon válaszolnak a bemenetre, amely megfelel az x-y térben megjelenő vizuális megjelenésnek. Például, ha egy TranslateTransform használatával egy téglalapot 400 képponttal oldalirányban mozgat a felhasználói felületen, akkor a téglalap reagál a PointerPressed eseményekre, amikor a felhasználó megérinti azt a pontot, ahol a téglalap vizuálisan megjelenik. Nem fog hamis eseményeket kapni, ha a felhasználó lenyomja azt a területet, ahol a Téglalap a fordítás előtt volt. Az érintési tesztelést befolyásoló z-indexek hatása esetén az átalakítás alkalmazása nem számít; az x-y tér egy pontjához tartozó bemeneti eseményeket kezelő z-index továbbra is a tárolóban deklarált gyermekek sorrendje alapján lesz kiértékelve. Ez a sorrend általában megegyezik azzal a sorrenddel, amelyben az XAML-ben deklarálja az elemeket, bár egy Vászon objektum gyermekelemeinél módosíthatja a sorrendet a Canvas.ZIndex csatolt tulajdonság gyermekelemekre való alkalmazásával.

Egyéb átalakítás tulajdonságai

• Brush.Transform, Brush.RelativeTransform: Ezek befolyásolják, hogy egy Ecset hogyan használjon koordináta-helyet azon a területen belül, ahol a Ecset a vizualizációs tulajdonságok, például az előtér és a háttér beállításához van alkalmazva. Ezek a transzformációk nem relevánsak a leggyakoribb ecsetek esetében, amelyek általában tömör színekkel (SolidColorBrush) festenek, de néha hasznosak lehetnek területek festéséhez ImageBrush vagy LinearGradientBrushhasználatakor.
• Geometry.Transform: Ezzel a tulajdonságtal átalakítást alkalmazhat egy geometriára, mielőtt ezt a geometriát használná egy Path.Data tulajdonságértékhez.

transzformáció animálása

objektumok animálhatók. Az Átalakításanimálásához alkalmazzon egy kompatibilis típusú animációt az animálni kívánt tulajdonságra. Ez általában azt jelenti, hogy DoubleAnimation vagy DoubleAnimationUsingKeyFrames objektumokat használ az animáció definiálásához, mivel az átalakítás összes tulajdonsága Duplatípusú. A UIElement.RenderTransform értékhez használt transformációt befolyásoló animációk nem minősülnek függő animációknak, még akkor sem, ha nem nulla időtartamuk van. A függő animációkról további információ a következő helyen található: Storyboarded animációk.

Ha olyan tulajdonságokat animál, amelyek a nettó vizualizáció megjelenése szempontjából az átalakításhoz hasonló effektust eredményeznek – például a FrameworkElement Szélességi és Magasság animálása TranslateTransformalkalmazása helyett – az ilyen animációkat szinte mindig függő animációkként kezelik. Engedélyeznie kell az animációkat, és jelentős teljesítményproblémák merülhetnek fel az animációval kapcsolatban, különösen akkor, ha a felhasználó beavatkozását szeretné támogatni az objektum animálása közben. Ezért célszerűbb transzformációt használni és azt animálni, mint bármely más tulajdonságot, ahol az animáció függő animációként lenne kezelve.

Az átalakítás megcélzásához egy meglévő Transform-nak kell léteznie RenderTransformértékeként. A kezdeti XAML-ben általában a megfelelő átalakítási típus egyik elemét helyezi el, olykor nincs megadva tulajdonság az átalakításon.

Általában indirekt célzási technikával alkalmazhat animációkat az átalakítás tulajdonságaira. További információ a közvetett célzási szintaxisról: Sztoriszál-animációk és Tulajdonság-útvonal szintaxis.

A vezérlők alapértelmezett stílusai néha vizuális állapotuk részeként határozzák meg az átalakítások animációit. Az ProgressRing vizuális állapotai például animált RotateTransform értékeket használnak a gyűrűben lévő pontok "pörgetésére".

Íme egy egyszerű példa az átalakítás animálására. Ebben az esetben egy Szög animálásával egy RotateTransform segítségével egy Téglalap a vizuális középpontja körül forog. Ez a példa a RotateTransform nevet adja, így nincs szükség közvetett animációs célzásra. Alternatív megoldásként meg is hagyhatja névtelenül az átalakítást, elnevezheti az elemet, amelyre az átalakítás alkalmazva van, és közvetett célzást használhat, például a (UIElement.RenderTransform).(RotateTransform.Angle).

<StackPanel Margin="15">
  <StackPanel.Resources>
    <Storyboard x:Name="myStoryboard">
      <DoubleAnimation
       Storyboard.TargetName="myTransform"
       Storyboard.TargetProperty="Angle"
       From="0" To="360" Duration="0:0:5" 
       RepeatBehavior="Forever" />
    </Storyboard>
  </StackPanel.Resources>
  <Rectangle Width="50" Height="50" Fill="RoyalBlue"
   PointerPressed="StartAnimation">
    <Rectangle.RenderTransform>
      <RotateTransform x:Name="myTransform" Angle="45" CenterX="25" CenterY="25" />
    </Rectangle.RenderTransform>
  </Rectangle>
</StackPanel>

void StartAnimation (object sender, RoutedEventArgs e) {
    myStoryboard.Begin();
}

Koordináta-referenciakeretek nyilvántartása futásidőben

UIElementTransformToVisualnevű metódussal rendelkezik, amely létrehozhat egy Átalakítás, amely két felhasználói felületi elem referenciakereteit korrelálja. Ezzel összehasonlíthat egy elemet az alkalmazás alapértelmezett koordináta-referenciakeretével, ha első paraméterként a gyökérvizualizációt adja át. Ez akkor lehet hasznos, ha egy másik elemből rögzített egy bemeneti eseményt, vagy ha az elrendezés viselkedését szeretné előrejelezni anélkül, hogy ténylegesen elrendezési passt kér.

Átalakítás matematikai leírása

Az átalakítás egy átalakítási mátrixban írható le. A 3×3 mátrix egy kétdimenziós, x-y síkban lévő átalakítások leírására szolgál. Az affin transzformációs mátrixok tetszőleges számú lineáris transzformációhoz szorozhatók, például forgás és ferdeség (nyírás), amelyet a fordítás követ. Az affine transzformációs mátrix utolsó oszlopa egyenlő (0, 0, 1), ezért csak az első két oszlop tagjait kell megadnia a matematikai leírásban.

Az átalakítás matematikai leírása akkor lehet hasznos, ha matematikai háttérrel rendelkezik, vagy ismeri a grafikus programozási technikákat, amelyek mátrixokat is használnak a koordinátatér átalakításainak leírásához. Van egy Átalakítás-származtatott osztály, amely lehetővé teszi az átalakítás közvetlen kifejezését a 3×3 mátrixban: MatrixTransform. MatrixTransform egy Mátrix tulajdonsággal rendelkezik, amely hat tulajdonsággal rendelkezik: M11, M12, M21, M22, OffsetX és OffsetY. Minden Mátrix tulajdonság egy Dupla értéket használ, és megfelel az affin transzformációs mátrix hat releváns értékének (1. és 2. oszlop).

Az TranslateTransform, ScaleTransform, RotateTransformvagy SkewTransform objektumok mindegyike egyaránt leírható egy MatrixTransform objektummal, amelynek értéke egy Mátrix. De általában csak TranslateTransform és a többit használja, mert az ilyen átalakító osztályok tulajdonságai könnyebben koncepcializálhatóak, mint a vektorösszetevők beállítása egy Mátrix. Egyszerűbb az átalakítások különálló tulajdonságainak animálása is; A Mátrix valójában egy struktúra, és nem egy DependencyObject, így nem támogatja az animált egyéni értékeket.

Néhány XAML-tervezőeszköz, amely lehetővé teszi az átalakítási műveletek alkalmazását, az eredményeket MatrixTransformformátumban szerializálja. Ebben az esetben a legjobb, ha ugyanazt a tervezőeszközt használja ismét az átalakítási effektus módosításához és az XAML újra szerializálásához, ahelyett, hogy közvetlenül az XAML-ben próbálná manipulálni a Mátrix értékeit.

3D átalakítások

A Windows 10-ben az XAML bevezetett egy új tulajdonságot, UIElement.Transform3D, amely 3D-effektusok felhasználói felülettel való létrehozásához használható. Ehhez használja PerspectiveTransform3D, hogy megossz egy 3D perspektívát vagy "kamerát" a jelenettel, majd használja a CompositeTransform3D, hogy átalakíts egy elemet a 3D térben, mint ahogy a CompositeTransform-t használna. A 3D-átalakítások implementálásáról a UIElement.Transform3D olvashat.

A csak egyetlen objektumra vonatkozó egyszerűbb 3D effektusok esetén a UIElement.Projection tulajdonság használható. A PlaneProjection használata a tulajdonság értékeként megegyezik egy rögzített perspektíva-átalakítás alkalmazásával, és egy vagy több 3D átalakítással az elemre. Ezt az átalakítástípust részletesebben XAML felhasználói felület3D perspektíva effektusaiban ismertetjük.

kapcsolódó témakörök

• UIElement.Transform3D
• XAML felhasználói felülethez tartozó 3D-s perspektívahatások
• Átalakítás