Vizualizációs réteg áttekintése

A Vizualizáció réteg nagy teljesítményű, megtartott módú API-t biztosít grafikákhoz, effektusokhoz és animációkhoz, és a Windows-eszközök összes felhasználói felületének alapja. A felhasználói felületet deklaratív módon definiálja, a Visual réteg pedig a grafikus hardveres gyorsításra támaszkodik, így biztosíthatja, hogy a tartalom, az effektusok és az animációk zökkenőmentes, hibamentes módon legyenek renderelve az alkalmazás felhasználói felületi szálától függetlenül.

A Microsoft.UI.Composition típusok alkotják a vizualizációs réteg Windows App SDK/WinUI 3 implementációját.

Kiemelt kiemelések:

• Ismerős WinRT API-k
• Dinamikusabb felhasználói felület és interakciók
• Tervezési eszközökkel összhangban lévő fogalmak
• Lineáris méretezhetőség hirtelen teljesítményszirtek nélkül

A WinUI- és a Windows App SDK-alkalmazások már használják a Visual réteget az egyik felhasználói felületi keretrendszeren keresztül. A Visual réteget közvetlenül is kihasználhatja az egyéni rendereléshez, effektusokhoz és animációkhoz, nagyon kevés erőfeszítéssel.

Mi található a Vizualizáció rétegben?

A vizualizációs réteg elsődleges funkciói a következők:

1. Tartalom: Egyéni rajzolt tartalom egyszerűsített összeállítása
2. Effektusok: Valós idejű felhasználói felületi effektusok rendszere, amelynek effektusai animálhatók, láncoltak és testre szabhatók
3. Animációk: A felhasználói felületi száltól független expresszív, keretrendszer-agnosztikus animációk

Content

A tartalmat az animációs és effektusrendszer vizualizációk használatával üzemelteti, alakítja át és teszi elérhetővé. Az osztályhierarchia alapja a Visual osztály, amely egy egyszerű, szál-agilis proxy az alkalmazásfolyamatban a képi állapothoz a compositorban. A Vizualizáció alosztályai közé tartozik a ContainerVisual , amely lehetővé teszi a gyermekek számára a vizualizációk és a SpriteVisual fáinak létrehozását, amelyek tartalmat tartalmaznak, és egyszínű színekkel, egyéni rajzolt tartalommal vagy vizuális effektusokkal festhetők. Ezek a vizualizációtípusok együttesen alkotják a 2D felhasználói felület és a legláthatóbb XAML FrameworkElements vizuális fastruktúráját.

További információkért tekintse meg a Kompozíciós vizualizáció áttekintését.

Hatások

A Vizualizáció réteg Effektusok rendszere lehetővé teszi, hogy szűrő- és áttetszőségi effektusok láncát alkalmazza a vizualizációkra vagy a vizualizációk fájára. Ez egy felhasználói felületi effektusok rendszere, nem tévesztendő össze a kép- és médiaeffektusokkal. Az effektusok az animációs rendszerrel együtt működnek, így a felhasználók zökkenőmentes és dinamikus animációkat érhetnek el az Effektus tulajdonságaiból, amelyek a felhasználói felületi száltól függetlenül jelennek meg. A Visual Layer effektusai olyan kreatív építőelemeket biztosítanak, amelyek kombinálhatók és animálhatók a testre szabott és interaktív élmények létrehozásához.

Az animálható effektusláncok mellett a Visual Layer olyan világítási modellt is támogat, amely lehetővé teszi, hogy a vizualizációk az animálható fényekre reagálva utánozzák az anyagtulajdonságokat. A vizualizációk árnyékokat is vethetnek. A világítás és az árnyékok kombinálhatók a mélység és a realizmus észlelésének létrehozásához.

További információkért tekintse meg a Kompozíciós effektusok áttekintését.

Animációk

A Vizuális réteg animációs rendszere lehetővé teszi a vizuális elemek mozgatását, az effektusok animálását, valamint az átalakítások, klipek és egyéb tulajdonságok vezérlését. Ez egy keretrendszer-agnosztikus rendszer, amelyet az alapoktól kezdve terveztek a teljesítmény szem előtt tartásával. A felhasználói felületi száltól függetlenül fut a zökkenőmentesség és a méretezhetőség biztosítása érdekében. Bár az ismert KeyFrame-animációk segítségével idővel módosíthatja a tulajdonságokat, matematikai kapcsolatokat is beállíthat a különböző tulajdonságok között, beleértve a felhasználói bemeneteket is, így közvetlenül hozhat létre zökkenőmentes koreografált szolgáltatásokat.

További információkért tekintse meg a Kompozíció animációk áttekintését .

A WinUI XAML használata

A Microsoft.UI.Xaml.HostingElementCompositionPreview osztály használatával hozzáférhet egy XAML-keretrendszer által létrehozott Visual elemhez, és támogathatja egy látható FrameworkElement megjelenítését. Vegye figyelembe, hogy a keretrendszer által az Ön számára létrehozott vizualizációk a testreszabás bizonyos korlátaival járnak. Ennek az az oka, hogy a keretrendszer eltolásokat, átalakításokat és élettartamokat kezel. Létrehozhat azonban saját vizualizációkat, és csatolhatja őket egy meglévő WinUI-elemhez az ElementCompositionPreview használatával, vagy hozzáadhatja őket egy meglévő ContainerVisualhoz valahol a vizualizációfa szerkezetében.

További információ: A Vizualizáció réteg használata XAML-áttekintéssel .

Az asztali alkalmazás használata

