Presentazione di introduzione a Windows Presentation Foundation

1. Introduzione WPF

2. Obiettivi
• WPF sapere cos’è
• Acquisire un primo livello di conoscenza delle
caratteristiche e funzionalità della nuova tecnologia di
presentazione WPF

3. Scaletta
• Definizione di WPF e caratteristiche
• Programmazione e architettura WPF
• XAML, Proprietà dipendenti e Eventi instradati
• Controlli e Layout WPF
• Tipologia di applicazioni WPF
• Processi di sviluppo WPF (workflow)
– User Experience & Microsoft Workflow
– Binding e pattern MVVM
• Stili e Template
• Gestione input e comandi WPF
• Grafica, Animazione e Multi Media
• Testo, tipografia e Documenti
• WPF vantaggi e svantaggi
• Risorse

4. Definizione di WPF e caratteristiche
• WPF è il sistema di presentazione di ultima generazione per lo sviluppo di applicazioni
Windows. Con WPF si possono costruire due tipi di applicazioni:
– Applicazioni Windows standalone (classiche)
– Applicazioni Windows ospitate dal Browser (standalone ma all’interno del browser, una sorta di click once
evoluto)
• Il core di WPF è basato su un motore di rendering vettoriale al fine di sfruttare al
massimo l’hardware grafico moderno.
• La libreria WPF si compone quindi di una serie di caratteristiche e strumenti per lo
sviluppo di applicazioni le cui principali:
– XAML (Extensible Application Markup Language)
– Data Binding
– Layout
– Grafica 2D/3D
– Stili,Temi e Template
– Documenti e multimedia
– Testo e tipografia

5. Definizione di WPF e caratteristiche
• Matrice comparativa caratteristiche WPF vs altre tecnologie

6. Programmazione e architettura WPF
• Per il programmatore WPF è un insieme di tipi .NET© collocati per la maggior parte nel
namespace System.Windows.
• Gli aspetti che introducono una significativa innovazione per cui è necessario acquisire
familiarità ed esperienza sono:
– Il linguaggio di markup dichiarativo XAML
– Le proprietà dipendenti (Dependency Properties)
– Gli eventi instradati (Routed Events)

7. Programmazione e architettura WPF
• L’interfaccia primaria di programmazione di WPF è costituita da codice gestito .NET.
• I moduli principali che compongono WPF sono il
PresentationFramework e il PresentationCore
entrambi gestiti, mentre milcore è scritto in codice
non gestito.
• Milcore è un modulo di codice non gestito
per ragioni di performance e accoppiamento
con la libreria DirectX per garantire un
rendering efficiente della grafica.

8. Programmazione e architettura WPF
• In WPF di solito parlando degli oggetti che compongono la UI si fa riferimento ad
elementi (simili al concetto di controlli Windows.Forms).
• Tutti gli oggetti di interfaccia in WPF estendo la classe UIElement che estende a sua
volta la classe Visual, mentre la maggioranza dei controlli sono FrameworkElement.
(Vedi diagramma classi WPF)
• Ad esempio in WPF un TextBox è:
– Un Control che rappresenta la classe base per gli elementi di interfaccia utente (UI), questi utilizzano un
modello di controllo (ControlTemplate) per definire il proprio aspetto.
– Un FrameworkElement , che contiene un super insieme di proprietà eventi e metodi degli elementi standard
del framework WPF.
– Un UIElement che definisce le caratteristiche base di presentazione di un elemento UI.
– Un Visual che provvede il supporto per il rendering WPF.
– Un DependencyObject, un oggetto che supporta proprietà dipendenti.
– Un DispatcherObject, un oggetto associato ad un dispatcher per la notifica cross-thread di eventi.

9. Programmazione e architettura WPF
• L’architettura WPF riscrive completamente l’approccio al rendering della UI rispetto alla
precedente tecnologia Windows.Forms/GDI+.
• Ogni elemento grafico WPF è un Visual, la classe Visual fornisce il supporto per la definizione
dell’albero degli oggetti visuali, questo albero contiene una struttura gerarchica delle
istruzioni e metadati che determinano come queste ultime devono eseguire il rendering
della UI.
• In pratica per ogni gerarchia di elementi WPF (definita con XAML o programmaticamente)
corrispondente una gerarchia di oggetti visuali, la gerarchia WPF visuale è il punto di partenza
per il sistema di composizione WPF e rappresenta il punto di collegamento tra le funzioni
gestite .NET e la libreria milcore non gestita.

10. Programmazione e architettura WPF
• Il core (milcore) processa i nodi dell’albero visuale (Composition nodes) per visualizzare
l’interfaccia grafica. Ogni nodo contiene un istruzione grafica. Un aspetto importante è che l’albero
degli elementi e l’albero visuale sono totalmente disaccopiati attraverso un protocollo di
messaggi.
• Ogni elemento visuale può creare uno, nessuno o più nodi di composizione.
• Un aspetto davvero innovativo di WPF è che l’abero visuale è memorizzato (cached), in pratica
il motore di rendering disegna l’interfaccia grafica ad una frequenza elevata ed indipendente dalla
composizione dell’albero degli elementi, questo rende le applicazioni WPF più reattiva dal punto di
vista grafico.
• E’ importante capire anche la differenza del sistema di composizione tra WPF e GDI, in GDI
quando un componente deve essere disegnato riceve un evento e gli viene fornito una regione di
visualizzazione (clipping region), l’elemento quindi è responsabile di disegnare nella finestra
fornita, quindi non succederà mai che un singolo pixel dipenda graficamente da più elementi.

11. Programmazione e architettura WPF
• In WPF invece viene usato un nuovo algoritmo derivato dai sistemi grafici avanzati, denominato
l’algoritmo del pittore, in questo algoritmo ad ogni elemento, da dietro verso avanti, viene chiesto
di disegnarsi, così il sistema grafico WPF determina il colore di ciascun pixel come il risultato
scalare del rendering di tutti gli oggetti, quindi ad esempio un elemento WPF può avere parti
parzialmente o totalmente trasparenti.
• Il sistema grafico di WPF quindi permette di progettare e visualizzare UI con un aspetto grafico più
accattivante e spinto rispetto al passato, mentre l’utilizzo della tecnologia DirectX abbinata al più
moderno hardware garantiscono tempi di risposta accettabili.
• Infine è importante capire che ogni elemento non disegna fisicamente la UI ma partecipa alla
definizione di un modello ad oggetti, l’albero visuale, che viene poi processato dal sistema grafico,
questo approccio è quindi strutturato e dichiarativo. In altre parole, l’elemento WPF in fase di
“disegno” non produce istruzioni su come disegnare (GDI) ma indica cosa disegnare.

12. XAML, Proprietà dipendenti e Eventi instradati
• XAML è un linguaggio di markup dichiarativo attraverso il quale si descrive
l’apparenza di un applicazione WPF. (Aprire VS 2010 e creazione Esercizio 1)
• Il modello di programmazione WPF risulta familiare ai programmatori ASP.NET in
quanto per ogni componente della UI le logiche vengono divise in due file, il file XAML
(.aspx in ASP.NET) e il file di codice sorgente (code-behind) che contiene la logica di
comportamento.
• Questo permette di separare le responsabilità e disaccoppiare apparenza e
comportamento della UI.
• Essendo uno standard strutturato basato su XML, l’XAML è processabile da
applicazioni esterne costruite specificamente per l’implementazione dell’apparenza
dell’applicazione (vedi Expression Blend di Microsoft).
• L’XAML possiede molte estensioni che permettono di esprimere in modo dichiarativo
operazioni anche complesse sul modello ad oggetti rappresentante la UI.

13. XAML, Proprietà dipendenti e Eventi instradati
• Creare una nuova applicazione WPF
• Osservare MainWindow.xaml e MainWindow.xaml.cs
• Aggiungere un bottone via XAML
– <Button Name="button" Click="bu tton_Click">Click Me!</Button>
• Implementare il metodo
– MessageBox.Show("Hello, Windows Presentation Foundation!");
• Provare il programma

