Downloaded 121 times
![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;
}
}](https://image.slidesharecdn.com/introduzionewpf-120411051117-phpapp01/75/Introduzione-WPF-31-2048.jpg)
![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.](https://image.slidesharecdn.com/introduzionewpf-120411051117-phpapp01/75/Introduzione-WPF-39-2048.jpg)
More Related Content
Introduzione WPF
- 1.
- 2. Obiettivi • WPF saperecos’è • 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 WPFe 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 WPFe caratteristiche • Matrice comparativa caratteristiche WPF vs altre tecnologie
- 6. Programmazione e architetturaWPF • 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 architetturaWPF • 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 architetturaWPF • 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 architetturaWPF • 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 architetturaWPF • 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 architetturaWPF • 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à dipendentie 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à dipendentie 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à dipendentie 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à dipendentie 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à dipendentie 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à dipendentie 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à dipendentie 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 LayoutWPF • 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 LayoutWPF • 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 LayoutWPF • 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 LayoutWPF • 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 applicazioniWPF • 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 applicazioniWPF – 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 sviluppoWPF (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 patternMVVM • 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 patternMVVM • 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 patternMVVM • 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 patternMVVM • 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 patternMVVM • 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 patternMVVM • 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 patternMVVM • 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 ecomandi 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 ecomandi 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 ecomandi 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 ecomandi 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 eDocumenti • 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 eDocumenti • 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 esvantaggi • 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)