vai alla parte 2 >> Nota del revisore tecnico
Questo articolo contiene la prima di una serie di traduzioni dall'inglese di articoli presi principalmente da MSDN che stiamo utilizzando per iniziare a capire che cos'è Windows Presentation Foundation e come funziona. La lettura degli articoli in inglese è utile, però trovo che tradurre almeno quelli fondamentali serve a capire un po' meglio le cose. Siccome parecchi programmatori non amano troppo la documentazione in inglese, spero di far cosa gradita pubblicando le traduzioni, nella speranza di fare un po' meglio del traduttore automatico ;). Aggancerò alla traduzione il link dell'articolo di origine, e quando farò altre traduzioni, aggancerò queste ultime ad un segnalino standard in modo che siamo direttamente raggiungibili, aggiornerò anche gli articoli già pubblicati che dovessero farvi riferimento. I segnalini saranno i seguenti:  Articolo originale in inglese. Articolo tradotto, quando presente.
Non riporterò tutti i link sparsi per l'articolo originale perché è difficile, perché potrebbero variare e perché andando all'articolo originale trovate tutto il necessario. Però, in questo specifico articolo che, quale articolo introduttivo, rimanda ad una lunga serie di articoli che trattano i singoli argomenti, inserirò i link agli articoli collegati in modo che, anche se non riusciremo a tradurli tutti, possiate leggere tutto il materiale. Quando un articolo secondario avrà traduzione italiana, troverete 2 bandierine al posto di una sola. Ed ora, lascio spazio all'articolo e buona lettura. Introduzione a Windows Presentation Foundation (WPF) Questo articolo contiene le seguenti sezioni. Tipi principali e infrastruttura di WPF Windows Presentation Foundation (WPF) è costruito su un insieme principale di tipi di dati ed una infrastruttura che è importante voi comprendiate poichè permeano tutto il WPF. Un’alta percentuale delle classi di WPF eredita dalle seguenti quattro classi “elementi basilari”: - UIElement
- FrameworkElement
- ContentElement
- FrameworkContentElement
Queste quattro classi sono indicate come: classi degli elementi base [base element classes], perché esse formano la base di un modello comune per la costruzione di un’interfaccia utente(UI). Per maggiori informazioni, vedi, Panoramica degli elementi base . Nel WPF una UI è composta di elementi che sono assemblati in una gerarchia ad albero che è definita: albero degli elementi [element tree]. L’albero degli elementi fornisce un modo logico ed intuitivo per generare interfaccie utente (UIs). E’ anche una struttura su cui è possibile stratificare servizi di UI più potenti. Per maggiori informazioni vedi Albero degli Elementi . Uno dei servizi UI è il sistema subordinato delle property [dependency property system], il quale abilita un elemento ad implementare una proprietà il cui valore è automaticamente condiviso con i suoi elementi figli all’interno dell’albero degli elementi. Ad esempio, questo sistema di proprietà, permette al colore di sfondo di una finestra di essere applicato automaticamente a tutti gli elementi contenuti nella finestra che non specificano il loro colore di sfondo. Per maggiori informazioni vedi Panoramica del Sistema Subordinato delle Property . Un altro servizio che usufruisce dell’albero degli elementi è il sistema guidato degli eventi[routed event system]. Il Microsoft .NET Framework versione 3.0, fornisce eventi diretti che sono scatenati solo su un elemento. Gli eventi guidati, tuttavia, possono attraversare l’albero degli elementi lungo un percorso tra l’elemento radice e l’elemento origine dell’evento. Questi eventi possono essere intercettati da qualunque elemento lungo il percorso. Un tipo di evento guidato risale lungo l’albero dal controllo origine che consente a ciascun elemento genitore l’opzione di intercettare l’evento [bubbling event].
Un altro tipo di evento guidato scende dalla radice verso il controllo origine per fornire l’opportunità a tutti gli elementi genitore del controllo origine di avere l’anteprima dell’evento [tunnelling event]. Vedi Panoramica degli Eventi Pilotati . La ragione principale per cui intercettare gli eventi è acquisire ed elaborare l’input utente. Il sistema di input del WPF incorpora eventi diretti ed eventi guidati a questo scopo. Esso aggiunge un maggior supporto per l’input di testo,la gestione del focus, e il posizionamento del mouse. Per maggiori informazioni, vedi Panoramica dell’Input . Così come il sistema di input funziona direttamente attraverso i dispositivi di input, il sistema dei comandi fornisce uno strato di astrazione che separa le azioni di input dal codice che risponde a tali azioni. Il sistema dei comandi è modellato sul consueto schema di progetto dei comandi [command design pattern]. Per maggiori informazioni vedi Panoramica del Sistema dei Comandi . Extensible Application Markup Language (Linguaggio Estensibile di Markup per le Applicazioni) WPF costruisce le Uis utilizzando l’Extensible Application Markup Language (XAML), che è un linguaggio di markup basato su XML per comporre elementi del WPF e avantaggiarsi dei servizi fondamentali del WPF. Ad esempio, il seguente codice XAML compone una UI che consiste di una finestra con un singolo bottone. <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"><Button>Hello, XAML!Button>Window> Il WPF acquisisce la definizione di questa UI e traduce gli elementi XAML inclusi in istanze delle classi WPF che sono necessarie ad implementare la UI definita in XAML come mostrato nella figura seguente. 
Definire una UI usando XAML fornisce numerosi vantaggi rispetto alle tradizionali tecnologie di presentazione: - XAML è spesso più efficace del codice per definire le UI e quindi, esso solitamente semplifica la progettazione delle UI.
- Separando la definizione della UI dalla logica dell’applicazione, il WPF aiuta a rendere il vostro codice manutenibile, riutilizzabile e robusto quando è necessario modificare la UI.
- Separando la definizione della UI, il WPF permette inoltre a diversi sistemi di progettazione e sviluppo di modificare una singola porzione di codice XAML.Questo permette di predisporre un Workflow che inizia con un progettista grafico che genera la UI e temina con uno sviluppatore che scrive il codice della logica di applicazione che fornisce funzionalità alla UI.
Per maggiori informazioni, vedi Panoramica di XAML . Controlli Per aiutarvi nella composizione della vostra UI, WPF fornisce un’ampio insieme di controlli. Se questi controlli non fornissero il comportamento che prevedono le vostre applicazioni, potete facilmente costruire i vostri controlli personalizzati. Controlli Standard I controlli standard che sono implementati dal WPF derivano dalla classe base Control , sia direttamente che indirettamente, ed includono i seguenti: - Editing:
- CheckBox
- ComboBox
- PasswordBox
- RadioButton
- RichTextBox
- Slider
- TextBox
- Selezioni di liste
- Informazioni all’utente
- Label
- ProgressBar
- Popup
- ToolTip
- Azione
- Button
- ContextMenu
- Menu
- Separator
- StatusBar
- Thumb
- ToolBar
- Aspetto
- Border
- BulletDecorator
- Decorator
- Image
- ViewBox
- Dialog Boxes
- OpenFileDialog
- PrintDialog
- SaveFileDialog
- Contenitori
- Expander
- GroupBox
- RepeatButton
- ScrollBar
- ScrollViewer
- TabControl
- Layout
- Canvas
- DockPanel
- Grid
- GridSplitter
- Panel
- StackPanel
- VirtualizingStackPanel
- WrapPanel
- Navigazione
- Documenti
- DocumentViewer
- FlowDocumentPageViewer
- FlowDocumentReader
- FlowDocumentScrollViewer
Il WPF, inoltre, estende il supporto ai controlli di editing con funzionaità che includono la clipboard, selezione del testo e maniplazione del testo. Vedi Panoramica del Drag and Drop .
Per maggiori informazioni ed esempi introduttivi vedi Esempi della Libreria dei Controlli . Controlli Personalizzati Anche se il WPF fornisce questi controlli standard, applicazioni particolari spesso richiedono controlli personalizzati. Quando usate stili e modelli, potete spesso modificare l’aspetto di un controllo esistente senza creare un nuovo controllo. Comunque, se vi serve un controllo che ha un comportamento significativamente diverso da quello dell’insieme dei controlli standard, potete creare il vostro controllo derivando da un’appropriata classe base. L’esempio del ColorPicker personalizzato genera un controllo personalizzato che deriva da Control in modo da implementare un selettore di colori riutilizzabile. L’illustrazione successiva mostra il controllo personalizzato.
Per maggiori informazioni, vedi Panoramica sulla realizzazione di controlli . Per esempi introduttivi, vedi Esempi di personalizzazione di controlli .
Collegamento dati (Data Binding) Le applicazioni di WPF possono funzionare usando diversi tipi di dati, includendo oggetti semplici, collezioni di oggetti, elementi WPF, dati XML, oggetti ADO.NET e oggetti rinviati(returned: restituiti) dai servizi Web. Per facilitare la visualizzazione e l’interazione dei dati, WPF implementa un meccanismo che vi permette di collegare esplicitamente questi tipi di sorgenti di dati alle vostre applicazioni UI.
Un data binding è una relazione formale tra una binding source (la sorgente dati) e un binding target (il consumatore di dati) che garantisce la sincronizzazione tra i due. L’illustrazione seguente mostra questa relazione.
Un data binding è incapsulato nella classe Binding, la quale è usata nel seguente esempio per stabilire esplicitamente un collegamento tra una classe che implementa la property PersonName dell’oggetto Person e la proprietà di Text di un TextBlock. <Window ... xmlns:src="clr-namespace:ApplicationNameSpace">
...
<Window.Resources><src:Person x:Key="myDataSource" PersonName="Joe"/>Window.Resources>
...
<TextBlock Text="{Binding Source={StaticResource myDataSource}, Path=PersonName}" />
...
Window>
Il precedente codice collega esplicitamente la proprietà Text del TextBlock alla proprietà PersonName dell’oggetto Person, al quale è dato il valore iniziale di “Joe”.
Il data binding in WPF fornisce anche un supporto per molte operazioni complesse, che includono la validazione, l’ordinamento e il raggruppamento. Inoltre, il data binding fornisce l’infrastruttura che supporta la modellazione dati (data templating), che vi consente di generare facilmente visualizzazioni personalizzate per i dati collegati oltre a quelle che i controlli standard forniscono per default.
Per maggiori informazioni, vedi Panoramica del Data Binding . Per un esempio introduttivo, vedi Demo sul Data Binding .
Aspetto
Il WPF oltre a fornire un insieme comune elementi e controlli il cui uso vi permette di costruire le vostre applicazioni, vi procura anche un potente supporto per l’estendere, personalizzare e riutilizzare gli elementi e controlli, secondo le vostre necessità. Questo rende più semplice generare visualizzazioni personalizzate creando controlli o elementi completamente nuovi.
Risorse Molti dei controlli, in una applicazione, condividono frequentemente lo stesso tipo di oggetti e valori, come ad esempio i fonts, i colori di sfondo, i modelli (templates) di controllo, i modelli (templates) di dati e stili. WPF fornisce un’infrastruttura, definita come: risorse dell’interfaccia utente (UI resources) , la quale vi permette di definire oggetti e valori una sola volta e di riutilizzarli più volte. L’esempio seguente mostra come definire un colore di sfondo comune che viene condiviso da due bottoni. <Windowxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"><Window.Resources><SolidColorBrush x:Key="defaultBackground" Color="Red" />Window.Resources>< StackPanel><Button Background="{StaticResource defaultBackground}">One ButtonButton><Label Background="{StaticResource defaultBackground}">One LabelLabel>StackPanel>Window>
Le risorse possono essere contestualizzate in uno specifico controllo, in tutti i controlli su una specifica pagina o finestra oppure in tutti i controlli di una applicazione. Le risorse sono ricercate (resolved) in quest’ordine. Ciò rende più facile gestire oggetti e valori riutilizzabili.
Per maggiori informazioni, vedi Panoramica delle Risorse. Per un esempio introduttivo, vedi Applicazione di Esempio sulle Risorse .
Stili Gli stili sono una delle numerose caratteristiche di personalizzazione di WPF che permettono ad una applicazione, un documento o ad un progettista di UI, di standardizzare il loro prodotto dandogli un look specifico. Uno sviluppatore o un progettista possono personalizzare estensivamente il look in base al tipo di applicazione; è comunque richiesto un modello di stile coerente per permettere la manutenzione e la condivisione dell’aspetto (look – fra applicazioni). WPF fornisce questo modello, il quale si basa dall’elemento Style[http….].
Il seguente esempio mostra come creare uno stile che imposta la property Backgrund per un TextBlock, al colore Giallo. <Style TargetType="{x:Type Button}"><Setter Property="Background" Value="Yellow"/>Style>
Per maggiori informazioni,vedi Styling e Modellazione. Per un esempio introduttivo, vedi Esempio di Introduzione allo Styling e Modellazione .
Modelli di Controlli (Control Templates) Per default, gli elementi del WPF, quali i bottoni, sono costruiti da un insieme di altri elementi. Per esempio, un bottone è composto da tre elementi figli che generano l’aspetto di default del bottone. Usando i Control Templates, potete comunque sostituire l’aspetto di default di un elemento WPF, mantenendo il suo comportamento (behaviour). Il seguente esempio mostra come cambiare l’aspetto di un bottone usando un Control Template. <Button Content="Not Pressed"><Button.Template><ControlTemplate TargetType="{x:Type Button}"><Border x:Name="border" CornerRadius="80" Background="LightBlue"><ContentPresenter Name="content" HorizontalAlignment="Center" VerticalAlignment="Center"/>Border><ControlTemplate.Triggers><Trigger Property="IsPressed" Value="True"><Setter TargetName="border" Property="Background" Value="Aqua" /><Setter TargetName="content" Property="Content" Value="Pressed" />Trigger>ControlTemplate.Triggers>ControlTemplate>Button.Template>Button>La seguente illustrazione mostra il risultato che si ottiene usando un Control Template per cambiare l’aspetto di un bottone.
Per maggiori informazioni, vedi ControlTemplate . Per un esempio introduttivo, vedi Esempio di Styling usando i Control Templates . Modelli di Dati (Data Templates) Mentre i Control Templates vi consentono di modificare completamente l’aspetto di un controllo, i Data Templates, invece, vi permettono di modificare l’aspetto del contenuto di un controllo. I Data Templates sono usati frequentemente per cambiare il modo di visualizzare per default i dati collegati (bound).
Per esempio, la seguente illustrazione mostra l’aspetto di default di una ListBoxche è collegata alla collezione di oggetti di Image.
Invece di mostrare un elenco dei percorsi delle immagini, un’applicazione visivamente più piacevole potrebbe esporre una lista delle immagini reali. L’esempio seguente mostra un modello di dati che fa proprio questo. <DataTemplate x:Key="myTaskTemplate"><Border Name="border" BorderBrush="Aqua" BorderThickness="1"Padding="5" Margin="5"><Grid><Grid.RowDefinitions><RowDefinition/><RowDefinition/><RowDefinition/>Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition /><ColumnDefinition />Grid.ColumnDefinitions><TextBlock Grid.Row="0" Grid.Column="0" Text="Task Name:"/><TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Path=TaskName}" /><TextBlock Grid.Row="1" Grid.Column="0" Text="Description:"/><TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=Description}"/><TextBlock Grid.Row="2" Grid.Column="0" Text="Prioirty:"/><TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Path=Priority}"/>Grid>Border>DataTemplate>La seguente illustrazione mostra il risultato di questo esempio, che presenta ancora un elenco che funziona allo stesso modo della lista precedente, ma è molto più leggibile.
Per maggiori informazioni, vedi Panoramica del Data Templating . Per un esempio introduttivo, vedi Esempio di Introduzione allo Styling e alla Modellazione . Temi (Themes) Una tipica applicazione WPF può avere molteplici risorse per l’interfaccia utente (UI), le quali sono applicate all’intera applicazione. Nel loro insieme, queste risorse possono essere considerate il tema dell’applicazione. WPF fornisce il supporto per produrre(to package) le risorse dell’interfaccia utente (UI) come tema, usando un Resource Dictionary che è definito nella classe Resource Dictionary.
Resource Dictionary possono essere definite come files individuali, che vi consentono di riutilizzare un tema per più applicazioni. Potete inoltre generare temi intercambiabili definendo (defining: codificando,delimitando,delineando,determinando) Resource Dictionaries multipli che forniscono gli stessi tipi di risorse ma con valori diversi. L’esempio seguente utilizza un Resource Dictinary per confezionare le risorse dell interfaccia utente (UI) in un Tema. <ResourceDictionaryxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="clr-namespace:ThemedApplicationSample_CSharp"><Style TargetType="{x:Type Button}"><Setter Property="Background" Value="Blue" />Style>ResourceDictionary><ResourceDictionaryxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="clr-namespace:ThemedApplicationSample_CSharp"><Style TargetType="{x:Type Button}"><Setter Property="Background" Value="Yellow" />Style>ResourceDictionary>Per maggiori informazioni, vedi Panoramica delle Risorse. Per un esempio introduttivo, vedi Esempio di Applicazioni con Tema . Layout e Pannelli Quando generate un UI al fine di visualizzare dati, il processo di composizione necessita che controlli ed elementi siano posizionati e dimensionati in modo appropriato, oppure devono essere distribuiti all’interno di una finestra. Il sistema di layout di WPF rende più semplice il processo di composizione e lo accresce con la capacità di adattarsi alle variazioni di dimensioni della finestra, alla modifica della risoluzione dello schermo e dei punti per pollice. Il pilastro di questa flessibilità è la capacità di comporre le UIs usando il posizionamento relativo.
Invece di far scrivere agli sviluppatori il codice che produce questi effetti, WPF fornisce un’eccellente sistema estensibile di layout che consente un facile e rapido sviluppo dell’UI e supporta la localizzazione (linguistica) delle UIs.
WPF fornisce il supporto di layout attraverso una infrastruttura comune che include il seguente insieme di controlli di layout: Canvas, DockPanel, Grid, StackPanel, VirtualizingStackPanel e WrapPanel.
La seguente illustrazione mostra un DockPanel usato per fornire l’infrastruttura di layout di una pagina.
Il seguente esempio mostra come creare il dock panel di questa illustrazione. <DockPanel><DockPanel.Resources><Style TargetType="{x:Type Border}"><Setter Property="BorderBrush" Value="Black" /><Setter Property="BorderThickness" Value="1" />Style><Style TargetType="{x:Type TextBlock}"><Setter Property="Margin" Value="5" /><Setter Property="FontWeight" Value="Medium" />Style>DockPanel.Resources><Border Background="SkyBlue" DockPanel.Dock="Top"><TextBlock>Dock = "Top"TextBlock>Border><Border Background="SkyBlue" DockPanel.Dock="Top"><TextBlock>Dock = "Top"TextBlock>Border><Border Background="PaleGoldenrod" DockPanel.Dock="Bottom"><TextBlock>Dock = "Bottom"TextBlock>Border><Border Background="PaleGreen" DockPanel.Dock="Left"><TextBlock>Dock = "Left"TextBlock>Border><Border Background="White"><TextBlock>This content "Fills" the remaining, unallocated space.TextBlock>Border>DockPanel>Per maggiori informazioni, vedi Il Sistema di Layout . Per un esempio introduttivo, vedi WPF Galleria Esempi di Layout .
vai alla parte 2 >> |