Dela via

Översikt över visuellt lager

Det visuella lagret ger ett API med höga prestanda, behållet läge för grafik, effekter och animeringar och är grunden för alla användargränssnitt på Windows-enheter. Du definierar användargränssnittet på ett deklarativt sätt och det visuella lagret förlitar sig på grafikmaskinvaraacceleration för att säkerställa att innehåll, effekter och animeringar återges på ett smidigt och felfritt sätt oberoende av appens användargränssnittstråd.

Typerna i Microsoft.UI.Composition utgör Windows App SDK/WinUI 3-implementeringen av det visuella lagret.

Viktiga höjdpunkter:

  • Välbekanta WinRT-API:er
  • Skapad för mer dynamiskt användargränssnitt och interaktioner
  • Begrepp som är anpassade till designverktyg
  • Linjär skalbarhet utan plötsliga prestandaklippor

Dina WinUI- och Windows App SDK-appar använder redan det visuella lagret via något av gränssnittsramverken. Du kan också dra nytta av det visuella lagret direkt för anpassad rendering, effekter och animeringar med mycket liten ansträngning.

UI Framework-skiktning: ramverksskiktet (Microsoft.UI.Xaml) bygger på det visuella lagret (Microsoft.UI.Composition) som bygger på grafikskiktet (DirectX)

Vad finns i det visuella lagret?

De primära funktionerna i det visuella lagret är:

  1. Innehåll: Enkel sammansättning av anpassat ritat innehåll
  2. Effekter: Realtidsgränssnittseffektsystem vars effekter kan animeras, länkas och anpassas
  3. Animeringar: Uttrycksfulla, ramverksoberoende animeringar som körs oberoende av användargränssnittstråden

Content

Innehållet hanteras, transformeras och görs tillgängligt för användning av animerings- och effektsystemet med hjälp av visuella objekt. I basen av klasshierarkin finns klassen Visual, en lätt, trådagil proxy i appprocessen för visuellt tillstånd i kompositorn. Underklasser av Visual inkluderar ContainerVisual för att möjliggöra att barn skapar träd av visuella objekt och SpriteVisual som kan innehålla innehåll och kan målas med antingen solida färger, anpassat ritat innehåll eller visuella effekter. Tillsammans utgör dessa Visual-typer den visuella trädstrukturen för 2D-användargränssnittet och understöder de mest synliga XAML FrameworkElement.

Mer information finns i översikten över Composition Visual.

Effekter

Med effektsystemet i det visuella lagret kan du använda en kedja med filter- och transparenseffekter på ett visuellt objekt eller ett träd med visuella objekt. Det här är ett UI-effektsystem som inte ska förväxlas med bild- och medieeffekter. Effekter fungerar tillsammans med animeringssystemet, så att användarna kan uppnå smidiga och dynamiska animeringar av effektegenskaper, renderade oberoende av användargränssnittstråden. Effekterna i det visuella lagret ger de kreativa byggstenar som kan kombineras och animerads för att skapa skräddarsydda och interaktiva upplevelser.

Förutom animerbara effektkedjor stöder Visual Layer också en belysningsmodell som låter visuella objekt efterlikna materialegenskaper genom att svara på animerbara lampor. Visuella objekt kan också kasta skuggor. Belysning och skuggor kan kombineras för att skapa en uppfattning om djup och realism.

Mer information finns i Översikt över kompositionseffekter .

Animationer

Med animeringssystemet i det visuella lagret kan du flytta visuella objekt, animera effekter och driva transformeringar, klipp och andra egenskaper. Det är ett ramverksagnostiskt system som har utformats från grunden med prestanda i åtanke. Den körs oberoende av användargränssnittstråden för att säkerställa jämnhet och skalbarhet. Även om du kan använda välbekanta KeyFrame-animeringar för att skapa egenskapsändringar över tid, kan du också konfigurera matematiska relationer mellan olika egenskaper, inklusive användarindata, så att du direkt kan skapa sömlösa koreograferade upplevelser.

Mer information finns i översikten över kompositionsanimationer .

Arbeta med WinUI XAML

Du kan komma till ett visuellt objekt som skapats av XAML-ramverket och säkerhetskopiera ett synligt FrameworkElement med hjälp av klassen ElementCompositionPreview i Microsoft.UI.Xaml.Hosting. Observera att visuella objekt som skapats åt dig av ramverket har vissa begränsningar för anpassning. Det beror på att ramverket hanterar förskjutningar, transformeringar och livslängder. Du kan dock skapa egna visuella objekt och koppla dem till ett befintligt WinUI-element via ElementCompositionPreview, eller genom att lägga till dem i en befintlig ContainerVisual någonstans i den visuella trädstrukturen.

Mer information finns i Använda det visuella lagret med XAML-översikt .

Arbeta med din skrivbordsapp

