{{ overviewoverview}}{{ overviewoverview}}

Paolo PossanziniMCP MCTSMCP - MCTShttp://www.dotnetumbria.org/blogs/possanzini

I vantaggi di WPFStrumenti di SviluppoStrumenti di Sviluppo Concetti fondamentaliCreazione della UICreazione della UIStili e TemplatesDataBindingDataBinding

dotnetumbria.org

Modello unificato per la progettazione di interfacce utente Windows Forms (WPF)Windows Forms (WPF)Web (SilverLight) -> Sessione di Andrea oggi pomeriggio

Semplifica il lavoro in team di sviluppatori e grafici.

Utilizza le caratteristiche hardware delle schede video

Rende più semplice l’integrazione di tecnologie esistenti

dotnetumbria.org

Come lo farebbe un Come lo farebbe un programmatoreprogrammatore

Quello che vuole Quello che vuole il clienteil cliente

Come lo farebbe un Come lo farebbe un graficografico

XAML

dotnetumbria.org

WindowsWindows

Forms PDF

WindowsForms/GDI+

WindowsMediaPlayer WPFDirect3D

Graphical Interface, e.g., Forms and Controls x

On-Screen

xxxDocuments

Fixed-FormatDocuments

x

xx

x

Images

xVideo and Audio

x x

xxVideo and Audio xTwo-Dimensional

Graphics xx

xThree-Dimensional Graphics x

dotnetumbria.org

Visual Studio 2008 Microsoft Expression BlendMicrosoft Expression BlendMicrosoft Expression DesignWPF Performance SuiteWPF Performance Suite

PerforatorVisual ProfilerVisual ProfilerEvent TraceETV Trace Viewer

Visual Studio 2005+ Framework ver. 3.0 o ver. 3.5+ Visual Studio Designer for WPF

dotnetumbria.org

Xaml è un nuovo linguaggio basato su XMLXaml è un nuovo linguaggio basato su XML

E’ il modo più coinciso per descrivere l’interfaccia utenteE il modo più coinciso per descrivere l interfaccia utente

Incoraggia la separazione della progettazione della UIIncoraggia la separazione della progettazione della UI dalla logica applicativa

E’ un vero linguaggio di programmazione!

E’ in grado di costruire ed inizializzare oggetti del framework .Net

dotnetumbria.org

<Button Height="23" HorizontalAlignment="Left" gMargin="52,63,0,0" Name="button1"

Instanzia un oggetto di tipo

“Button”

Assegna valori alle proprietà dell’oggetto

VerticalAlignment="Top" Width="75">Ok</Button>

Button

Button btn = new Button();bt H i ht 23

Instanzia un oggetto di tipobtn.Height = 23;

btn.Width = 75;bt N "b tt 1"

oggetto di tipo “Button”

A l ibtn.Name = "button1";btn.Content = "Ok";

Assegna valori alle proprietà dell’oggetto

<Button Height="23" …Click=“button Click“

1) Instanziare Oggetti

2) Assegnare ProprietàClick= button_Click>Ok</Button>

2) Assegnare Proprietà

3) Sottoscrivere Eventi

<Button Height="23“ Margin="52,63,0,0“ Name="button1" Width="75“>

4) Incapsulare Oggetti tra loro

5) molto altroWidth= 75 ><Button.Content>

<MediaElement

5) ... molto altro …

Margin="0,0,0,0“Name="mediaElement1“Source=“c:\myvideo.avi” /> y

</Button.Content></Button>

dotnetumbria.org

{{ Creazione della UI Creazione della UI }}{{ }}

Sono strutture che estendono le potenzialità di xaml

Es: <B tton Name "btn" Backgro nd “{ N ll}”/><Button Name="btn" Background=“{x:Null}”/>

<TextBlock Text="{Binding <TextBlock Text {Binding ElementName = Btn, Path=Content}" />

dotnetumbria.org

Permette l’associazione di una proprietà di un oggetto “target” al valore di un dato in unaoggetto target al valore di un dato in una sorgente dati.

Possiamo bindare ogni proprietà di tipo DependencyProperty ed ogni controlloDependencyProperty ed ogni controllo

Le strutture di Binding sfruttano le MarkupExtension per integrare il meccanismo dibi di ll’i di X lbinding all’interno di Xaml

dotnetumbria.org

RagioneSociale

Proprietà TextSociale Text

Sorgente Sorgente Controllo Controllo della UIdella UI

DatiDatidella UIdella UI

(es. (es. TextBoxTextBox))

dotnetumbria.org

O WOneWay

TwoWay

OneWayToSourcey

1

OneTime

dotnetumbria.org

{Binding Path=Content, ElementName=txtBox1}

MarkupExtension

<Button Content=“{Binding Path=Height, RelativeSource={RelativeSource Self}}”/>

MarkupExtension

dotnetumbria.org

{{ DataBinding DataBinding }}{{ gg }}

E’ la rappresentazione l i d ll t B tt 1 St ilogica della nostra interfaccia utente Window StackPanel

Button1 String

Button2 String

Viene creata automaticamente auto at ca e tequando progettiamo la User InterfaceUser Interface

dotnetumbria.org

E’ la versione “esplosa” della Logical Tree

Spezza ogni singolo elemento negli elementi visuali che lo compongonocompongono

Es: ButtonEs: ButtonBordo e Background (ButtonChrome)Contenitore per altri controlli (ContentPresenter)Testo del controllo (TextBlock)

dotnetumbria.org

Window Ci permette di customizzarel’interfaccia utente

StackPanel

Button1 Button2

l interfaccia utente senza scrivere controlli custom !

Button1

ButtonChrome

Button2

ButtonChrome

ContentPresenter ContentPresenter

TextBlok

String

TextBlok

StringString String

StiliMeccanismo che ci permette di separare il valore delle proprietàMeccanismo che ci permette di separare il valore delle proprietà dall’interfaccia utenteConcettualmente simile a CSS

TemplatesObject model che ci permette di modificare la VisualTree(Restiling delle applicazioni)(Restiling delle applicazioni)

SkinCollezione di Stili e Templates per l’applicazionep p pp

TemiCaratteristiche visuali del Sistema operativoCustomizzabili anche dall’utente finale

dotnetumbria.org

<Button FontSize=“22” /> Senza Stili

<Style x:Key=“mystyle”><Setter Property=“Button.FontSize” Value=“22” />Setter Property Button.FontSize Value 22 /

</Style>…<Button Style=“{StaticResource mystyle}” />

Con Stili

Concettualmente simili ai triggers del DB

Permettono di modificare alcune Proprietà al verificarsi di alcune condizionialcune condizioni

Property TriggersProperty Triggers

Data Triggers

Event Triggers

dotnetumbria.org

gg

In WindowsForms se avevo necessità grafiche particolari era necessario scrivere controlli custom

Un Template permette una customizzazione moltoUn Template permette una customizzazione molto profonda dei controlli

Viene utilizzato quando la configurazione delle proprietà non è sufficiente ad ottenere il risultato

Modifica la VisualTree di un ControlloPosso stabilire completamente l’aspetto del mio controllo

dotnetumbria.org

{{ Stili e Templates Stili e Templates }}{{ pp }}

paolo@teamdev.itpaolo@teamdev.it

http://dotnetumbria.org/blogs/possanzinihttp://dotnetumbria.org/blogs/possanzinip g g pp g g p

© 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market

conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.