A Visual réteggel javíthatja a Windows App SDK-val készült asztali Win32-alkalmazások megjelenését, hangulatát és funkcióit, valamint a WPF, a Windows Forms és a C++ Win32 asztali alkalmazásokat. Áttelepítheti a tartalomszigeteket a Visual-réteg használatára, és megtarthatja a felhasználói felület többi részét a meglévő keretrendszerben. Ez azt jelenti, hogy jelentős frissítéseket és fejlesztéseket végezhet az alkalmazás felhasználói felületén anélkül, hogy átfogó módosításokat kellene végeznie a meglévő kódbázison.

További információ: Asztali alkalmazás modernizálása a Visual réteg használatával.

Különbségek az UWP-től

A Microsoft.UI.Composition névtér olyan funkciókhoz biztosít hozzáférést, amelyek szinte megegyeznek az UWP visual réteggel (Windows.UI.Composition) a leggyakrabban használt forgatókönyvekben. Vannak azonban kivételek és különbségek.

Compositor-példány lekérése

Asztali alkalmazásokban (a WinUI-alkalmazások asztali alkalmazások), a Window.Current az null. Így a Compositor egy példányát nem tudja lekérni a programból Window.Current.Compositor. A WinUI-alkalmazásokban azt javasoljuk, hogy hívja meg az ElementCompositionPreview.GetElementVisual(UIElement) függvényt egy kompozíciós vizualizáció lekéréséhez, és kérje le a Compositor vizualizáció Compositor tulajdonságából. Olyan esetekben, amikor nem fér hozzá egy UIElement-hez (például ha létrehoz egy CompositionBrush-t osztálykönyvtárban), használhatja a CompositionTarget.GetCompositorForCurrentThread metódust.

Külső tartalom

A Microsoft.UI.Composition compositor teljes egészében egy Windows App SDK-alkalmazásban fut, és csak a rajzolt képpontokhoz fér hozzá. Ez azt jelenti, hogy minden külső tartalom (amely nem a compositor által rajzolt tartalom) ismeretlen a compositor számára, ami bizonyos korlátozásokat hoz létre.

A külső tartalomra példa a (Microsoft.UI.Xaml.Controls) MediaPlayerElement. A Windows médiaverem egy átlátszatlan médiacserélési láncfogópontot biztosít az XAML számára. Az XAML ezt a referenciát a kompozitornak adja, majd azt a Windows számára adja át megjelenítés céljából a Windows.UI.Composition segítségével. Mivel a kompozitor nem látja a médiacserelánc egyik képpontját sem, nem tudja azt az ablak teljes renderelésének részeként összeállítani. Ehelyett a médiacserélési láncot a Windowsnak adja, hogy a compositor renderelése alatt jelenhessen meg, a compositor rendereléséből kivágott lyukkal, hogy az alatta lévő médiacserélő lánc látható legyen.

A Windows App SDK/WinUI rendszerben a következő API-k hoznak létre külső tartalmat:

• MediaPlayerElement
• SwapChainPanel
• WebView2
• A MicaBackdrop és a DesktopAcrylicBackdrop, valamint a mögöttes MicaController és DesktopAcrylicController , amelyet használnak.

A külső tartalom kezelésének modellje a következő korlátozásokat hozza létre:

• Nem lehetséges compositor-tartalmat létrehozni külső tartalom mögött. Például nem lehet átlátszó hátteret adni a WebView2-nek , hogy XAML-gombokat vagy képeket láthasson mögötte. A külső tartalom mögött csak a külső tartalom és az ablak háttere áll. Emiatt elriasztjuk/letiltjuk a külső tartalmak átláthatóságát.
• Külső tartalomból nem lehet compositor-tartalommintát létrehozni. Az AcrylicBrush például nem tud mintát venni vagy elhomályosítani bármilyen képpontot, amely a MediaPlayerElement-ből származik. Az AcrylicBrush mintát vesz a kompozitor által készített képből, amely a külső tartalomterületeken átlátszó fekete. Hasonlóképpen, a MicaBackdrop vagy a DesktopAcrylicBackdrop előtt lévő AcrylicBrush nem lát olyan színeket, amelyeket ezek a hátterek rajzolnak; és ehelyett az ecset elhomályosítja az átlátszó feketét.
• Egy másik forgatókönyv a cél invertálás, amelyet a szövegdoboz-vezérlők szövegbeviteli kurzorának előtti képpontok invertálására használnak. A komponáló felületről hasonló módon vesz mintát, és hatással lesz rá, ha a szövegdoboznak nincs olyan átlátszatlan háttere, amelyet a komponáló rajzol meg.
• Mivel a WinUI SwapChainPanel külső tartalmat hoz létre, nem támogatja az átláthatóságot. Nem támogatja az AcrylicBrush és más olyan hatások alkalmazását sem, amelyek előtt egy CompositionBackdropBrush-ot használnak.

Példák

A Windows App SDK Samples projekt átfogó összeállítási mintákat tartalmaz, amelyek bemutatják, hogyan használhatók a Microsoft.UI.Composition API-k a gazdag vizuális élmények létrehozásához. Ezek a minták számos forgatókönyvet fednek le – az alapszintű elrendezéstől és átalakítástól a speciális effektusokig, a világításig, az árnyékolásig és az InteractionTracker-alapú bemenetkezelésig, például a lekéréses frissítésig és a parallax görgetésig. Akár most kezdi a Visual réteg használatát, akár saját alkalmazásában alkalmazható mintákat keres, ezek a példák gyakorlati útmutatást nyújtanak az építőelemek összeállításához.

Ismerkedjen meg a GitHubon található mintákkal: WindowsAppSDK-Samples/ SceneGraph.

Kapcsolódó témakörök

• Microsoft.UI.Composition API-referencia
• A Visual-réteg használata asztali alkalmazásokban