Udostępnij przez

Używanie warstwy wizualnej w aplikacjach komputerowych

Teraz możesz używać interfejsów API środowiska uruchomieniowego systemu Windows w aplikacjach desktopowych innych niż UWP, aby zwiększyć wygląd, wrażenia i funkcjonalność aplikacji WPF, Windows Forms i C++ Win32 oraz korzystać z najnowszych funkcji interfejsu użytkownika systemu Windows dostępnych tylko za pośrednictwem platformy UWP.

W wielu scenariuszach można użyć wysp XAML, aby dodać nowoczesne elementy sterujące XAML do aplikacji. Jeśli jednak musisz utworzyć doświadczenia niestandardowe wykraczające poza kontrolki wbudowane, możesz uzyskać dostęp do API warstwy wizualnej.

Warstwa wizualna zapewnia interfejs API w trybie zachowywanym o wysokiej wydajności na potrzeby grafiki, efektów i animacji. Jest to podstawa interfejsu użytkownika na urządzeniach z systemem Windows. Kontrolki XAML platformy UWP są oparte na warstwie wizualnej i umożliwiają korzystanie z wielu aspektów systemu Fluent Design System, takich jak Światło, Głębokość, Ruch, Materiał i Skala.

Krótkie wideo przedstawiające interfejs użytkownika utworzony za pomocą warstwy wizualnej.

Interfejs użytkownika utworzony za pomocą warstwy wizualnej

Tworzenie wizualnego interfejsu użytkownika w dowolnej aplikacji systemu Windows

Warstwa wizualizacji umożliwia tworzenie atrakcyjnych środowisk przy użyciu lekkiego komponowania niestandardowej zawartości rysowanej (wizualizacji) oraz stosowania zaawansowanych animacji, efektów i manipulacji na tych obiektach w aplikacji. Warstwa wizualna nie zastępuje żadnej istniejącej struktury interfejsu użytkownika; Zamiast tego jest to cenny dodatek do tych struktur.

Możesz użyć warstwy wizualnej, aby zapewnić aplikacji unikatowy wygląd i działanie oraz ustanowić tożsamość, która odróżnia ją od innych aplikacji. Umożliwia również korzystanie z zasad Fluent Design, które zostały zaprojektowane tak, aby ułatwić korzystanie z aplikacji i czerpać większe zaangażowanie użytkowników. Można na przykład użyć go do tworzenia podpowiedzi wizualnych i animowanych przejść ekranu, które pokazują relacje między elementami na ekranie.

Funkcje warstwy wizualnej

Pędzle

Pędzle kompozycji umożliwiają malowanie obiektów interfejsu użytkownika za pomocą stałych kolorów, gradientów, obrazów, filmów, złożonych efektów i nie tylko.

Jajko utworzone przy użyciu Material Creator

Jajko utworzone za pomocą aplikacji demonstracyjnej Material Creator.

Efekty

Efekty kompozycji obejmują światło, cień i listę efektów filtru. Mogą być animowane, dostosowane i połączone, a następnie stosowane bezpośrednio do elementów wizualnych. Efekt oświetlenia sceny można połączyć z oświetleniem kompozycyjnym, aby stworzyć atmosferę, głębię i właściwości materiałowe.

Światła i materiał

Światła i materiały przedstawione w galerii przykładowej kompozycji interfejsu użytkownika systemu Windows .

Animacje

animacje kompozycji uruchamiane bezpośrednio w procesie kompozytora, niezależnie od wątku interfejsu użytkownika. Zapewnia to gładkość i skalę, dzięki czemu można uruchamiać dużą liczbę współbieżnych, jawnych animacji. Oprócz znanych animacji ramki kluczy w celu wprowadzania zmian właściwości w czasie można użyć wyrażeń do skonfigurowania relacji matematycznych między różnymi właściwościami, w tym danymi wejściowymi użytkownika. Animacje oparte na danych wejściowych umożliwiają tworzenie interfejsu użytkownika, który dynamicznie i płynnie reaguje na dane wejściowe użytkownika, co może spowodować większe zaangażowanie użytkowników.

Krótkie wideo innego interfejsu użytkownika utworzonego za pomocą warstwy wizualnej.

Motion pokazano w przykładowej galerii kompozycji interfejsu użytkownika systemu Windows .

Zachowaj istniejącą bazę kodu i wdrażaj przyrostowo

Kod w istniejących aplikacjach reprezentuje znaczną inwestycję, której nie chcesz utracić. Możesz migrować wyspy zawartości , aby korzystać z warstwy wizualnej, jednocześnie zachowując pozostałą część interfejsu użytkownika w jego obecnej strukturze. Oznacza to, że można wprowadzać znaczące aktualizacje i ulepszenia interfejsu użytkownika aplikacji bez konieczności wprowadzania rozbudowanych zmian w istniejącej bazie kodu.

Przykłady i samouczki

Dowiedz się, jak używać warstwy wizualnej w aplikacjach, eksperymentując z naszymi przykładami. Te przykłady i samouczki ułatwiają rozpoczęcie korzystania z warstwy wizualnej i pokazanie, jak działają funkcje.

Win32

Formularze systemu Windows

WPF (Windows Presentation Foundation)

Ograniczenia

Chociaż wiele funkcji warstwy wizualnej działa tak samo, gdy są hostowane w aplikacji desktopowej, co w aplikacji UWP, niektóre funkcje mają ograniczenia. Poniżej przedstawiono niektóre ograniczenia, o których należy pamiętać:

  • Łańcuchy efektu polegają na Win2D dla opisów efektów. Pakiet NuGet Win2D nie jest obsługiwany w aplikacjach klasycznych, dlatego należy ponownie skompilować go z kodu źródłowego.
  • Aby przeprowadzić testowanie kolizji, należy wykonać obliczenia granic poprzez samodzielne przeanalizowanie po drzewie wizualnym. Jest to taka sama, jak warstwa wizualna na platformie UWP, z wyjątkiem tego, że nie ma elementu XAML, który można łatwo powiązać na potrzeby sprawdzania trafień.
  • Warstwa wizualna nie ma elementu pierwotnego do renderowania tekstu.
  • Gdy używane są dwie różne technologie interfejsu użytkownika, takie jak WPF i Warstwa wizualna, są one odpowiedzialne za rysowanie własnych pikseli na ekranie i nie mogą udostępniać pikseli. W związku z tym zawartość warstwy wizualnej jest zawsze renderowana na podstawie innej zawartości interfejsu użytkownika. (Jest to znane jako problem z przestrzenią powietrzną i). Może być konieczne wykonanie dodatkowego kodowania i testowania, aby upewnić się, że rozmiar zawartości warstwy wizualnej zmienia się przy dopasowywaniu się do interfejsu użytkownika hosta i nie zasłania innej zawartości.
  • Zawartość hostowana w aplikacji desktopowej nie zmienia rozmiaru ani nie skaluje się automatycznie na potrzeby DPI. Aby upewnić się, że zawartość obsługuje zmiany DPI, może być wymagana dodatkowa procedura. (Zobacz samouczki specyficzne dla platformy, aby uzyskać więcej informacji).

Dodatkowe zasoby

Odniesienie do API

  • Last updated on