Du kan använda det visuella lagret för att förbättra utseendet, känslan och funktionerna i Win32-skrivbordsappar som skapats med Windows App SDK, samt WPF, Windows Forms och C++ Win32-skrivbordsappar. Du kan migrera öar med innehåll för att använda det visuella lagret och behålla resten av användargränssnittet i det befintliga ramverket. Det innebär att du kan göra betydande uppdateringar och förbättringar av programgränssnittet utan att behöva göra omfattande ändringar i din befintliga kodbas.

Mer information finns i Modernisera din skrivbordsapp med hjälp av visualiseringsskiktet.

Skillnader från UWP

Namnområdet Microsoft.UI.Composition ger åtkomst till funktioner som nästan är identiska med det visuella UWP-lagret (Windows.UI.Composition) i de vanligaste scenarierna. Men det finns undantag och skillnader.

Hämta en Compositor-instans

I skrivbordsappar (en WinUI-app är en skrivbordsapp) är null . Så du kan inte hämta en instans av Compositor från Window.Current.Compositor. I WinUI-appar rekommenderar vi att du anropar ElementCompositionPreview.GetElementVisual(UIElement) för att hämta ett visuellt sammansättningsobjekt och hämta Compositor det från det visuella objektets Compositor-egenskap . Om du inte har åtkomst till ett UIElement (till exempel om du skapar en CompositionBrush i ett klassbibliotek) kan du anropa CompositionTarget.GetCompositorForCurrentThread.

Externt innehåll

Microsoft.UI.Composition-compositorn körs helt inom en Windows App SDK-applikation och har endast åtkomst till de pixlar som den ritade. Det innebär att allt externt innehåll (innehåll som inte ritades av kompositorn) är okänt för kompositorn, vilket skapar vissa begränsningar.

Ett exempel på externt innehåll är MediaPlayerElement (Microsoft.UI.Xaml.Controls). Windows-mediestacken ger XAML ett ogenomskinligt växlingskedjehandtag för media. XAML ger handtaget till compositorn, som i sin tur räcker bort det till Windows (via Windows.UI.Composition) för att visa. Eftersom kompositorn inte kan se någon av bildpunkterna i medians byteskedja kan den inte sammanställa den som en del av den totala återgivningen av fönstret. Istället överlämnar den medievektorkedjan till Windows för att renderas under kompositörens rendering, med ett hål utskuret i kompositörens rendering så att medievektorkedjan nedanför blir synlig.

Diagram över återgivning av externt innehåll

I Windows App SDK/WinUI skapar följande API:er allt externt innehåll:

Modellen för hantering av externt innehåll skapar följande begränsningar:

  • Det går inte att ha compositorinnehåll bakom externt innehåll. Det går till exempel inte att ge en WebView2 en transparent bakgrund för att kunna se XAML-knappar eller bilder bakom den. Det enda som kan finnas bakom externt innehåll är annat externt innehåll och fönsterbakgrunden. Därför avråder/inaktiverar vi transparens för externt innehåll.
  • Det går inte att ha ett exempel på compositorinnehåll från externt innehåll. AcrylicBrush kan till exempel inte prova och sudda ut några bildpunkter från ett MediaPlayerElement. AcrylicBrush kommer att sampla från compositorns bild, som är transparent svart för externa innehållsområden. På samma sätt kan AcrylicBrush framför en MicaBackdrop eller DesktopAcrylicBackdrop inte se några färger som dessa bakgrunder kommer att dra; och i stället suddar penseln ut det genomskinliga svarta.
  • Ett annat scenario kallas målinvertering, som används för att ta hand om textrutekontroller för att invertera de bildpunkter som textinfognings-caret ligger framför. Det inverterar liknande provar från sammanställningsytan, och det påverkas om textrutan inte har en ogenomskinlig bakgrund som ritas av sammanställaren.
  • Eftersom WinUI SwapChainPanel skapar externt innehåll stöder det inte transparens. Den stöder inte heller tillämpning av AcrylicBrush och andra effekter som använder en CompositionBackdropBrush framför den.

Exempel

Projektet Windows App SDK Samples innehåller en omfattande uppsättning kompositionsexempel som visar hur du använder API:er för Microsoft.UI.Composition för att skapa omfattande visuella upplevelser. De här exemplen omfattar en mängd olika scenarier – från grundläggande layout och transformeringar till avancerade effekter, belysning, skuggor och InteractionTracker-baserad indatahantering som pull-to-refresh och parallax-rullning. Oavsett om du kommer igång med det visuella lagret eller letar efter mönster som ska tillämpas i din egen app är de här exemplen en praktisk referens för att se hur byggblocken samverkar.

Utforska exemplen på GitHub: WindowsAppSDK-Samples/SceneGraph.

app-gif

  • Last updated on