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
Effettuare il binding di date in Blazor
Eseguire operazioni con timeout in React
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Utilizzare il trigger SQL con le Azure Function
Effettuare lo stream della risposta in ASP.NET Core tramite IAsyncEnumerable
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Gestire la cancellazione di una richiesta in streaming da Blazor
Sfruttare lo streaming di una chiamata Http da Blazor
Cambiare la chiave di partizionamento di Azure Cosmos DB
Utilizzare i primary constructor di C# per inizializzare le proprietà
Usare lo spread operator con i collection initializer in C#
Generare token per autenicarsi sulle API di GitHub
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!
- Gli oggetti CallOut di Expression Blend 4.0
- Repository con code-first di Entity Framework
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary