Přehled transformací

Naučte se používat transformace v rozhraní API prostředí prostředí Windows Runtime změnou relativních souřadnicových systémů prvků v uživatelském rozhraní. Dá se použít k úpravě vzhledu jednotlivých prvků XAML, jako je škálování, otočení nebo transformace pozice v prostoru x-y.

Co je transformace?

Transformace definuje, jak mapovat nebo transformovat body z jednoho souřadnicového prostoru do jiného souřadnicového prostoru. Při použití transformace na prvek uživatelského rozhraní změní způsob vykreslení prvku uživatelského rozhraní na obrazovku jako součást uživatelského rozhraní.

Transformace si můžete představit ve čtyřech širokých klasifikacích: překlad, otočení, škálování a nerovnoměrnou distribuci (nebo shear). Pro účely použití grafických rozhraní API ke změně vzhledu prvků uživatelského rozhraní je obvykle nejjednodušší vytvořit transformace, které definují vždy pouze jednu operaci. Proto prostředí prostředí Windows Runtime definuje samostatnou třídu pro každou z těchto klasifikací transformace:

• TranslateTransform: přeloží prvek v prostoru x-y nastavením hodnot pro X a Y.
• ScaleTransform: Škáluje transformaci na základě středového bodu nastavením hodnot pro CenterX, CenterY, ScaleX a ScaleY.
• RotateTransform: rotuje v prostoru x-y nastavením hodnot pro Úhel, CenterX a CenterY.
• SkewTransform: naklonění nebo střih v x-y prostoru, nastavením hodnot pro AngleX, AngleY, CenterX a CenterY.

Z těchto možností pravděpodobně použijete Funkci TranslateTransform a ScaleTransform nejčastěji pro scénáře uživatelského rozhraní.

Transformace můžete kombinovat a existují dvě třídy prostředí prostředí Windows Runtime, které podporují toto: CompositeTransform a TransformGroup. V CompositeTransformse transformace použijí v tomto pořadí: měřítko, nerovnoměrná distribuce, otočení, překlad. Pokud chcete, aby se transformace použily v jiném pořadí, použijte transformační skupinu místo CompositeTransform . Další informace najdete v sekci CompositeTransform.

Transformace a rozložení

Transformace se při rozložení XAML použijí až po dokončení průchodu rozložení, takže výpočty dostupného prostoru a další rozhodnutí o rozložení jsou provedeny před uplatněním transformací. Protože je nejprve prováděno rozložení, někdy se zobrazí neočekávané výsledky, pokud transformujete prvky, které jsou v buňce mřížky nebo podobném kontejneru rozložení, které přidělují prostor při rozložení. Transformovaný prvek může být zkrácený nebo zakrytý, protože se pokouší vykreslit v oblasti, která nevypočítala dimenze po transformaci při dělení prostoru v nadřazeném kontejneru. Možná budete muset experimentovat s výsledky transformace a upravit některá nastavení. Místo toho, abyste se spoléhali na adaptivní rozložení a velikost hvězdiček, možná budete muset změnit vlastnosti Center nebo deklarovat pevné rozměry pixelů pro uspořádání prostoru, aby nadřazený prvek přidělil dostatek prostoru.

Poznámka k migraci: Windows Presentation Foundation (WPF (Windows Presentation Foundation)) měl vlastnost LayoutTransform, která aplikovala transformace před průchodem rozložení. prostředí Windows Runtime XAML ale nepodporuje vlastnost LayoutTransform . (Microsoft Silverlight tuto vlastnost neměl.)

Použití transformace na prvek uživatelského rozhraní

Když použijete transformaci na objekt, obvykle to děláte za účelem nastavení vlastnosti UIElement.RenderTransform. Nastavení této vlastnosti nezmění objekt pixel po pixelu. To, co vlastnost skutečně dělá, je použít transformaci v rámci místního souřadnicového prostoru, ve kterém tento objekt existuje. Potom vykreslovací logika a operace (po rozložení) vykresluje kombinované souřadnicové mezery, aby vypadalo, že objekt změnil vzhled a také potenciálně jeho pozici rozložení (pokud byl použit TranslateTransform ).

Ve výchozím nastavení se každá transformace vykreslení zacentruje na začátek místního souřadnicového systému cílového objektu – jeho (0,0). Jedinou výjimkou je TranslateTransform, který nemá žádné vlastnosti středu, protože efekt překladu je stejný bez ohledu na to, kde je umístěn. Ostatní transformace ale mají vlastnosti, kterými se nastavují hodnoty CenterX a CenterY.

Kdykoli použijete transformace s UIElement.RenderTransform, mějte na paměti, že existuje další vlastnost UIElement , která ovlivňuje chování transformace: RenderTransformOrigin. RenderTransformOrigin deklaruje, jestli se má celá transformace použít na výchozí bod prvku (0,0) nebo na jiný počáteční bod v relativním souřadnicovém prostoru daného prvku. U typických prvků (0,0) umístí transformaci do levého horního rohu. V závislosti na požadovaném efektu můžete místo úpravy hodnot CenterX a CenterY v transformacích zvolit změnu RenderTransformOrigin. Všimněte si, že pokud použijete hodnoty RenderTransformOrigin i CenterX / CenterY , můžou být výsledky docela matoucí, zejména pokud animujete některou z hodnot.

Pro účely hit-testování objekt, na který se použije transformace, nadále reaguje na vstup očekávaným způsobem, který je v souladu s jeho vizuálním vzhledem v prostoru x-y. Pokud jste například pomocí TranslateTransform přesunuli Obdélník 400 pixelů horizontálně v uživatelském rozhraní, bude Obdélník reagovat na PointerPressed události, když uživatel stiskne bod, kde se vizuálně zobrazí Obdélník. Nebudete dostávat falešné události, pokud uživatel stiskne oblast, kde Obdélník byl před přesunutím. Pro všechny aspekty indexu z, které ovlivňují testování hitů, použití transformace nijak nezmění; index z, který určuje, který prvek zpracovává vstupní události pro bod v prostoru x-y, se stále vyhodnocuje pomocí podřízeného pořadí, jak je deklarováno v kontejneru. Toto pořadí je obvykle stejné jako pořadí, ve kterém deklarujete prvky v XAML, i když pro podřízené prvky objektu Plátno můžete upravit pořadí použitím Canvas.ZIndex připojené vlastnosti podřízených elementů.

Další vlastnosti transformace

• Brush.Transform, Brush.RelativeTransform: Ovlivňují, jak štětec používá souřadnicový prostor v oblasti, ve které je použitý štětce pro nastavení vizuálních vlastností, jako jsou popředí a pozadí. Tyto transformace nejsou relevantní pro nejběžnější štětce (které obvykle nastavuje plné barvy pomocí SolidColorBrush), ale můžou být někdy užitečné při malování oblastí pomocí ImageBrush nebo LinearGradientBrush.
• Geometry.Transform: Tuto vlastnost můžete využít k aplikaci transformace na geometrii, než tuto geometrii použijete pro hodnotu vlastnosti Path.Data.

animace přetvoření

objekty typu Transform je možné animovat. Pokud chcete animovat transformaci, použijte animaci kompatibilního typu na vlastnost, kterou chcete animovat. Obvykle to znamená, že k definování animace používáte objekty DoubleAnimation nebo DoubleAnimationUsingKeyFrames, protože všechny vlastnosti transformace jsou typu Double. Animace, které ovlivňují transformaci použitou pro hodnotu UIElement.RenderTransform , nejsou považovány za závislé animace, i když mají nenulovou dobu trvání. Další informace o závislých animacích najdete v tématu animace s scénářem.

Pokud animujete vlastnosti tak, aby vznikl efekt podobný transformaci z hlediska celkového vizuálního vzhledu – například animováním Width a HeightFrameworkElement místo použití TranslateTransform– jsou tyto animace téměř vždy považovány jako na závislé animace. Měli byste povolit animace a při animaci by mohly být významné problémy s výkonem, zejména pokud se snažíte podporovat interakci uživatele při animovaném objektu. Z tohoto důvodu je vhodnější použít transformaci a animovat ji, a ne animovat žádnou jinou vlastnost, ve které by byla animace považována za závislá animace.

Chcete-li na transformaci cílit, musí existovat Transform jako hodnota pro RenderTransform. Obvykle vložíte prvek pro příslušný typ transformace do počátečního XAML, někdy bez vlastností nastavených pro tuto transformaci.

K použití animací u vlastností transformace se obvykle používá metoda nepřímého cílení. Další informace o syntaxi nepřímého cílení najdete v tématu animace se scénářem a syntax vlastnostní cesty.

Výchozí styly ovládacích prvků někdy definují animace transformací v rámci jejich chování ve vizuálním stavu. Například vizuální stavy pro ProgressRing používají animované RotateTransform hodnoty k "roztočení" teček v kroužku.

Tady je jednoduchý příklad animace transformace. V tomto případě animuje úhelOtočitTransform, aby otáčel obdélník na místě kolem jeho vizuálního středu. Tento příklad je pojmenován RotateTransform, takže nepotřebuje nepřímé cílení animace, ale můžete alternativně nechat transformaci nepojmenovanou, pojmenovat prvek, na který je transformace použita, a použít nepřímé cílení, jako je například (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();
}

Účetnictví pro souřadnicové referenční rámce za běhu programu

UIElement má metodu s názvem TransformToVisual, která může vygenerovat transformaci , která koreluje souřadnicové rámce odkazu pro dva prvky uživatelského rozhraní. Tuto možnost můžete použít k porovnání elementu s výchozím rámcem souřadnic aplikace, pokud předáte kořenový vizuál jako první parametr. To může být užitečné, pokud jste zachytili vstupní událost z jiného prvku, nebo pokud se pokoušíte předpovědět chování rozložení bez skutečného spuštění procesu rozložení.

Popis transformace matematicky

Transformace je možné popsat z hlediska transformační matice. Matice 3×3 slouží k popisu transformací v dvojrozměrné rovině x-y. Matice affinových transformací lze vynásobit, aby vytvořily libovolný počet lineárních transformačních matic, jako je otočení a smyk, následované překladem. Poslední sloupec matice transformace affinu je roven (0, 0, 1), takže v matematickém popisu musíte zadat pouze členy prvních dvou sloupců.

Matematický popis transformace může být užitečný, pokud máte matematické pozadí nebo znalost technik programování grafiky, které také používají matice k popisu transformací souřadnicového prostoru. Existuje Transform- odvozená třída, která umožňuje vyjádřit transformaci přímo z jeho matice 3×3: MatrixTransform. MatrixTransform má vlastnost matice , která obsahuje strukturu se šesti vlastnostmi: M11, M12, M21, M22, OffsetX a OffsetY. Každá vlastnost matice používá hodnotu Double a odpovídá šesti relevantním hodnotám (sloupcům 1 a 2) afinní transformační matice.

Jakákoli transformace, kterou byste mohli popsat pomocí TranslateTransform, ScaleTransform, RotateTransform nebo SkewTransform, by mohla být ekvivalentně popsána pomocí MatrixTransform s hodnotou Matrix. Ale obvykle používáte TranslateTransform a další, protože vlastnosti těchto transformačních tříd se lépe chápou než když nastavíte vektorové komponenty v matici. Je také jednodušší animovat diskrétní vlastnosti transformací; Matice je ve skutečnosti struktura, nikoli Objekt DependencyObject, takže nemůže podporovat animované jednotlivé hodnoty.

Některé nástroje pro návrh XAML, které umožňují použít transformační operace, serializují výsledky jako MatrixTransform. V tomto případě může být nejlepší použít stejný návrhový nástroj znovu ke změně transformačního efektu a XAML znovu serializovat, místo abyste se pokusili manipulovat s hodnotami matice sami přímo v XAML.

3D prostorové transformace

Ve Windows 10 zavedl XAML novou vlastnost UIElement.Transform3D, která se dá použít k vytvoření 3D efektů s uživatelským rozhraním. Uděláte to tak, že použijete PerspectiveTransform3D k přidání sdíleného 3D perspektivy nebo "kamery" do scény a pak pomocí CompositeTransform3D transformujete prvek v 3D prostoru, jako byste použili CompositeTransform. Informace o implementaci 3D transformací najdete v tématu UIElement.Transform3D .

Pro jednodušší 3D efekty, které se vztahují pouze na jeden objekt, lze použít UIElement.Projection vlastnost. Použití PlaneProjection jako hodnoty této vlastnosti je ekvivalentní použití pevné perspektivní transformace a jedné nebo více 3D transformací na prvek. Tento typ transformace je podrobněji popsán v 3D perspektivních efektech pro uživatelské rozhraní XAML.

související témata

• UIElement.Transform3D
• Efekty 3D perspektivy pro uživatelské rozhraní XAML
• transformovat