14. XAML, Proprietà dipendenti e Eventi instradati
• Come viene elaborato l’XAML?
– Un motore carica a runtime lo XAML, lo interpreta e genera a gli oggetti che sono rappresentati dalla
descrizione strutturata.
• Per programmare in WPF è necessario l’XAML?
– No. Infatti ogni sorgente XAML è traducibile nel corrispondente codice che istanza il modello ad oggetti da
esso rappresentato (simile a quello che fa il designer di Windows.Form). Vedi Esercizio 1A.

15. XAML, Proprietà dipendenti e Eventi instradati
• In WPF la maggioranza delle proprietà dei controlli hanno una particolare
caratteristica, sono proprietà dipendenti (Dependency properties) le proprietà
dipendenti sono di tipo DependencyProperty.
• Le proprietà dipendenti supportano le seguenti caratteristiche:
– Change notification
– Animation
– Property value inheritance
– Data binding
– Multiple property value providers
• Le proprietà dipendenti possono essere dichiarate solo all’interno di oggetti di tipo
DependencyObject, quasi tutte le classi WPF sono DependencyObject. (Vedi
diagramma classi WPF)
• Le proprietà dipendenti vanno utilizzate tutte le volte che si creano User o Custom
Control WPF.

16. XAML, Proprietà dipendenti e Eventi instradati
• Creare una nuova applicazione WPF
• Modificare MainWindow.xaml aggiungendo un DockPanel, che contiene un TextBlock
al cui contenuto mettiamo una stringa di testo.
• Provare a modificare la proprietà FlowDirection del DockPanel, verificare cosa
succede nella proprietà FlowDirection del TextBlock.
• Impostare la proprietà DockPanel.Dock=«Top» sul TextBlock, e copiarlo varie volte.
• Giocare aggiungendo altri TextBlock, personalizzare FlowDirection su alcuni di questi
TextBlock.

17. XAML, Proprietà dipendenti e Eventi instradati
• Gli eventi instradati (RoutedEvents) sono una versione più «ricca» dei classici eventi
Windows.Forms, come indica la loro definizione. Questi eventi supportano
l’instradamento secondo regole configurabili verso più gestori (handler) all’interno
dell’albero degli elementi.
• Le strategie di instradamento (routing) degli eventi instradati sono 3:
– Bubbling: L’evento viene invocato sui gestori dell’elemento sorgente quindi sui gestori dell’elemento padre e
così di seguito, in modo gerarchico, fino a raggiungere la radice degli elementi.
– Direct: Solo la sorgente può invocare i gestori in risposta all’evento, questo approccio è quello standard di
Windows Form.
– Tunnelling: L’evento viene invocato sui gestori dell’elemento radice quindi viene instradato agli elementi figli
fino a raggiungere l’elemento che ha generato l’evento.
• In WPF gli eventi di input sono sempre gestiti come coppia di eventi Tunneling più
Bubbling, il primo detto anche di anteprima (preview).

18. XAML, Proprietà dipendenti e Eventi instradati
• Creare una nuova applicazione WPF
• Modificare MainWindow.xaml aggiungendo uno StackPanel con 3 bottoni Yes, No e
Cancel.
• Aggiungere un evento Click sul bottone Yes e visualizzare un message box con il
nome della sorgente.
– Provare il programma
• Aggiungere un evento Click sullo StackPanel e visualizzare un message box con il
nome della sorgente.
– Provare il programma
• Aggiunere un evento sul bottone No, visualizzare un message box con il nome
della sorgente, segnare come gestito l’evento.
– Provare il programma
• Notare in debug le proprietà dell’evento e la strategia di instradamento.

19. Controlli e Layout WPF
• In WPF con il termine controlli si indica una qualsiasi classe che può essere contenuta
in una finestra o una pagina, ha un interfaccia utente, e implementa qualche tipo di
funzionalità.
– Non vale quindi la regola per cui tutte le sotto-classi della classe Control sono controlli (come Windows Form)
(Vedi diagramma delle classi)
• I controlli WPF si possono sostanzialmente suddivedere in 3 gruppi logici
– Controlli individuali (Individuals controls), sono tutti i controlli standard, ad esempio Button, Label, TextBox
…
– Controlli di elementi (Items controls), sono tutti i controlli usati per contenere e presentare un elenco
omogeneo di elemeti, ad esempio ListBox, Menu, TreeView …
– Controlli di impaginazione (Layout controls), sono tutti i controlli contengono una collezione di controlli di
qualsiasi tipo e implementano logiche per la loro disposizione visuale, ad esempio Grid, StackPanel, Canvas
…
• Comparazione controlli WPF / Windows Forms
– http://msdn.microsoft.com/it-it/library/ms750559.aspx

20. Controlli e Layout WPF
• Creare una nuova applicazione WPF
• Creare un interfaccia con un menu principale e il comando Esci che chiude
l’applicazione (DockPanel)
– Riferimenti
• http://msdn.microsoft.com/it-it/library/ms754152.aspx#Panels_nested_panel_elements (Panel Overview)
• http://msdn.microsoft.com/it-it/library/ms747430.aspx (Menu Overview)

21. Controlli e Layout WPF
• Creare una nuova window e implementare una treeview (Grid, GridSplitter, TreeView)
– Riferimenti
• http://msdn.microsoft.com/en-us/library/system.windows.controls.gridsplitter.aspx (GridSplitter)
• http://msdn.microsoft.com/en-us/library/ms750972.aspx (ListView Overview)

22. Controlli e Layout WPF
• Creare una nuova window con grid e implementare i seguenti controlli (Grid,
StackPanel, Button …)
– Bottone con immagine e testo
• http://msdn.microsoft.com/it-it/library/system.windows.controls.stackpanel.aspx
• http://msdn.microsoft.com/en-us/library/system.windows.controls.image.aspx
– Numeric Up Down
• http://msdn.microsoft.com/it-it/library/system.windows.controls.primitives.repeatbutton.aspx

23. Tipologia di applicazioni WPF
• Il modello applicativo WPF prevede due tipologie principali di applicazioni:
– Applicazione Standalone, classica applicazione Windows, la classe di partenza dell’applicazione Standalone
è la classe Windows. La Window è attivabile in modalità modale (Show()) o non-modale (ShowDialog()).
– Wpf provvede alcune form modali preconfezionate quali MessageBox, OpenFileDialog, SaveFileDialog, and
PrintDialog.

24. Tipologia di applicazioni WPF
– Applicazione contenuta nel browser (Browser-Hosted Applications) anche detta XAML browser applications
(XBAPs), si compone di due oggetti principali, le pagine (Page) e le funzioni di pagina (PageFunction<T>)
che è possibile navigare attraverso collegamenti.
– Le applicazioni XBAPs possono essere eseguite in Interne Explorer 6+, girano nell’ambito di una SandBox
(limitazione accesso sistema) e solo su client con .NET Framework installato.

25. Processi di sviluppo WPF (workflow)
• Chiaramente una delle filosofie cardini di WPF è la separazione tra l’aspetto della UI
e il suo comportamento.
• Dietro a questa filosofia sono stati costruiti modelli di processo e pattern per la
progettazione e la realizzazione di un applicazione WPF.
• Di particolare interesse sono:
• Nel workflow proposto da Microsft per lo sviluppo di applicazioni la User Experience
è il cardine della realizzazione, fanno parte del processo la suite di prodotti di
Expression Studio, studiata appositamente per curare la parte grafica di un
applicazione Windows e interfacciarsi alla tecnologia WPF con XAML.
• Il pattern MVVM (Model – View - ViewModel) permette di isolare completamente
l’aspetto della UI dal comportamento trasferendo lo stato e il comportamento della UI
su un oggetto separato e utilizzando le potenzialità di binding di WPF e XAML.

26. User Experience & Microsoft Workflow
• Il workflow di sviluppo proposto da Microsoft per applicazioni WPF è il seguente

