Expression Blend

Sincronizziamo le animazioni con WPF

Leonardo — Sat, 08 Jan 2011 01:00:00 GMT

WPF offre un gran supporto alle applicazioni che vogliono utilizzare animazioni. Tramite poche righe di Xaml possiamo dire agevolmente che vogliamo animare la proprietà di riempimento di un oggetto da un colore ad un altro in un certo periodo di tempo infinite volte utilizzando perfino delle funzioni matematiche per variare non linearmente l'animazione.

Esempio di animazione di un colore in Xaml

Non è però previsto un modo per aggiungere animazioni in maniera sincronizzata a quelle già esecuzione.

Se iniziamo un'animazione che sfuma dal bianco al rosso un ellisse e, supponiamo a metà dell'animazione, vogliamo iniziare un'altra animazione su un altro oggetto ma allo stesso tempo vogliamo tenere allineate temporalmente le due animazioni come possiamo fare?

Altri esempi di utilizzo possono essere led che lampeggiano continuamente in sincronia nella nostra animazione al cambiamento di determinate proprietà o eventi.

La tecnica più semplice se non ci preoccupa il fatto di dover fermare a metà le animazioni in esecuzione, è fermare le animazioni in corso e riiniziarle con la nuova.

Eseguire queste operazioni può significare scrivere tanto codice ogni volta ma vediamo come creare un TriggerAction che ci permette di incapsulare questa funzionalità e renderla riutilizzabile e fruibile da Xaml.

In sostanza animare la proprietà Fill di un ellisse diventerà facile come scrivere:

Dove il namespace "i" si riferisce al namespace Interactive aggiunto da Expression Blend ma che verrà molto probabilmente incluso ufficialmente nel framework nella prossima versione.

Sono stati utilizzati gli Interactive Trigger di Expression Blend e quindi è necessario aggiungere al progetto la Reference a System.Windows.Interactive e copiare la relativa .dll assieme all'exe (avviene in automatico dopo aver aggiunto la Reference) perchè a differenza di quelli inclusi nella versione attuale del Framework permettono una maggiore estendibilità ed aprono quindi nuovi scenari come quello descritto in questo articolo.

Ancora meglio possiamo addirittura fare drag-and-drop da Expression Blend del nostro TriggerAction dagli Asset di tipo Behaviors sul nostro oggetto e settare poco più di un paio di proprietà nella scheda Miscellaneous.

Vediamo ora come creare la nostra classe che chiameremo SyncAnimationAction.

Innanzitutto dovremo derivare SyncAnimationAction da System.Windows.Interactivity.TriggerAction<DependencyObject> per poter essere richiamata senza scrivere codice da ulteriori Interaction Trigger.

I Trigger possono scatenare l'animazione sincronizzata quando cambia una proprietà (PropertyChangedTrigger), allo scatenarsi di un evento (EventTrigger), alla pressione di un pulsante (KeyTrigger), etc..

Aggiungiamo quindi alla nostra classe 4 Proprietà che potranno essere impostate dallo Xaml come visto prima:

Proprietà	Tipo	Descrizione
Animation	AnimationTimeline	L'animazione da eseguire
AnimatedObject	IAnimatable	L'oggetto su cui eseguire l'animazione
AnimatedProperty	DependencyProperty	La proprietà dell'oggetto da animare
AnimationStopped	bool	Flag che indica se l'animazione è da terminare

Le prime 3 proprietà (o anche AnimationStopped se si ha la necessità) dovranno essere DependencyProperty per supportare il Binding tramite XAML.

Effettuiamo poi l'override del metodo Invoke che verrà scatenato dai Trigger ed aggiungiamo poi tramite una classe "contenitore" AppliedAnimation i nostri valori ad una variabile List<AppliedAnimation> statica chiamata _animations.

Quando verrà chiamato Invoke la nostra classe avrà già popolate le proprietà (AnimatedObject, AnimatedProperty, Animation e AnimationStopped) da Xaml quindi dovremo solamente controllare che questi dati siano validi per poterli aggiungere alla lista.

La lista servirà per tenere dei riferimenti alle nostre animazioni e ci permetterà di fermare/riavviare tutte le animazioni nella lista all'aggiunta di una nuova animazione.

All'aggiunta di una nuova animazione scorreremo tutta la lista delle animazioni fermandole e facendole ripartire.

Per gestire le animazioni non ci serviremo della classe Storyboard in quanto trova la sua maggiore utilità nel codice XAML ma semplicemente utilizzeremo il metodo BeginAnimation passando rispettivamente prima il secondo parametro nullo e poi con l'animazione da eseguire.

Eviteremo quindi l'overhead dovuto ad instanziare un ulteriore StoryBoard.

Spostiamo dunque il codice di sincronizzazione vero e proprio in un metodo statico ReSync per poterlo chiamare eventualmente anche da codice C# (o VB.NET).

Come facciamo però a rimuovere un'animazione?

Qui entra in gioco la quarta proprietà AnimationStopped, semplicemente nel metodo Invoke dovremo controllare se l'animazione è già presenta in lista e in tal caso fermarla ed eliminarla.

Memory Leak?

Mantenendo un riferimento agli oggetti IAnimatable nella lista tramite un AppliedAnimation potremmo causare un memory leak, è quindi consigliabile utilizzare la classe WeakReference al posto del tipo IAnimatable nella lista perché così il Garbage Collector potrà cancellare gli oggetti se sono rimasti solamente nella nostra lista.

E se aggiungo molte animazioni?

Se si aggiungono tante animazioni, ad ogni animazione aggiunta vengono riavviate le precedenti e questo potrebbe causare qualche problema prestazionale se le animazioni sono complesse e se sono in gran numero.

Esempio: se aggiungo 100 animazioni avrò 100 ReSync che complessivamente riavvieranno 100+99+98+....+1 animazioni e questo potrebbe non essere desiderato, è quindi necessario inserire una proprietà che permetta di "saltare" il metodo ReSync fino a quando tutte le animazioni non saranno state aggiunte. In questo modo si potrà avere un solo ReSync alla fine dell'aggiunta in blocco delle animazioni.

Nel codice allegato è presente l'implementazione comprensiva di WeakReference

Grafici con WPF e LINQ

Leonardo — Tue, 17 Aug 2010 16:26:19 GMT

Aggiornato l’articolo su come creare grafici partendo da zero tramite WPF e LINQ per includere alcune nuove peculiarità del .NET Framework 4.0.

Testo più chiaro con TextOptions.TextFormattingMode="Display"

Grafici più definiti con UseLayoutRounding (precedentemente veniva disabilitato solamente l’Anti-Aliasing dei bordi)

Progetto scaricabile in formato Visual Studio 2010

Leggi l’articolo aggiornato al 17/08/2010

WPF e il 3D (sesta parte)

Leonardo — Tue, 23 Jun 2009 00:43:24 GMT

Indice degli articoli su WPF e il 3D

I pennelli di WPF

Per colorare un cubo di Rosso abbiamo assegnato al nostro modello 3D (creato in precedenza) il materiale DiffuseMaterial con la proprietà Brush impostata a Red tramite codice XAML.

Così facendo dietro le quinte è stato utilizzato il pennello predefinito Brushes.Red che altro non è che un Brush (parola che in italiano si può tradurre letteralmente in pennello) di tipo SolidColorBrush (colore uniforme) con la proprietà Color impostata su Red. Avremmo potuto scrivere anche il seguente codice XAML per ottenere lo stesso risultato:

Scrivendo il codice in quest’ultima forma è possibile sostituire il tipo SolidColorBrush con qualsiasi pennello, vediamo quali WPF ci fornisce:

SolidColorBrush come abbiamo visto ci permette di colorare con un colore a tinta unita
LinearGradientBrush permette di colorare con sfumature lineari
ImageBrush permette di disegnare un’immagine
RadialGradientBrush permette di colorare con sfumature radiali
DrawingBrush permette di disegnare un disegno 2D (o un oggetto Drawing)
VisualBrush permette di disegnare un oggetto visualizzabile (o un oggetto Visual)
I pennelli sono ordinati dal più al meno performante.

WPF è estremamente coerente e permette di utilizzare su oggetti sia 2D sia 3D tutti i pennelli.

Tramite Expression Blend è possibile impostare visualmente qualsiasi pennello e vederne un anteprima applicata sull’oggetto anche se tridimensionale

Coloriamo oggetti 3D coi pennelli

L’uso di pennelli avanzati pone il problema di mappare eventuali immagini 2D (chiamate texture) sulle superfici tridimensionali, per risolverlo dobbiamo inserire delle coordinate chiamate TextureCoordinates nelle nostre geometrie.

Ad esempio il seguente pennello LinearGradientBrush genera un gradiente dal bianco al nero passando per il rosso:

Per colorare un cubo col gradiente di esempio oltre ad impostarlo come materiale (vedere I pennelli di WPF ad inizio articolo) dobbiamo provvedere a mappare ogni punto alle corrispondenti coordinate della texture che come possiamo notare utilizzano il sistema di riferimento 2D. La mappatura si concretizza tramite la proprietà TextureCoordinates della geometria MeshGeometry3D.

Il codice XAML per brevità è relativo alla sola faccia centrale del cubo

Da Visual Studio a Expression Blend.. in un lampo

Leonardo — Fri, 13 Feb 2009 10:54:56 GMT

Spesso chi programma utilizzando WPF ha la necessità di passare da Visual Studio a Expression Blend molto spesso, ecco un piccolo suggerimento per passare rapidamente da un ambiente all’altro:

Per prima cosa apriamo Visual Studio e tramite il menù Tools andiamo su External Tools

Si aprirà la finestra di dialogo External Tools. Aggiungiamo una nuove voce facendo click su Add e inserendo come titolo “Expression &Blend”, come comando il percorso dell’eseguibile Blend.exe, come argomento il nome del file della soluzione (o del progetto se si desidera aprire in Blend solamente il progetto corrente) e come directory iniziale la cartella della soluzione (o del progetto).

UPDATE: inserendo come argomento “$(ProjectDir)$(ProjectFileName) /file:$(ItemFileName)$(ItemExt)” si aprirà il progetto corrente in Expression Blend assieme al file su cui si sta lavorando (in maniera analoga al menù contestuale “Open in Expression Blend…” disponibile nei progetti Silverlight)

Inserendo il carattere & prima della B creeremo un collegamento rapido da tastiera (Alt+T/B).

Per poter impostare rapidamente tutti i percorsi è possibile utilizzare i pulsanti alla destra delle caselle di testo.

Se si utilizzano raramente gli altri strumenti è consigliato spostare (tramite il pulsante Move Up) la voce aggiunta in prima posizione per far poi “meno strada” col mouse.

Adesso possiamo aprire rapidamente le nostre soluzioni in Expression Blend tramite Tools / Expression Blend.

Grafici con WPF e LINQ

Leonardo — Mon, 10 Nov 2008 13:50:00 GMT

Un problema molto comune durante lo sviluppo di applicazioni è la visualizzazione dei dati. Windows Presentation Foundation non fornisce grafici già pronti e sebbene esistano diversi controlli gratuiti di terze parti vedremo passo passo come costruirne uno “from scratch” (da zero).

Leggi l'articolo completo