Omówienie przekształceń

Dowiedz się, jak używać przekształceń w interfejsie API środowiska uruchomieniowego systemu Windows, zmieniając względne systemy współrzędnych elementów w interfejsie użytkownika. Może to służyć do dostosowywania wyglądu poszczególnych elementów XAML, takich jak skalowanie, obracanie lub przekształcanie pozycji w przestrzeni x-y.

Co to jest transformacja?

Przekształcenie definiuje sposób mapowania lub przekształcania punktów z jednej przestrzeni współrzędnych do innej przestrzeni współrzędnych. Po zastosowaniu przekształcenia do elementu interfejsu użytkownika zmienia się sposób, w jaki ten element jest renderowany na ekranie.

Przekształcenia można podzielić na cztery szerokie kategorie: przesunięcie, rotację, skalowanie i przechylenie (lub ścięcie). Do celów używania interfejsów API graficznych do zmiany wyglądu elementów interfejsu użytkownika zwykle najłatwiej jest utworzyć przekształcenia definiujące tylko jedną operację naraz. Dlatego środowisko uruchomieniowe systemu Windows definiuje dyskretną klasę dla każdej z tych klasyfikacji przekształceń:

W przypadku scenariuszy interfejsu użytkownika prawdopodobnie używasz metod TranslateTransform i ScaleTransform .

Można łączyć przekształcenia i istnieją dwie klasy środowiska uruchomieniowego systemu Windows, które obsługują następujące funkcje: CompositeTransform i TransformGroup. W CompositeTransformprzekształcenia są stosowane w następującej kolejności: skalowanie, pochylenie, obrót, przesunięcie. Użyj TransformGroup zamiast CompositeTransform, jeśli chcesz, aby przekształcenia zostały zastosowane w innej kolejności. Aby uzyskać więcej informacji, zobacz CompositeTransform.

Przekształcenia i układ

W układzie w XAML przekształcenia są stosowane po zakończeniu przebiegu układu, więc dostępne obliczenia przestrzeni i inne decyzje dotyczące układu zostały podjęte przed zastosowaniem przekształceń. Ponieważ układ jest priorytetem, czasami możesz uzyskać nieoczekiwane wyniki, jeśli przekształcasz elementy znajdujące się w komórce Grid lub podobnym pojemniku układowym, przydzielającym miejsce podczas rozkładu. Przekształcony element może pojawić się obcięty lub zaciemniony, ponieważ próbuje narysować obszar, który nie oblicza wymiarów po przekształceniu podczas dzielenia przestrzeni w kontenerze nadrzędnym. Może być konieczne eksperymentowanie z wynikami przekształcania i dostosowanie niektórych ustawień. Na przykład zamiast polegać na adaptacyjnym układzie i określaniu rozmiaru gwiazdy może być konieczne zmianę właściwości Center lub zadeklarowanie stałych pomiarów pikseli dla przestrzeni układu, aby upewnić się, że nadrzędne przydziały wystarczająco dużo miejsca.

Uwaga dotycząca migracji: Windows Presentation Foundation (WPF) miało właściwość LayoutTransform, która stosowała przekształcenia przed etapem rozmieszczenia. Jednak język XAML środowiska uruchomieniowego systemu Windows nie obsługuje właściwości LayoutTransform . (Program Microsoft Silverlight również nie miał tej właściwości).

Wskazówka

Alternatywnie, zestaw narzędzi Windows Community Toolkit udostępnia LayoutTransformControl, który stosuje przekształcenia macierzy na dowolnym FrameworkElement aplikacji.

Zastosowanie transformacji do elementu interfejsu użytkownika

W przypadku zastosowania przekształcenia do obiektu zazwyczaj należy ustawić właściwość UIElement.RenderTransform. Ustawienie tej właściwości nie zmienia dosłownie obiektu na poziomie każdego piksela. Właściwość ta naprawdę służy do zastosowania przekształcenia w przestrzeni współrzędnych lokalnych, w której istnieje ten obiekt. Następnie logika renderowania i operacja (po układzie) renderują połączone przestrzenie współrzędnych, sprawiając, że obiekt wydaje się zmieniać wygląd, a także potencjalnie położenie układu (jeśli zastosowano TranslateTransform).

Domyślnie każda transformacja renderowania jest wyśrodkowana na początku lokalnego systemu współrzędnych obiektu docelowego — jego (0,0). Jedynym wyjątkiem jest TranslateTransform, który nie ma właściwości środkowych do ustawienia, ponieważ efekt tłumaczenia jest taki sam, niezależnie od tego, gdzie jest wyśrodkowany. Jednak każde z pozostałych przekształceń ma właściwości, które ustawiają wartości CenterX i CenterY.

Za każdym razem, gdy używasz przekształceń z UIElement.RenderTransform, pamiętaj, że jest inna właściwość w UIElement, która wpływa na to, jak przekształcenie działa: RenderTransformOrigin. Co RenderTransformOrigin deklaruje, to czy cała transformacja powinna być zastosowana do domyślnego punktu (0,0) elementu, czy też do innego punktu początkowego w układzie współrzędnych tego elementu. W przypadku typowych elementów (0,0) transformacja jest umieszczana w lewym górnym rogu. W zależności od tego, jaki efekt chciałbyś uzyskać, możesz zmienić RenderTransformOrigin zamiast dostosowywać wartości CenterX i CenterY na przekształceniach. Należy pamiętać, że jeśli zastosujesz zarówno wartości RenderTransformOrigin, jak i CenterX / CenterY, wyniki mogą być dość mylące, zwłaszcza jeśli animujesz którąkolwiek z tych wartości.

Na potrzeby testowania trafień obiekt, do którego zastosowano transformację, nadal reaguje na dane wejściowe w sposób oczekiwany i zgodny z jego wyglądem wizualnym w przestrzeni x-y. Jeśli na przykład użyto TranslateTransform w celu bocznego przeniesienia prostokąta o 400 pikseli w interfejsie użytkownika, prostokąt reaguje na zdarzenia PointerPressed, gdy użytkownik naciska punkt, w którym prostokąt pojawia się wizualnie. Nie otrzymasz fałszywych zdarzeń, jeśli użytkownik naciśnie obszar, w którym Prostokąt znajdował się przed przesunięciem. W przypadku wszelkich zagadnień dotyczących indeksu z, które mają wpływ na testowanie trafień, zastosowanie przekształcenia nie ma znaczenia; indeks z, który określa, który element obsługuje zdarzenia wejściowe dla punktu w przestrzeni x-y, jest nadal oceniany przy użyciu kolejności podrzędnej zadeklarowanej w kontenerze. Ta kolejność jest zazwyczaj taka sama jak kolejność deklarowania elementów w języku XAML, choć dla elementów podrzędnych obiektu Canvas można dostosować ich kolejność, stosując dołączoną właściwość Canvas.ZIndex .

Inne właściwości przekształcenia

  • Brush.Transform, Brush.RelativeTransform: mają wpływ na to, jak Brush używa przestrzeni współrzędnych w obszarze, w którym Brush jest stosowany do ustawiania właściwości wizualnych, takich jak tło i pierwszy plan. Te przekształcenia nie są odpowiednie dla najbardziej typowych pędzli (które zazwyczaj tworzą jednolite kolory za pomocą SolidColorBrush), ale mogą być czasami przydatne przy malowaniu powierzchni za pomocą ImageBrush lub LinearGradientBrush.
  • Geometry.Transform: możesz użyć tej właściwości, aby zastosować przekształcenie do geometrii przed użyciem tej geometrii dla wartości właściwości Path.Data.

animowanie przekształcenia

Obiekty przekształcone można animować. By animować Przekształcenie, zastosuj animację zgodnego typu do właściwości, którą chcesz animować. Zazwyczaj oznacza to, że używasz DoubleAnimation lub DoubleAnimationUsingKeyFrames, aby zdefiniować animację, ponieważ wszystkie właściwości transformacji są typu Double. Animacje wpływające na transformację używaną w UIElement.RenderTransform wartości nie są uważane za animacje zależne, nawet jeśli mają czas trwania niezerowy. Aby uzyskać więcej informacji na temat animacji zależnych, zobacz animacje storyboardowe.

Jeśli animujesz właściwości, aby uzyskać efekt podobny do przekształcenia graficznego, jeśli chodzi o ostateczny efekt wizualny — na przykład animując Width i Height elementu FrameworkElement zamiast stosowania TranslateTransform— takie animacje są prawie zawsze traktowane jako zależne animacje. Należy włączyć animacje i mogą wystąpić znaczące problemy z wydajnością animacji, zwłaszcza jeśli próbujesz obsługiwać interakcję użytkownika, gdy ten obiekt jest animowany. Z tego powodu lepiej jest użyć przekształcenia i animować go, a nie animować żadnej innej właściwości, w której animacja będzie traktowana jako animacja zależna.

Do zidentyfikowania przekształcenia konieczne jest, by Transform istniało jako wartość dla RenderTransform. Zazwyczaj umieszczasz element dla odpowiedniego typu przekształcenia w początkowym XAML, czasami bez ustawiania jakichkolwiek właściwości na tej transformacji.

Zazwyczaj używasz pośredniej techniki celowania, aby zastosować animacje do właściwości transformacji. Aby uzyskać więcej informacji na temat składni określania wartości pośrednich, zobacz animacje scenorysowe i składnia ścieżki właściwości .

Domyślne style kontrolek czasami definiują animacje przekształceń w ramach ich zachowania w stanie wizualizacji. Na przykład stany wizualne dla ProgressRing używają animowanych wartości RotateTransform do "obracania" kropek w pierścieniu.

