#19 - Maschere sfumate in Silverlight con OpacityMask e ImageBrush

di Alessio Leoncini, in Silverlight 1.0, Silverlight 2.0, 18 settembre 2008

Archiviato in: Silverlight, Silverlight 2.0, Windows Presentation Foundation, XAML

Molti dei principali oggetti in Silverlight dispongono della proprietà OpacityMask con la quale è possibile gestire le trasparenze di circoscritte porzioni di un oggetto.

OpacityMask è una proprietà di tipo Brush pertanto è possibile definire semi-trasparenze utilizzando SolidColorBrush, LinearGradientBrush, RadialGradientBrush e ImageBrush; con questi oggetti si possono applicare anche sfumature parziali considerando gradienti che vanno dal colore pieno fino alla trasparenza; le aree definite con il colore lasciano inalterate la porzioni, le aree con gradazioni di trasparenza rendono più o meno visibile l'oggetto.

Gli effetti più interessanti si possono ottenere utilizzando ImageBrush, con esso si ha la massima libertà di definire una mappatura di sfumature utilizzando un'immagine PNG preparata con i tradizionali software di grafica; con la maschera di fig.2 applicata all'immagine di fig.1 ed il seguente codice:

<Image x:Name="FirstImage"
       Height="469"
       Width="500"
       Source="staff2007.jpg">
    <Image.OpacityMask>
        <ImageBrush ImageSource="MaskImage2.png">
        </ImageBrush>
    </Image.OpacityMask>
</Image>

si può ottenere il risultato di fig.3:

Anche i Brush applicati con OpacityMask possono essere oggetto di animazioni come nel seguente esempio: http://www.silverlightitalia.com/script/demo/19/

Nota: Questo script contiene un allegato.