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
Utilizzare gli snapshot con Azure File shares
Eseguire operazioni con timeout in React
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Utilizzare domini personalizzati gestiti automaticamente con Azure Container Apps
Evitare (o ridurre) il repo-jacking sulle GitHub Actions
Gestire domini wildcard in Azure Container Apps
Utilizzare Tailwind CSS all'interno di React: installazione
Copiare automaticamente le secret tra più repository di GitHub
Come EF 8 ha ottimizzato le query che usano il metodo Contains
Creare moduli CSS in React
Effettuare il binding di date in Blazor
Eseguire una GroupBy per entity in Entity Framework
I più letti di oggi
- Tutorial Windows Communication Foundation
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Gestire la cancellazione di una richiesta in streaming da Blazor
- Repository con code-first di Entity Framework
- Blazor: Security
- Utilizzare WebAssembly con .NET, ovunque
- Protobuf: un serializzatore alternativo per WCF