27. User Experience & Microsoft Workflow
• Visual studio 2010 copre la fase di sviluppo, mentre la fase di prototipazione e la
grafica è supportata da Expression Studio con, in particolare, Expression Blend 4
(4) e SketchFlow, integrato in quest’ultimo (3)
• La suite di Expression Studio è composta da:
• Expression Blend per creare UI in WPF/Silverlight.
Fa da ponte fra il designer e lo sviluppatore. Può
lavorare su soluzioni Visual Studio.
• Expression Design versione leggera di Adobe
Illustrator per creare e modificare grafica vettoriale.
• Expression Media per codificare, modificare,
arricchire file video e ottimizzare video stream per
Silverlight
• Expression Web html e Javascript editor evoluto.
Sostituisce il precedente Frontpage.

28. User Experience & Microsoft Workflow
• Aprire l’ultimo progetto (esercizio 4) con Expression Blend 4
• Fare delle modifiche all’interfaccia grafica
• Provare l’applicazione modificata
• Provare alcuni esempi di UI Expression Blend 4

29. Binding e pattern MVVM
• WPF fornisce un meccanismo per il collegamento bidirezionale dei dati fra l’interfaccia
e il modello ad oggetti collegato.
• Il Data Binding Engine del WPF si occupa di:
– Copiare i dati modificati dall’oggetto del modello verso i controlli
– Trasferire i dati modificati dai controlli verso il modello ad oggetti
• Gli attori nel processo di binding WPF sono la UI (Binding Target), il modello ad oggetti
(Binding Source), le proprietà della UI (Dependency Property), le proprietà del modello
ad oggetti (Property) ed infine l’oggetto che contiene le informazioni di binding (Binding
Object)

30. Binding e pattern MVVM
• XAML prevede un estensione che permette descrivere i data binding attraverso
opportune estensioni del linguaggio di markup. Vediamolo in pratica.
• Creare una nuova applicazione WPF, implementare sulla MainWindow una UI per
richiedere il Cognome, Nome di una persona, ed un pulsante denominato Conferma.
• Creare un corrispondente modello con le proprietà Cognome e Nome che poi
collegheremo all’interfaccia per mezzo del motore di Data Binding.
public class Anagrafica
{
public string Cognome { get; set; }
public string Nome { get; set; }
}

31. Binding e pattern MVVM
• Nel costruttore della Window istanziare l’anagrafica e assegnarla alla proprietà
DataContex, definire i Data Binding nel formato base «{Binding [Nome_Property]}»
sulla Proprietà Text dei controlli TextBox.
• Implementare il gestore del bottone conferma che deve visualizzare «Il nominativo
della persona confermato è: [Cognome] [Nome]», il nominativo deve essere letto
dall’Anagrafica.
• Provare l’applicazione.
public partial class MainWindow : Window
{
readonly Anagrafica m_anagrafica;
<TextBox … Text="{Binding Cognome}"/>
public MainWindow() <TextBox … Text="{Binding Nome}"/>
{
InitializeComponent();
m_anagrafica = new Anagrafica();
DataContext = m_anagrafica;
}
}

32. Binding e pattern MVVM
• Nell’esempio visto il binding definito con il markup «{Binding Cognome}» è l’utilizzo più
semplice dell’estensione XAML e indica la definizione di un Binding bidirezionale verso
la proprietà Cognome del oggetto assegnato al DataContext corrente (DataContext
assegnato alla root della struttura di elementi, in questo caso la Window – Il
DataContext è definito a livello della classe FrameworkElement).
• WPF e conseguentemente XAML supporta varie estensioni e parametri di Binding
alcuni principali sono:
– Direzione: OneWay, TwoWay (default), OneWayToSource
– Momento: Proprietà UpdateSourceTrigger
– Percorso: Proprietà Path (default)
– Conversione: DataConverter implementando IValueConverter
– Collezioni: Collection Views
– Validazione: Data Validation

