Dall'archivio script > Windows 10

Creare effetti sulle immagini con le Composition API e lo XAML nella Universal Windows Platform

di Marco LeonciniMarco Leoncini, in Windows 10,

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

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi