Alessandro Del Sole's Blog

{ A programming space about Microsoft® .NET® }
posts - 1908, comments - 2047, trackbacks - 352

My Links

News

Your host

This is me! Questo spazio è dedicato a Microsoft® .NET®, di cui sono molto appassionato :-)

Cookie e Privacy

Disabilita cookie ShinyStat

Microsoft MVP

My MVP Profile

Microsoft Certified Professional

Microsoft Specialist

Xamarin Certified Mobile Developer

Il mio libro su VB 2015!

Pre-ordina il mio libro su VB 2015 Pre-ordina il mio libro "Visual Basic 2015 Unleashed". Clicca sulla copertina per informazioni!

Il mio libro su WPF 4.5.1!

Clicca sulla copertina per informazioni! E' uscito il mio libro "Programmare con WPF 4.5.1". Clicca sulla copertina per informazioni!

These postings are provided 'AS IS' for entertainment purposes only with absolutely no warranty expressed or implied and confer no rights.
If you're not an Italian user, please visit my English blog

Le vostre visite

I'm a VB!

Guarda la mia intervista a Seattle

Follow me on Twitter!

Altri spazi

GitHub
I miei progetti open-source su GitHub

Article Categories

Archives

Post Categories

Image Galleries

Privacy Policy

WPF: Esempio di oggetti riflessi

In Windows Presentation Foundation, il termine "Reflection" si usa anche per un altro motivo, oltre a quello ben noto ai programmatori .NET. Si tratta, infatti, di una tecnica che consente di riflettere gli oggetti dell'interfaccia grafica. Pensate, ad esempio, all'immagine di una persona o di un oggetto riflesso nell'acqua. Ecco, si tratta di una cosa simile :-) In WPF questo si ottiene utilizzando l'oggetto VisualBrush, che appartiene a quella categoria di oggetti che si occupano del riempimento di altri oggetti. Il VisualBrush è molto particolare, poichè, al contrario di altri Brush, permette di riempire un elemento dell'interfaccia con un altro elemento dell'interfaccia (avete capito bene), invece che riempirlo con un colore o con un gradiente. Vediamo un paio di esempi, a mio avviso piuttosto gradevoli. Rifletteremo, tramite XAML, un blocco di testo e un'immagine. Dopo aver aperto Visual Basic o Visual C# e creato un nuovo progetto WPF, la prima cosa da fare è implementare un blocco di testo: 

        <StackPanel Margin="10,10,10,10">

 

            <TextBlock Width="510" Height="60" FontFamily="Segoe" FontSize="48"

                       FontStyle="Italic" FontWeight="Bold" x:Name="myVisual" >

                    Visual Basic Tips And Tricks

               

                <TextBlock.Foreground>                  

                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

                        <GradientStop Offset="0" Color="Orange"/>

                        <GradientStop Offset="0.6" Color="Yellow"/>

                        <GradientStop Offset="1" Color="White"/>

                    </LinearGradientBrush>

                </TextBlock.Foreground>

            </TextBlock>

        </StackPanel>

Il TextBlock contiene un testo formattato e a cui viene applicato un gradiente lineare per il colore di primo piano. In questa fase, la cosa degna di nota è l'assegnazione di un identificatore (x:Name) che ci servirà più tardi.