33. Binding e pattern MVVM
• Come fa la UI a sapere quando una proprietà o un elemento di una collezione cambia
sul modello a seguito di un operazione che modifica lo stato di quest’ultimo?
• In realtà il modello di Binding WPF è basato su un noto pattern OOP detto Model
Supervisor, dove l’oggetto o la collezione è responsabile di notificare le modifiche
avvenute al suo stato interno che determinano una modifica sulle proprietà pubbliche o
sulla collezione.
• In WPF perché un oggetto o una collezione comunichi i suoi cambiamenti deve
implementare rispettivamente le seguenti interfacce definite nel namespace
System.ComponentModel :
– INotifyPropertyChanged
– INotifyCollectionChanged (Classe implementazione: ObservableCollection<T>)
• Entrambe le interfacce hanno un contratto relativamente semplice:
– L’evento PropertyChanged (su INotifyPropertyChanged) generato quando il valore di una proprietà è cambiato,
l’evento CollectionChanged (su INotifyCollectionChanged ) generato quando lo stato della collezione è cambiato.

34. Binding e pattern MVVM
• Normalmente la UI non ha una corrispondenza 1 ad 1 con il modello, tranne che nei
casi più semplice, lo stato della UI può contenere diverse varianti, come campi
calcolati, informazioni sulla validazione, attributi dipendenti dallo stato del modello o di
un operazione.
• Il pattern MVVM o Model – View – ViewModel affronta questo problema introducendo
un nuovo livello denominato ViewModel che non è nient’altro che un modello ad
oggetti che contiene lo stato della UI e che effettua il collegamento fra la UI e il
modello.
• Inoltre il ViewModel (e opzionalmente il Model) sono Model Supervisor notificando il
cambiamento dello stato delle proprietà alla UI.

35. Binding e pattern MVVM
• Trasformare l’applicazione all’esercizio 5 in un applicazione MVVM applicando le
seguenti varianti:
– Aggiungere un campo in sola lettura Nominativo
– Il campo nominativo è l’unione di Cognome + Nome ed è una proprietà del ViewModel
– Creare un ViewModel denominato AnagraficaVm, incapsulare il modello, esporrre Cognome, Nome,
Nominativo.
– Effettuare il binding di Nominativo.
– Implementare INotifyPropertyChanged su AnagraficaVm e notificare il cambio della proprietà Nominativo
quando Cognome o Nome vengono modificati.
– Cambiare il trigger del binding Cognome e Nome su Changed.
– Cambiare il message box su conferma utilizzando il campo Nominativo su AnagraficaVm.
– Cambiare il DataContext della Window.
• Provare l’applicazione e verificare che il binding sia funzionante e quindi il pattern
MVVM sia implementato correttamente.
• Anche per i controlli che rappresentano comandi possono usare il binding,
implementando una proprietà sul ModelView di tipo ICommand e collegandola alla UI.
(Vedere esercizio 5B)

36. Stili e Template
• La composizione degli elementi WPF permette di applicare effetti grafici spinti e
accattivanti sugli elementi di UI.
• Gli effetti si ottengono attraverso la definizione di determinati attributi su ciascun
elemento di UI.
• L’applicazione di determinati attributi può essere raggruppata in stili e lo stile applicato
su una tipologia di elemento WPF come ad esempio un controllo. (Quest’approccio è
simile alla gestione degli stili WEB tramite la definizione di CSS.)
• Creare un applicazione WPF, e aggiungere due bottoni, sul secondo applicare i
seguenti attributi:
– Background="Orange" FontStyle="Italic" Padding="8,4" Margin="4“
• Creare uno stile nella sezione resources della finistra.
– <Window.Resources> <Style x:Key="myStyle" TargetType="Button"> <Setter Property="Background"
Value="Orange" /> … </Style> </Window.Resources>
• Assegnare sul primo bottone lo stile
– <Button Style="{StaticResource myStyle}"… />
• Lo stile può essere ereditato creando delle sottoclassi
– <Style x:Key="boldStyle" BasedOn="{StaticResource myStyle}" TargetType="Button"
– > <Setter Property="FontWeight" Value="Bold" /> </Style>

37. Stili e Template
• Gli elementi che compongono i controlli WPF sono separati in logic e template,
quest’ultimo definisce come un controllo deve essere presentato.
• Ogni controllo ha un default template che definisce l’apparenza standard. Per
convenzione è definito da uno stile identificato dalla proprietà DefalStyleKey
disponibile per ogni controllo.
• Il template è definito da dependency property chiamata Template, impostandola è
possibile sostituire l’apparenza (visual tree) del controllo.

38. Stili e Template
• Creare un applicazione WPF con due bottoni sul secondo si modificherà il template.
• Definire uno stile che modifica il template del controllo.
– <Style x:Key="DialogButtonStyle" TargetType="Button"> <Setter Property="Template"> <Setter.Value>
<ControlTemplate TargetType="{x:Type Button}"> <Grid> <Ellipse Fill="{TemplateBinding Background}"
Stroke="{TemplateBinding BorderBrush}"/> <ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>
• Applicare lo stile al secondo bottone
• Notare l’elemento ContentPresenter questo rappresenta un placeholder per il disegno
del contenuto.
• Usando l’attributo ContentSource è possibile modificare la sorgente del
ContentPresenter rispetto alla proprietà di default Content
• Provare a commentare il ContentPresenter e vedere cosa succede

39. Stili e Template
• I Data templates sono un meccanismo molto simile ai template per i controlli, ma si
applicano agli elementi di controlli che contengono collezioni di elementi.
• Creare un applicazione con un Mv che possiede una property Photo[] Photos che
ritorna un elenco di immagini presenti sul disco locale. (es:
Directory.GetFiles(@"C:UsersPublicPicturesSample Pictures")
• Assegnare al DataContext della finestra principale l’Mv così definit e creare un ListBox
e bindare la property ItemsSource su Photos.
• Provare l’applicazione si vede un semplice elenco di nomi di file.
• Creiamo un DataTemplate così definito
– <DataTemplate DataType="{x:Type Esercizio9:Photo}"> <Border Margin="3"> <Image Source="{Binding
ImagePath}"/> </Border> </DataTemplate>
• In questo modo vengono presentate le immagini invece che le foto
• Provare a modificare template di ListBox e DataTemplate per aggiungere nuovi aspetti
di presentazione.

40. Gestione input e comandi WPF
• In WPF l’iterazione con l’utente viene gestito principalmente attraverso due concetti
importanti:
– Input
– Comandi
• Input (Links MSDN Input Overview)
• WPF provvede una API potente per la gestione dell’input da vari dispositivi quali
mouse, tastiera e pennino.
• Gli eventi di tastiera sono eventi di tipo Tunneling + Bubbling, il primo evento è detto
anche Preview e permette agli oggetti che compongono la UI, partendo dalla radice, di
filtrare eventi associati alla tastiera.
• La classe Keyboard e la classe Mouse provvedono un accesso ad alto livello allo stato
della tastiera e del mouse.
• Ecco alcuni esempi:
if (Mouse.LeftButton == MouseButtonState.Pressed) { … }
if ((Keyboard.GetKeyStates(Key.Return) & KeyStates.Down) > 0) { … }

41. Gestione input e comandi WPF
• WPF Fornisce anche un evento di “alto livello” denominato TextInput, questo evento
rappresenta l’input testuale in arrivo da una periferica, l’evento quindi permette di
processare il testo in un approccio indipendente dal dispositivo.
• Il testo infatti può arrivare da dispositivi diversi dalla tastiera, come ad esempio da un
sistema di riconoscimento vocale, o un dispositivo di scrittura.
• Inoltre WPF fornisce una serie di funzionalità per gestire tocco e manipolazione attuati
attraverso dispositivi, tipicamente monitor, che supportano il tocco o il multi-tocco.

42. Gestione input e comandi WPF
• Comandi (Links MSDN Commanding Overview)
• Il comando in WPF rappresenta la richiesta di esecuzione di un operazione che
tipicamente può arrivare da più dispostivi di input e/o da più punti dell’applicazione.
• Il comando in WPF è rappresentato da un contratto definito dall’interfaccia ICommand
• Icommand è un interfaccia relativamente semplice e si costituisce di due metodi e di
un evento: CanExecute, Execute e CanExecuteChanged.
• Come è intuibile CanExecute è un metodo che ritorna il valore logico true se il
comando può essere eseguito, Execute esegue il comando, ed infine
CanExecuteChanged notifica che lo stato di esecuzione del comando è cambiato.

43. Gestione input e comandi WPF
• Normalmente la logica di esecuzione del comando è coerente su tutta l’applicazione
ma può essere personalizzata in base a differenti destinatari del comando. (Si pensi ad
esempio a comandi quale copia & incolla)
• WPF mette a disposizione un set predefinito di comandi che può essere usato per le
implementazioni standard.
• Creare un applicazione che gestisce l’evento paste per un textbox.
• Per fare questo possiamo creare un menu il cui comando è bindato con
“ApplicationCommands.Paste” e quindi inserire un TextBox nell’applicazione.
• Verificare il funzionamento della gestione del comando, come si può vedere viene
gestita correttamente l’abilitazione e l’esecuzione del comando.

44. Grafica, animazione, multimedia
• WPF esprime il massimo della sua potenzialità nell’ambito della grafica, dei processi di
animazione e del supporto multimediale.
• Per quanto riguarda la grafica WPF fornisce una serie di caratteristiche per il supporto
avanzato di grafica vettoriale 2D e di grafica 3D.
• Alcune delle potenzialità della grafica WPF sono riassunte nella sezione Graphics
dell’introduzione a WPF sul sito MSDN
– http://msdn.microsoft.com/en-us/library/aa970268.aspx#Graphics
• L’animazione WPF permette di creare effetti dinamici sui controlli che compongono l’UI
quali ingrandimento, movimento, rotazione e dissolvenza.
– http://msdn.microsoft.com/en-us/library/aa970268.aspx#Animation
• WPF inoltre fornisce un ricco supporto per i contenuti multimediali quali immagini,
video e file audio.
– http://msdn.microsoft.com/en-us/library/aa970268.aspx#Media

45. Testo, tipografia e Documenti
• WPF fornisce una serie di funzionalità per supportare il disegno del testo quali
– Supporto OpenType e ClearType
– Accellerazione Hardware
– Integrazione testo con contenuti multimediali
– Supporto internazionale
• Qui di seguito alcuni esempi delle potenzialità di WPF per la decorazione del testo
• Per maggiori dettagli sulla tipografia in WPF vedere questo pagian MSDN
– http://msdn.microsoft.com/en-us/library/ms742190.aspx

46. Testo, tipografia e Documenti
• I documenti WPF supportati sono i documenti dinamici (flow document) i
documenti fissi e il formato XPS.
• I documenti dinamici sono ottimizzati per la visualizzazione e la lettura e adattano il
contenuto automaticamente rispetto alle dimensioni della finestra e alla risoluzione del
video.
• I fixed documento sono la soluzione WPF per la gestione di documenti WYSIWYG
ed in particolare nel rispetto della stampa. Le applicazioni tipiche sono Desktop
Publishing e Word Processing.
• XPS è il formato Microsoft per le pubblicazioni elettroniche, XPS è costruito sul
motore per i documenti fissi WPF.

47. WPF vantaggi e svantaggi
• WPF rappresenta l’evoluzione tecnologica proposta da Microsoft per lo sviluppo
di applicazioni su sistema operativo Windows, d’altra parte WPF introduce un
gran numero di concetti nuovi e complessi.
• Per ora Windows Form continuerà ad essere supportato ma è nelle corde di Microsoft
che con il tempo WPF rimpiazzerà quasi completamente lo sviluppo Windows Form
come è già avvenuto con MFC verso Windows Form.

48. Risorse
• MSDN: Getting Started (WPF)
• MSDN: WPF Architecture
• Authors: http://www.wpftutorial.net/
• Authors: http://joshsmithonwpf.wordpress.com/
• Book: MCTS Self-Paced Training Kit(Exam 70-511)