2. Hello Word

Aprire Visual Studio 2008 e scegliere "File", "Nuovo", "Progetto ..." nel menu principale. Scegliere "Applicazione WPF" come tipo di progetto.

Scegliere una cartella per il progetto e dargli un nome. Quindi premere "OK"

Visual Studio crea il progetto e aggiunge automaticamente alcuni file per la soluzione. Un Window1.xaml e un App.xaml. La struttura sembra abbastanza simile a WinForms, tranne che il file Window1.designer.cs non è più il codice, ma è ora dichiarata in XAML come Window1.xaml

Aprire il file Window1.xaml nella finestra di progettazione WPF e trascinare un pulsante e un controllo TextBox dalla Casella degli strumenti della finestra

Selezionare il pulsante e passare alla vista degli eventi nella finestra delle proprietà (clicca sulla piccola icona fulmine giallo). Fare doppio clic sull'evento "Click" per creare un metodo nel codebehind che si chiama, quando l'utente fa clic sul pulsante.

Nota: se non trovate l'icona di un giallo lampo, è necessario installare il Service Pack 1 per VisualStudio sulla vostra macchina. In alternativa è possibile due volte sul pulsante nella finestra di progettazione per ottenere lo stesso risultato.

 

Visual Studio crea automaticamente un metodo nel file code-behind che viene chiamato quando il pulsante viene premuto.


private void button1_Click (object sender, RoutedEventArgs e)
{
TextBox1.Text = "Ciao WPF!";
}


La casella di testo è diventato automaticamente assegnato il nome textBox1 dal designer WPF. Testo testo presentato a "Ciao WPF!" quando il pulsante viene premuto e abbiamo finito! Avviare l'applicazione da premere [F5] della tastiera.

Logical- and Visual Tree

Introduzione
Elementi di una interfaccia utente WPF sono collegate gerarchicamente. Questa relazione si chiama LogicalTree. Il modello di un elemento è costituito da più elementi visivi. Questo albero è chiamato VisualTree. WPF differisce tra i due alberi, perché per alcuni problemi è necessario solo gli elementi logici e per altri problemi si desidera che tutti gli elementi.

<Window>
<Grid>
<label Content="Label" />
<Button Content="Button" />
</ Grid></ Window>

Perché abbiamo bisogno di due diversi tipi di alberi?
Un controllo WPF è costituito da più, controlli più primitivo. Un tasto - per esempio - è costituito da un bordo, un rettangolo e un presentatore contenuto. Questi controlli sono figli visivo del pulsante.
Quando WPF rende il pulsante, lo stesso elemento non ha l'aspetto, ma si scorre l'albero visuale e rende i bambini visivo di esso. Questa relazione gerarchica può essere utilizzato anche per fare hit testing, layout, ecc
Ma a volte non siete interessati ai confini e rettangoli di un modello di un controllo '. Particolarmente perché il modello può essere sostituito, e quindi non dovrebbe riguardare la struttura ad albero visuale! A causa di ciò si vuole un albero più robusto che contiene solo i "veri" controlli - e non tutte le parti modello. E questo è l'idoneità per l'albero logico.
L'albero logico
L'albero logico descrive le relazioni tra gli elementi dell'interfaccia utente. L'albero logico è responsabile per:
• Eredita valori DependencyProperty• Risoluzione DynamicResources riferimenti• Ricerca di nomi di elementi per le associazioni• RoutedEvents Forwaring

Il Visual Tree
La struttura ad albero visuale contiene tutti gli elementi logici compresi tutti gli elementi visivi del modello di ogni elemento. La struttura visiva è responsabile di: • Elementi di rendering visivo• Propaga opacità elemento• Propaga Layout e RenderTransforms• Propagare la proprietà IsEnabled.• Do Hit-Testing• RelativeSource (FindAncestor)

Trova un antenato di programmazione in Visual Tree
Se sei un elemento figlio di una interfaccia utente e si desidera accedere ai dati da un elemento padre, ma non sai quanti livelli fino Elemens che è, è la migliore soluzione per navigare l'albero fino a trovare un elemento di il tipo richiesto.
Questo helper fa excactly questo. È possibile utilizzare praticamente lo stesso codice per navigare attraverso l'albero logico.

pubblico VisualTreeHelperExtensions classe statica{
public static T FindAncestor <T> (DependencyObject DependencyObject)
dove T: classe
{
DependencyObject target = DependencyObject;
fare
{
target = VisualTreeHelper.GetParent (target);
}
while (target = null & & bersaglio (è T)!);
obiettivo di rendimento come T;
}}

L'esempio seguente mostra come utilizzare l'helper. Si parte da questo e naviga la struttura visiva finché non trova un elemento di rete tipo. Se il soccorritore raggiunge l'elemento radice dell'albero, restituisce null.

var grid = VisualTreeHelperExtensions.FindAncestor <Grid> (this);

Introduzione a XAML

XAML è l'acronimo di Extensible Application Markup Language. Il suo un linguaggio semplice basato su XML per creare e inizializzare. NET con relazioni gerarchiche. Anche se è stato originariamente inventato per WPF può da utilizzare per creare qualsiasi tipo di alberi dell'oggetto.
Oggi XAML viene utilizzato per creare interfacce utente in WPF, Silverlight, dichiarare workflow in WF e per la carta elettronica nello standard XPS.
Tutte le classi di WPF sono costruttori senza parametri e rendere l'uso eccessivo di proprietà. Che viene fatto per renderlo perfettamente adatto per i linguaggi XML come XAML.
I vantaggi di XAML
Tutto quello che puoi fare in XAML può essere effettuata anche nel codice. XAML ist solo un altro modo per creare e inizializzare oggetti. È possibile utilizzare WPF senza l'utilizzo di XAML. Sta a te se vuoi dichiararlo in XAML o scrivere nel codice. Dichiarare l'interfaccia utente in XAML ha alcuni vantaggi:
• codice XAML è breve e chiaro da leggere• Separazione del codice di progettazione e la logica• strumenti di progettazione grafica come Expression Blend richiedono XAML come fonte.• La separazione tra XAML e logica dell'interfaccia utente permette di separare chiaramente i ruoli di progettista e sviluppatore.
Vs codice XAML
Come esempio costruiamo un StackPanel semplice con un TextBlock e un pulsante in XAML e confrontarlo con lo stesso codice in C #.

<StackPanel>
<TextBlock Margin="20"> Benvenuti nel mondo di XAML </ TextBlock>
<Button Margin="10" HorizontalAlignment="Right"> OK </ Button></ StackPanel>

La stessa cosa espressa in C # sarà simile a questa:

/ / Crea il StackPanelStackPanel StackPanel StackPanel = new ();this.Content = StackPanel;
/ / Crea l'oggetto TextBlockTextBlock TextBlock TextBlock = new ();textBlock.Margin = Spessore nuovo (10);textBlock.Text = "Benvenuti nel mondo di XAML";stackPanel.Children.Add (TextBlock);
/ / Crea il pulsantePulsante = new Button ();button.Margin = Spessore nuovo (20);button.Content = "OK";stackPanel.Children.Add (pulsante);

Come potete vedere è la versione XAML molto più breve e più chiaro da leggere. E questo è il potere di espressività XAMLs.
Proprietà come elementi
Le proprietà sono normalmente scritte in linea come noto da XML <Button Content="OK" />. Ma cosa succede se vogliamo mettere un oggetto più complesso come contenuto, come una immagine che ha proprietà stessa o magari un pannello grigliato intero? Per fare questo possiamo utilizzare la sintassi per elementi proprietà. Questo ci permette di estrarre la proprietà come un elemento figlio.

<button>
<Button.Content>
<image Source="Images/OK.png" Width="50" Height="50" />
</ Button.Content></ Button>

Tipo di conversione implicita
Un costrutto molto potente di WPF sono convertitori di tipo implicito. Fanno il loro lavoro silenziosamente in background. Quando si dichiara una BorderBrush, la parola "Blue" è solo una stringa. Il BrushConverter implicita fa un System.Windows.Media.Brushes.Blue fuori di esso. La stessa riguarda lo spessore del bordo che sta molto bene convertito implicitamente in un oggetto spessore. WPF include un sacco di convertitori di tipi per classi incorporate, ma è possibile anche scrivere i convertitori di tipo per il vostro CLASSI proprio.

<Border BorderBrush="Blue" BorderThickness="0,10"></ Border>

Estensioni di markup
Estensioni di markup sono i segnaposto dinamico per i valori degli attributi in XAML. Risolvono il valore di una proprietà a runtime. Estensioni di markup sono surrouded da parentesi graffe (Esempio: background = "{StaticResource NormalBackgroundBrush}"). WPF ha alcuni built-in estensioni di markup, ma è possibile scrivere il vostro, derivando da MarkupExtension. Questi sono il built-in estensioni di markup:
• BindingPer associare i valori delle due proprietà insieme.• StaticResourceUna ricerca volta di una voce di risorsa• DynamicResourceL'aggiornamento automatico di ricerca di una voce di risorsa• TemplateBindingPer associare una proprietà di un modello di controllo di una proprietà di dipendenza del controllo• x: StaticRisolvere il valore di una proprietà statica.• x: NullRestituire null
Il primo identificatore all'interno di una coppia di parentesi graffe è il nome dell'estensione. Tutti gli identificatori preciding sono chiamati parametri sotto forma di proprietà = Valore. L'esempio seguente mostra l'etichetta il cui contenuto è legato al testo della casella di testo. Quando si digita un testo nella casella di testo, il testo cambia proprietà e l'estensione di markup vincolante aggiorna automaticamente il contenuto dell'etichetta.

<TextBox X:Name="textBox"/><label Content="{Binding Text, ElementName=textBox}"/>

Namespace
All'inizio di ogni file XAML è necessario includere due spazi dei nomi.Il primo è http://schemas.microsoft.com/winfx/2006/xaml/presentation. E 'mappato tutti i controlli WPF in System.Windows.Controls.Il secondo è http://schemas.microsoft.com/winfx/2006/xaml è mappato System.Windows.Markup che definisce le parole chiave XAML.
La mappatura tra un namespace XML e uno spazio dei nomi CLR è fatto l'attributo XmlnsDefinition a livello di assembly. È anche possibile includere direttamente uno spazio dei nomi CLR in XAML utilizzando il clr-namespace: prefisso.

<Finestra xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml"></ Window>

User Experience processo di sviluppo

L'esperienza dell'utente diventa un fattore chiave di successo
In passato, ci siamo concentrati principalmente sulla costruzione di prodotti che soddisfano le esigenze funzionali degli utenti. L'esperienza dell'utente è stata considerata spesso in ritardo nel processo di sviluppo. Ma oggi il cliente richiede più di un semplice prodotto di lavoro. Fornire le caratteristiche giuste è ancora il prerequisito per un buon prodotto, ma di trasformarlo in qualcosa di straordinario è necessario fornire una buona esperienza utente!
Fornire una ricca esperienza utente non è una cosa di fortuna. Ha bisogno di essere piallato, progettato e integrato nello sviluppo di un prodotto. Progettazione di una ricca esperienza utente non è solo compongono l'interfaccia utente da parte di alcuni elementi grafici e le sfumature - è un concetto molto più ampio. La sua sulla creazione di un legame emotivo tra l'utente e il software. Rende l'utente sentire bene e così gli piace continuare ad utilizzare il software.
Nuovi strumenti per i progettisti
Microsoft ha riconosciuto, dare ai team di sviluppo il potere di creare esperienze utente ricche ha bisogno di un grafico più strumento di supporto molto più VisualStudio in grado di fornire oggi. Così hanno deciso di creare una nuova suite di tool - fatto per i progettisti.
Questa suite di tool si chiama Microsoft Expression. Si compone di quattro prodotti:
Espressione • Miscela è costruito per creare interfacce utente in WPF e Silverlight. Costruisce il ponte tra designer e sviluppatori. E 'possibile aprire soluzioni VisualStudioEspressione • Il design è una versione leightweight di Adobe Illustrator per creare e modificare grafica vettoriale.• Expression Media è costruito per codificare, tagliare e arricchire i file video e ottimizzarle per Silverlight Streaming• L'espressione Web Microsoft prossima generazione di HTML e Javascript editor. La sua sostituzione per Frontpage.
Insieme sono un potente pacchetto. L'illustrazione seguente mostra un esempio di flusso di lavoro di integrazione di una immagine vettoriale che è stato creato da un designer grafico in Adobe Illustrator in un progetto WPF che fa parte di una soluzione VisualStudio.
Flusso di lavoro per lo sviluppo di un progetto WPF
Sviluppo di un'applicazione WPF con una user experience ricca richiede competenze molto più di un analista di requisiti che definisce un elenco di casi d'uso e di sviluppo che implementa il software. Devi scoprire che cosa l'utente ha bisogno davvero. Questo può essere fatto seguendo un approccio user-centered.
1. Requisiti di suscitare
Come in ogni tipo di progetti software sua importante conoscere e mettere a fuoco il bersaglio del vostro sviluppo. Si dovrebbe parlare con operatori e degli utilizzatori per scoprire le reali esigenze. Questi bisogni devono essere raffinato a funzionalità ed espressi in casi d'uso (abstract) o scenari utente (illustrativo). Priorize i compiti di rischio e l'importanza e il lavoro iterativo. Questo lavoro è svolto dal ruolo dell'ingegnere requisiti.
2. Creazione e convalida prototipo di interfaccia utente
Creazione di un prototipo di interfaccia utente è un passo importante per condividere idee tra gli utenti e gli ingegneri per creare una comprensione comune del design dell'interazione. Questo compito è in genere fatto da un interaction designer. E 'utile per disegnare solo l'interfaccia utente in modo approssimativo per evitare discussioni preliminari su dettagli di design. Ci sono diverse tecniche e gli strumenti per farlo. Alcuni di essi sono:
• Carta prototipo
Utilizzare carta e matita per disegnare schizzi dell'interfaccia utente. Senza strumenti e le infrastrutture sono necessarie. Ognuno può scrivere le loro idee sulla carta.• wireframe
Wireframe sono spesso utilizzati per disegnare il layout di una pagina. Si chiama wireframe perché basta disegnare i contorni dei controlli e delle immagini. Questo può essere fatto con strumenti come PowerPoint o VisioEspressione • 3 Blend - Portata flusso schizzo è una nuova caratteristica fredda per creare prototipi interattivi direttamente in WPF. È possibile utilizzare il sistema integrato "stile sinuose" per farlo sembrare impreciso. Il prototipo può essere eseguito in un lettore stand-alone che ha integrato un meccanismo di feedback.Prototipo • Interactive L'approccio più costoso e reale è quello di creare un (riutilizzabili) prototipo interattivo che funziona come applicazione vera e propria, ma con dati fittizi.
Si raccomanda vivamente di testare il tuo prototipo di interfaccia utente su utenti reali. Questo vi aiuta a scoprire e affrontare i problemi di progettazione nelle prime fasi del processo di sviluppo. Le seguenti tecniche sono molto popolari per valutare prototipi di interfaccia utente: • Walktrough
Un walktrough di solito è fatto presto in un progetto con wireframe o prototipi di carta. L'utente riceve un compito da risolvere e che controlla il prototipo toccando sulla carta. Il leader di prova che presenta un nuovo documento che mostra lo stato dopo l'interazione.
• Laboratorio di Usabilità
Per fare un laboratorio di usabilità, è necessario un computer con un software di cattura schermo e una telecamera. Il probando ottiene un compito da fare e le esigenze e ingegnere interazione guardarlo fare questo. Non dovrebbero parlare con lui per sapere dove si blocca e perché.

3. Implementare la logica di business e interfaccia utente Raw
4. Integrare il design grafico
5. Test del software
Ruoli
Buliding una moderna interfaccia utente con un'esperienza utente ricca richiede competenze aggiuntivi da parte del team di sviluppo. Queste abilità sono descritte come ruoli che possono essere distribuiti tra i popoli nel vostro team di sviluppo.

• DeveloperLo sviluppatore è responsabile per implementare la funzionalità dell'applicazione. Egli crea il modello di dati, implementa la logica di business e fili fino ad una semplice visione.
• Designer graficoLa progettazione grafica è responsabile di creare un concetto grafico e costruire risorse grafiche, come icone, loghi, modelli 3D o combinazioni di colori. Se il progettista grafico ha familiarità con gli strumenti Microsoft Expression crea direttamente stili e modelli di controllo.
• Interaction Designer
L'interaction designer è responsabile per il contenuto e il flusso di un interfaccia utente. Egli crea wireframe o schizzi interfaccia utente di condividere le proprie idee con la squadra o cliente. Egli dovrebbe convalidare il suo lavoro facendo walktroughs o storyboard.
• Integrator
L'integratore è l'artista tra il designer e il mondo degli sviluppatori. Prende il patrimonio della progettazione grafica e li integra l'interfaccia utente grezzo dello sviluppatore. Questo ruolo ha bisogno di una rara serie di competenze e quindi è spesso difficile trovare la persona giusta per questo.

1. Introduzione WPF

WPF combina interfacce utente dell'applicazione, grafica 2D, grafica 3D, documenti e multimediali in un unico framework. Il suo motore di rendering vettoriale utilizza l'accelerazione hardware delle moderne schede grafiche. Questo rende l'interfaccia utente più veloce, scalabile e indipendenti dalla risoluzione.
L'illustrazione seguente fornisce una panoramica delle principali novità di WPF:

 
Separazione di aspetto e il comportamento WPF separa l'aspetto di un'interfaccia utente dal suo comportamento. L'aspetto è generalmente specificato nel Extensible Application Markup Language (XAML), il comportamento è implementato in un linguaggio di programmazione gestito come C # o Visual Basic. Le due parti sono legate insieme da associazione dati, eventi e comandi. La separazione di aspetto e il comportamento porta i seguenti benefici:
• Aspetto e comportamento sono debolmente accoppiati• I progettisti e gli sviluppatori possono lavorare su modelli separati.• strumenti di progettazione grafica in grado di lavorare su semplici documenti XML invece di codice di analisi.

Rich composizione

Controlli in WPF sono estremamente componibile. È possibile definire quasi tutti i tipi di controlli come contenuto di un altro. Questa flessibilità è una caratteristica molto potente se si utilizza in modo opportuno. Mettere un'immagine in un pulsante per creare un pulsante immagine, o mettere un elenco di video in un combobox per scegliere un file video.

<button>
<StackPanel Orientation="Horizontal">
<image Source="speaker.png" Stretch="Uniform"/>
<TextBlock Text="Play Sound" />
</ StackPanel></ Button>
Altamente personalizzabile A causa della netta separazione tra aspetto e il comportamento si può facilmente modificare l'aspetto di un controllo. Il concetto di stili permette di pelle controlli quasi come i CSS in HTML. I modelli consentono di sostituire tutto l'aspetto di un controllo.
L'esempio seguente mostra un pulsante predefinito WPF e un pulsante personalizzato.

Risoluzione indipendenza Tutte le misure in WPF sono unità logiche - non pixel. Una unità logica è un 1 / 96 di pollice. Se si aumenta la risoluzione dello schermo, l'interfaccia utente rimane delle stesse dimensioni - si arriva solo croccante. Dal momento che WPF si basa su un motore di rendering vettoriale basato è incredibilmente facile costruire interfacce utente scalabile.