Ora, vogliamo che questo testo venga riflesso. Un buon sistema è quello di utilizzare un controllo Border. Lo sfondo del controllo Border verrà riempito con il TextBlock rovesciato. Avete capito bene, proprio con il TextBlock e non con qualcosa che lo rappresenti. Questo è reso possibile dal VisualBrush. Il controllo Border deve avere le stesse dimensioni del TextBlock e possiamo implementarlo così (sempre all'interno dello StackPanel):

            <Border Width="510" Height="60">

                <Border.Background>

                    <VisualBrush Visual="{Binding ElementName=myVisual}">

                        <VisualBrush.Transform>

                            <ScaleTransform ScaleX="1" ScaleY="-1" CenterX="255" CenterY="30" />

                        </VisualBrush.Transform>

                    </VisualBrush>

                </Border.Background>

            </Border>

Come potete osservare, lo sfondo del Border (Border.Background) viene riempito con un oggetto VisualBrush, la cui proprietà Visual indica, tramite Binding, l'oggetto che si utilizzerà per il riempimento. Affinchè il contenuto dello sfondo sia rovesciato, si utilizza una trasformazione ScaleTransform. A tal proposito è opportuno precisare che le proprietà CenterX e CenterY (che determinano il posizionamento sugli assi delle X e delle Y) corrispondono, rispettivamente, alla metà dellla larghezza e dell'altezza del TextBlock.

Per completare il tutto, si può applicare un effetto di opacità al controllo Border, mediante la sua proprietà OpacityMask (ne abbiamo parlato precedentemente in questo post). Questa viene implementata mediante un semplice gradiente, come segue:

                <Border.OpacityMask>

                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

                        <LinearGradientBrush.GradientStops>

                            <GradientStop Offset="0" Color="Black"/>

                            <GradientStop Offset=".7" Color="Transparent"/>

                        </LinearGradientBrush.GradientStops>

                    </LinearGradientBrush>

                </Border.OpacityMask>

Per rendere più accattivante il tutto, possiamo aggiungere uno sfondo a gradiente anche alla finestra principale, in questo modo:

    <Window.Background>

        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

            <GradientStop Offset="0" Color="Gray"/>

            <GradientStop Offset="0.4" Color="Black"/>

        </LinearGradientBrush>

    </Window.Background>

Il risultato a video è questo:

La stessa tecnica si può utilizzare verso qualunque oggetto che deriva dalla classe Visual (che implementa il rendering dei controlli WPF), come per esempio un'immagine. Il seguente codice riflette un'immagine che rappresenta la copertina del mio nuovo libro, con un gioco di gradienti come sfondo per la finestra:

    <Window.Background>

        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

            <GradientStop Offset="0" Color="Navy"/>

            <GradientStop Offset="0.3" Color="White"/>

            <GradientStop Offset="0.4" Color="DarkBlue"/>

            <GradientStop Offset="0.7" Color="White"/>

            <GradientStop Offset="1" Color="Black"/>

        </LinearGradientBrush>

    </Window.Background>

   

    <Grid>

        <StackPanel Margin="10,10,10,10">

 

            <Image x:Name="myImage" Width="95" Height="133" Source="libro2t.jpg"/>

           

            <Border Width="95" Height="133">

                <Border.Background>

                    <VisualBrush Visual="{Binding ElementName=myImage}">

                        <VisualBrush.Transform>

                            <ScaleTransform ScaleX="1" ScaleY="-1" CenterX="50" CenterY="66" />

                        </VisualBrush.Transform>

                    </VisualBrush>

                </Border.Background>

 

                <Border.OpacityMask>

                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

                        <LinearGradientBrush.GradientStops>

                            <GradientStop Offset="0" Color="Black"/>

                            <GradientStop Offset=".7" Color="Transparent"/>

                        </LinearGradientBrush.GradientStops>

                    </LinearGradientBrush>

                </Border.OpacityMask>

 

            </Border>

        </StackPanel>

    </Grid>

Il risultato a video è il seguente:

Come potete vedere, la tecnica è rimasta la medesima. Ovviamente, questo discorso non è così banale. Noi abbiamo utilizzato oggetti a dimensione prefissata, ma l'argomento può essere approfondito in relazione alla "riflessione" di oggetti a dimensione dinamica. In ogni caso avete imparato un nuovo effetto in WPF, di cui potete trovare ulteriori notizie nel mio nuovo libro dedicato a .NET 3.0/3.5, in cui si utilizza il VisualBrush per aggiornare in tempo reale il contenuto di un oggetto, al variare di un altro.

Alessandro

Print | posted on mercoledì 23 gennaio 2008 22:19 | Filed Under [ Windows Presentation Foundation ]

Powered by:
Powered By Subtext Powered By ASP.NET