Riflesso

Una cosa molto bella esteticamente è il riflesso e grazie allo xaml è anche molto semplice da implementare!

Creiamo un’applicazione WPF e dividiamo la Grid base della window principale in due righe di uguale altezza:

nella prima riga metteremo il contenuto(una grid nominata myContainer) della nostra finestra (liste, bottoni e chi più ne ha ne metta) mentre nella seconda riga metteremo il pannello(myReflector) che riflette il contenuto di myContainer .

Ora aggiungiamo dei controlli a myContainer (una lista sulla sinistra e a destra una textbox e un bottone che aggiunge il testo della textbox nella lista) .

Ci aggiungiamo il codice per gli l’aggiunta del testo.
private void btnInsert_Click
(object sender, RoutedEventArgs e)
{
if (txtInsert.Text.Trim() != "")
{
lstBox.Items.Add(txtInsert.Text.Trim());
}
}

ottenendo così questo risultato

Ora non ci resta che far riflettere al pannello sotto (myReflector) il contenuto della griglia superiore(myContainer).

Per fare questo lo xaml mette a disposizione Il VisualBrush.
Questo controllo può essere utilizzato per visualizzare i suoi componenti figli in modo visuale (ma in tal caso questi perdono tutte le loro funzionalità) oppure per creare un’immagine dell’oggetto visual di destinazione (ovvero quello che vogliamo noi).

Quindi aggiungiamo come background del myReflector un visualBrush che punta al nostro myContainer.

ottenendo

MyReflector verrà aggiornato ad ogni modifica ottenendo così un riflesso in realtime. Essendo la copia dell’immagine fatta “pixel per pixel” il numero di controlli contenuti in myContainer non va a influire sulle prestazioni del VisualBrush (ovvero se ci sono 2 o 3 o n controlli.. visualbrush richiede sempre le stesse risorse 😛 )

Per concludere non ci resta che capovolgere il riflesso e sfumarlo 😛

La rotazione si ottiene con:
ScaleTransform ScaleX="1" ScaleY="-1"
mentre con
RenderTransformOrigin="0.5, 0.5"
si imposta il di origine su cui viene calcolata la rotazione in modo che il pannello myReflector rimanga nella sua posizione originale invece che spostarsi a causa della rotazione.

Mentre la sfumatura (con la trasparenza che va in aumentando ) la si ottiene settando un LinearBrush come opacitymask del myReflector.

Riassumendo myReflector sarà così:

e questo il risultato finale:

Una cosa da notare è che il VisualBrush sposta l’immagine che visualizza in alto a sinistra. Il modo più semplice per risolvere il problema è impostare uno sfondo praticamente invisibile (background con visibilità 1%) del myContainer. In questo modo si evitano problemi inutili riguardo al posizionamento del riflesso. 😛 (Nel nostro caso questo problema non si pone perchè i controlli coprono completamente l’area).

Annunci
Tagged with: , , , , , ,
Pubblicato su WPF
One comment on “Riflesso
  1. anxiety disorders ha detto:

    Woah! I’m really digging the template/theme of this blog. It’s simple, yet effective.
    A lot of times it’s difficult to get that “perfect balance” between usability and appearance. I must say you’ve done a very
    good job with this. In addition, the blog loads
    super fast for me on Opera. Excellent Blog!

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: