Uno dei benefici dell'interop tra il Composition Engine e lo XAML è l'aggiunta di nuove API che ci consentono di utilizzare il Composition Engine direttamente nello XAML.
Ad esempio, creando una classe che estende il tipo XamlCompositionBrushBase è possibile creare qualsiasi effetto, come ad esempio invertire il disegno del brush:
public class InvertBrush : XamlCompositionBrushBase { protected override void OnConnected() { if (CompositionBrush == null) { // creiamo lo sfondo, con ciò che è dietro l'UI element var backdrop = Window.Current.Compositor.CreateBackdropBrush(); // controlliamo le capabilities: se gli effetti non sono supportati usciamo if (!CompositionCapabilities.GetForCurrentView().AreEffectsSupported()) { return; } // Creiamo l'effetto // usiamo Win2D in particolare l'InvertEffect e usiamo il BackdropBrush come sorgente var invertEffect = new InvertEffect { Source = new CompositionEffectSourceParameter("backdrop"); }; // facciamo il setup dell'EffectFactory var effectFactory = Window.Current.Compositor.CreateEffectFactory(invertEffect); // e infine creiamo il CompositionEffectBrush var effectBrush = effectFactory.CreateBrush(); // impostiamo la sorgente effectBrush.SetSourceParameter("backdrop", backdrop); // e infine assegniamo la CompositionBrush CompositionBrush = effectBrush; } } protected override void OnDisconnected() { // facciamo pulizia CompositionBrush?.Dispose(); CompositionBrush = null; } }
E infine nello XAML creiamo il brush vero e proprio:
<Grid> <Grid.Background> <ImageBrush ImageSource="ms-appx:///Images/myImage.png"/> </Grid.Background> <Grid Width="250" Height="250" HorizontalAlignment="Center" VerticalAlignment="Center"> <Grid.Background> <brushes:InvertBrush /> </Grid.Background> </Grid> </Grid>
Creare un effetto custom non è semplice, per questo motivo ne possiamo trovare alcuni già pronti come, ad esempio, RevealBrush, RevealBorderBrush, RevealBackgroundBrush e infine AcrylicBrush, che riveste un ruolo importantissimo nel nuovo Fluent Design System di Microsoft, perché aggiunge un effetto di trasparenza acrilica, già pronto per l'utilizzo.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Eseguire le GitHub Actions offline
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Criptare la comunicazione con mTLS in Azure Container Apps
Eseguire query verso tipi non mappati in Entity Framework Core
Load test di ASP.NET Core con k6
Hosting di componenti WebAssembly in un'applicazione Blazor static
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
Applicare il versioning ai nostri endpoint ASP.NET Core Minimal API
Gestire liste di tipi semplici con Entity Framework Core
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Utilizzare flat e flatMap per appiattire array innestati in array
Semplificare il deployment di siti statici con Azure Static Web App