Oto prosty przykład animowania transformacji. W tym przypadku animuje właściwość Angle obiektu RotateTransform, aby obracać Rectangle w miejscu wokół jego wizualnego środka. W tym przykładzie transformacja RotateTransform nie wymaga pośredniego określania wartości docelowej animacji, ale alternatywnie można pozostawić ją bez nazwy, nazwać element, do którego zastosowano transformację, i użyć kierowania pośredniego, takiego jak (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();
}

Uwzględnianie układów współrzędnych odniesienia w czasie wykonywania

UIElement ma metodę o nazwie TransformToVisual, która może wygenerować Transform, która koreluje współrzędne ramki odwołania dla dwóch elementów interfejsu użytkownika. Można użyć tej funkcji, aby porównać element do domyślnego układu współrzędnych aplikacji, jeśli przekażesz element główny jako pierwszy parametr. Może to być przydatne, jeśli przechwycono zdarzenie wejściowe z innego elementu lub jeśli próbujesz przewidzieć zachowanie układu bez faktycznego wywołania procesu układu.

Uwaga / Notatka

pl-PL: (UWP) Dane zdarzenia uzyskane ze zdarzeń wskaźnika zapewniają dostęp do metody GetCurrentPoint, gdzie można określić parametr relativeTo, aby zmienić układ współrzędnych na określony element zamiast domyślnego układu aplikacji. Takie podejście po prostu stosuje wewnętrzne przekształcenie translacji i automatycznie przekształca dane współrzędnych x-y za Ciebie podczas tworzenia zwróconego obiektu PointerPoint.

Opisywanie przekształcenia matematycznie

Przekształcenie można opisać pod względem macierzy transformacji. Macierz 3×3 służy do opisywania przekształceń w dwuwymiarowej płaszczyźnie x-y. Macierze przekształceń afinicznych można mnożyć, aby tworzyć dowolną liczbę przekształceń liniowych, takich jak obrót i siekanie, a następnie translację. Końcowa kolumna macierzy przekształcania affine jest równa (0, 0, 1), dlatego należy określić tylko elementy członkowskie pierwszych dwóch kolumn w opisie matematycznym.

Matematyczny opis przekształcenia może być przydatny, jeśli masz tło matematyczne lub znajomość technik programowania graficznego, które również używają macierzy do opisywania przekształceń przestrzeni współrzędnych. Istnieje klasa pochodna z Transform, która umożliwia bezpośrednie wyrażenie przekształcenia za pomocą macierzy 3×3: MatrixTransform. MatrixTransform ma właściwość macierzy , zawierającą strukturę z sześcioma właściwościami: M11, M12, M21, M22, OffsetX i OffsetY. Każda właściwość macierzy używa wartości typu Double i odpowiada sześciu istotnym wartościom (kolumny 1 i 2) macierzy przekształcenia afinicznego.

Kolumna 1 Kolumna 2 Kolumna 3
M11 M12 0
M21 M22 0
Przesunięcie X przesunięcie 1

Każda transformacja, którą można opisać za pomocą obiektu TranslateTransform, ScaleTransform, RotateTransformlub SkewTransform, może być równie dobrze opisana przez obiekt MatrixTransform z wartością macierzy . Zazwyczaj jednak po prostu używasz TranslateTransform i innych, ponieważ właściwości tych klas przekształceń są łatwiejsze do zrozumienia niż ustawianie składników wektorów w macierzy. Łatwiej jest również animować dyskretne właściwości przekształceń; Macierz jest strukturą, a nie DependencyObject, więc nie może obsługiwać poszczególnych wartości animowanych.

Niektóre narzędzia projektowe XAML, które umożliwiają stosowanie operacji przekształcania, serializują wyniki jako MatrixTransform. W takim przypadku najlepszym rozwiązaniem może być ponowne użycie tego samego narzędzia projektowego, aby zmienić efekt transformacji i ponownie serializować kod XAML, zamiast manipulować wartościami macierzy bezpośrednio w języku XAML.

przekształcenia 3D

W systemie Windows 10 język XAML wprowadził nową właściwość UIElement.Transform3D, która może służyć do tworzenia efektów 3D za pomocą interfejsu użytkownika. Aby to zrobić, użyj elementu PerspectiveTransform3D , aby dodać udostępnioną perspektywę 3D lub "kamerę" do sceny, a następnie użyć metody CompositeTransform3D , aby przekształcić element w przestrzeni 3D, tak jak w przypadku użycia metody CompositeTransform. Zobacz UIElement.Transform3D , aby zapoznać się z omówieniem sposobu implementowania przekształceń 3D.

W przypadku prostszych efektów 3D, które mają zastosowanie tylko do pojedynczego obiektu, można użyć właściwości UIElement.Projection . Użycie PlaneProjection, ponieważ wartość tej właściwości jest równoważna zastosowaniu przekształcenia z stałą perspektywą i co najmniej jednej transformacji 3D do elementu. Ten rodzaj transformacji został opisany bardziej szczegółowo w efekty perspektywy 3-D dla interfejsu użytkownika XAML.

  • Last updated on