Sie sind auf Seite 1von 208

Taller de Sistemas de

Informacin 1
Clase 4
WPF
Lifecycle, Layouts,
Controles, DataBinding
INCO - Facultad de Ingeniera Montevideo, Uruguay 2
Application lifecycle
INCO - Facultad de Ingeniera Montevideo, Uruguay 3
Application

Una aplicacin WPF es un proceso


Windows,

Este tiene una instancia del obeto


!pplication

Este pro"ee ser"icios de ciclo de "ida

Una aplicacin es una instancia de la clase


System.Windows.Application
INCO - Facultad de Ingeniera Montevideo, Uruguay 4
Application
using System;
using System.Windows;
class Program {
[STAThread]
static void Main( {
A!!lication a!! " new System.Windows.A!!lication(;
Window# window " new Window#( ;
window.Show( ;
a!!.$un(;
%
%
INCO - Facultad de Ingeniera Montevideo, Uruguay 5
Creacin explicita

Cuando la aplicacin esta eecutando, WPF


procesa los #ensaes de Windows y rutea
los e"entos a los controles de U$ de WPF,
seg%n sea necesario
INCO - Facultad de Ingeniera Montevideo, Uruguay 6
Acceso a Application
using System;
using System.Windows;
class Program {
[STAThread]
static void Main( {
A!!lication a!! " new System.Windows.A!!lication(;
Window# window " new Window#( ;
window.Show( ;
A!!lication.&urrent.$un(;
%
%
INCO - Facultad de Ingeniera Montevideo, Uruguay 7
Creacin implcita

Debido a &ue crear un 'ain co#o entry point


de la aplicacin, es de lo #as co#%n, WPF
puede pro"eernos un entry point por nosotros

En general los proyectos WPF definen un


(!'L &ue define el obeto !pplication
INCO - Facultad de Ingeniera Montevideo, Uruguay 8
Creacin implcita
'()) A!!.*aml ))+
'A!!lication
*,&lass"-.m!licitA!!Sam!le.A!!-
*mlns"
-htt!,//schemas.microso0t.com/win0*/1223/*aml/!resentation-
*mlns,*"-htt!,//schemas.microso0t.com/win0*/1223/*aml- /+
// A!!.*aml.cs
using System;
using System.Windows;
names!ace .m!licitA!!Sam!le {
!u4lic !artial class A!! , System.Windows.A!!lication {
!rotected override void 5nStartu!(Startu!6ventArgs e {
4ase.5nStartu!(e;
Window# window " new Window#( ;
window.Show( ;
%
%
%
INCO - Facultad de Ingeniera Montevideo, Uruguay 9
Creacin implcita

El propio WPF pro"ee el 'ain

Este #ain se encarga de crear el obeto


!pplication e in"ocar el #)todo *un+,

-odo lo &ue .ay &ue .acer es crear una


"entana y #ostrarla, general#ente en el
.andler del e"ento /tartup
INCO - Facultad de Ingeniera Montevideo, Uruguay !
INCO - Facultad de Ingeniera Montevideo, Uruguay
Con lo que WP !enera"
names!ace .m!licitA!!Sam!le {
!u4lic !artial class A!! , A!!lication {
[System.STAThreadAttri4ute( ]
[7e4ugger8on9ser&odeAttri4ute( ]
!u4lic static void Main( {
.m!licitA!!Sam!le.A!! a!! "
new .m!licitA!!Sam!le.A!!(;
a!!.$un(;
%
%
%
INCO - Facultad de Ingeniera Montevideo, Uruguay 2
Creacin implcita

/i nuestra "entana esta definida en un


arc.i"o (!'L +co#o segura#ente lo este,,
pode#os ob"iar el o"erride del #)todo
0n/tartup

Para esto, establece#os la propiedad


/tartupUri en el (!'L del obeto !pplication
INCO - Facultad de Ingeniera Montevideo, Uruguay 3
Creacin implcita
'()) A!!.*aml ))+
'A!!lication
*,&lass"-.m!licitA!!Sam!le.A!!-
*mlns"-htt!,//schemas.microso0t.com/
win0*/1223/*aml/!resentation-
*mlns,*"-htt!,//schemas.microso0t.com/
win0*/1223/*aml-
Startu!9ri"-Window#.*aml-
/+
INCO - Facultad de Ingeniera Montevideo, Uruguay 4
Top#le$el Windows

Es una "entana &ue no esta contenida ni


pertenece a otra "entana

La #ain Window de una aplicacin WPF


es la top1le"el Window &ue se encuentra
cargada en la propiedad 'ainWindow del
obeto !pplication

/e carga cuando la pri#er instancia de


Window es creada
INCO - Facultad de Ingeniera Montevideo, Uruguay 5
Top#le$el Windows
INCO - Facultad de Ingeniera Montevideo, Uruguay 6
Application s%utdown

!lgunas aplicaciones trabaan natural#ente con


la idea de una %nica "entana principal
o
2otepad, $DEs, Paintbrus., etc3

Esta controla el ciclo de "ida de la aplicacin3

0tras aplicaciones tienen #%ltiples "entanas


top1le"el o incluso un ciclo de "ida
independiente de la "entana principal
INCO - Facultad de Ingeniera Montevideo, Uruguay 7
S%utdown modes

Pode#os especificar en WPF cuando


&uere#os &ue nuestra aplicacin finalice, a
tra")s de la propiedad /.utdown'ode en el
obeto !pplication

/.utdown'ode
o
0nLastWindowClose 4 5 +"alor por defecto,
o
0n'ainWindowClose 4 6
o
0nE7plicit/.utdown 4 8
INCO - Facultad de Ingeniera Montevideo, Uruguay 8
S%utdown modes

En el caso del s.utdown e7plicito, la %nica


for#a de finali9ar la eecucin de la
aplicacin es in"ocando el #)todo /.utdown
de la instancia de !pplication con la &ue
esta#os trabaando
o
!pplication3Current3/.utdown+,
INCO - Facultad de Ingeniera Montevideo, Uruguay 9
S%utdown modes

Este #odo puede alterarse en cdigo cuando


lo desee#os

-a#bi)n puede configurarse en el (!'L del


obeto !pplication
'A!!lication
*,&lass"-A!!WindowsSam!le.A!!-
*mlns"-htt!,//schemas.microso0t.com/...
...win0*/1223/*aml/!resentation-
*mlns,*"-htt!,//schemas.microso0t.com/...
...win0*/1223/*aml-
Startu!9ri"-Window#.*aml-
ShutdownMode"-5n6*!licitShutdown- /+
INCO - Facultad de Ingeniera Montevideo, Uruguay 2!
S%utdown

Estas no son las %nicas for#as de finali9ar una


aplicacin WPF +un proceso de Windows,

!pplication3/.utdown+, es una for#a :a#igable;


de finali9ar una aplicacin, cerrar las top1le"el
Windows, y finali9ar el #)todo *un+,

Esto per#ite &ue las "entanas in"olucradas


puedan procesar sus notificaciones de Closing y
Closed
INCO - Facultad de Ingeniera Montevideo, Uruguay 2
Application &$ents

/tartup

!cti"ated

Deacti"ated

Dispatc.erUn.andledE7ception

/essionEnding

E7it
INCO - Facultad de Ingeniera Montevideo, Uruguay 22
'ayouts
INCO - Facultad de Ingeniera Montevideo, Uruguay 23
'ayouts

WPF pro"ee una serie de .erra#ientas


fle7ibles para #anipular la distribucin de
co#ponentes en la interfa9 de usuario

Un buen siste#a de layout balancea entre el


control &ue brinda al desarrollador y el .ec.o
de tener &ue .acer todo el trabao
INCO - Facultad de Ingeniera Montevideo, Uruguay 24
'as ()sicas"

WPF pro"ee una serie de ele#entos


deno#inados paneles

Un panel tiene la funcin especifica de


contener otros co#ponentes los cuales debe
distribuir apropiada#ente

Co#o cual&uier co#ponente WPF, los


paneles tienen una serie de propiedades
si#ples, &ue pueden co#ponerse entre si
para for#ar obetos co#pleos
INCO - Facultad de Ingeniera Montevideo, Uruguay 25
Paneles

-ene#os disponibles los siguientes paneles


o
/tac<Panel
o
WrapPanel
o
Doc<Panel
o
=rid
o
Can"as
o
Unifor#=rid
INCO - Facultad de Ingeniera Montevideo, Uruguay 26
Stac*Panel

Es el panel #as sencillo

!co#oda sus .ios en una colu#na o en una


fila

En general no es #uy usado para definir la


totalidad de una interfa9 de usuario

Es #as %til para definir pe&ue>as


subsecciones de una interfa9 de usuario
INCO - Facultad de Ingeniera Montevideo, Uruguay 27
Stac*Panel
'Stac:Panel ;ac:ground"-<6&6=7>-+
<TextBlock Margin="3">Look for:</TextBlock>
<ComboBox Margin="3"/>
<TextBlock Margin="3">Filtered by:</TextBlock>
<ComboBox Margin="3"/>
<Btton Margin="3!"">#earc$</Btton>
<C$eckBox Margin="3">#earc$ in title% only</C$eckBox>
<C$eckBox Margin="3">Matc$ related &ord%</C$eckBox>
<C$eckBox Margin="3">#earc$ in 're(io% re%lt%
</C$eckBox>
<C$eckBox Margin="3">
)ig$lig$t %earc$ $it% *in to'ic%+
</C$eckBox>
'/Stac:Panel+
INCO - Facultad de Ingeniera Montevideo, Uruguay 28
Stac*Panel
?
Poco aco#odo
grafico
?
/ola#ente el
#argen per#ite
distribuir un poco
#eor los
co#ponentes
INCO - Facultad de Ingeniera Montevideo, Uruguay 29
WrapPanel

Es una #eora sobre el /tac<Panel

Cuando la cantidad de co#ponentes supera


el tope soportado en una l@nea

/i agrega#os un nue"o co#ponente, el


panel lo colocara en la pr7i#a l@nea
o
Funciona co#o un procesador de te7to
INCO - Facultad de Ingeniera Montevideo, Uruguay 3!
WrapPanel
'Wra!Panel ;ac:ground"-;eige-+
<Btton>,ne</Btton>
<Btton>T&o</Btton>
<Btton>T$ree</Btton>
<Btton>For</Btton>
<Btton>Fi(e</Btton>
<Btton>#ix</Btton>
<Btton>#e(en</Btton>
<Btton>-ig$t</Btton>
'/Wra!Panel+
INCO - Facultad de Ingeniera Montevideo, Uruguay 3
+oc*Panel

0rgani9a los co#ponentes .ios, de for#a tal


de ocupar un borde deter#inado del panel

/i #%ltiples .ios se colocan en el #is#o


borde, estos se apilan co#o si estu"ieran en
un /tac<Panel

Por defecto el ulti#o .io llena el espacio no


ocupado por los de#As bordes
INCO - Facultad de Ingeniera Montevideo, Uruguay 32
+oc*Panel
'7oc:Panel+
<Btton 7oc:Panel.7oc:"-To!-+
To'
</Btton>
<Btton 7oc:Panel.7oc:"-;ottom-+
Bottom
</Btton>
<Btton 7oc:Panel.7oc:"-?e0t->Left</Btton>
<Btton 7oc:Panel.7oc:"-$ight->.ig$t</Btton>
<Btton>Fill</Btton>
'/7oc:Panel+
INCO - Facultad de Ingeniera Montevideo, Uruguay 33
+oc*Panel
INCO - Facultad de Ingeniera Montevideo, Uruguay 34
,rid

Por ee#plo, esta


pantalla de
propiedades del
$nternet E7plorer,
tiene una
distribucin t@pica
tabular
INCO - Facultad de Ingeniera Montevideo, Uruguay 35
,rid
</rid Backgrond="Beige0 #$o&/ridLine%="Tre">
</rid1Colmn2efinition%>
<Colmn2efinition />
<Colmn2efinition />
<//rid1Colmn2efinition%>
</rid1.o&2efinition%>
<.o&2efinition />
<.o&2efinition />
<.o&2efinition />
<//rid1.o&2efinition%>
<TextBlock /rid1Colmn="3" /rid1.o&="3">4rotocol:</TextBlock>
<TextBlock /rid1Colmn="5" /rid1.o&="3">
)y'erText Tran%fer 4rotocol</TextBlock>
<TextBlock /rid1Colmn="3" /rid1.o&="5">Ty'e:</TextBlock>
<TextBlock /rid1Colmn="5" /rid1.o&="5">)TML 2ocment</TextBlock>
<TextBlock /rid1Colmn="3" /rid1.o&="6">Connection:</TextBlock>
<TextBlock /rid1Colmn="5" /rid1.o&="6">7ot encry'ted</TextBlock>
<//rid>
INCO - Facultad de Ingeniera Montevideo, Uruguay 36
,rid

La grilla necesita saber cuantas filas y colu#nas


#anea#os

Para esto defini#os las propiedades


Colu#nDefinition y *owDefinition

La locali9acin de cada ele#ento se .ace a


tra")s de attac.ed properties, indicando la fila y
la colu#na
o
Las grillas usan un es&ue#a de 51based inde7
o
Esto per#ite tener celdas "ac@as
INCO - Facultad de Ingeniera Montevideo, Uruguay 37
,rid

Las celdas pueden contener #%ltiples


ele#entos

El orden en el &ue aparecen en el (!'L


deter#ina &uien aparece :arriba; de &uien
o
Los &ue aparecen luego en el docu#ento, se dibuan
enci#a de los &ue aparecen antes
o
Este orden se deno#ina :B order;
o
Pode#os .acer un o"erride de esta propiedad, con
:Panel3Binde7;
INCO - Facultad de Ingeniera Montevideo, Uruguay 38
-niform,rid

! pesar de ser poderosa, a "eces la grilla es


un poco pesada de utili9ar

E7iste un "ersin si#plificada, deno#inada


Unifor#=rid

Las celdas tienen todas el #is#o ta#a>o,


por lo &ue no es necesario indicar
colecciones de filas y colu#nas para indicar
las di#ensiones
INCO - Facultad de Ingeniera Montevideo, Uruguay 39
-niform,rid

/ie#pre se crean las filas y colu#nas seg%n


se necesitan, #anteniendo el #is#o nu#ero
seg%n se agregan co#ponentes

Cada celda contiene a lo su#o un


co#ponente, por lo &ue no tene#os por&ue
indicarlo e7pl@cita#ente
INCO - Facultad de Ingeniera Montevideo, Uruguay 4!
-niform,rid
'9ni0orm@rid Te*t;loc:.Te*tAlignment"-&enter-+
<TextBlock Text="8" />
<TextBlock Text=","/>
<TextBlock Text="8"/>
<TextBlock Text="8"/>
<TextBlock Text="8"/>
<TextBlock Text=","/>
<TextBlock Text=","/>
<TextBlock Text=","/>
<TextBlock Text="8"/>
'/9ni0orm@rid+
INCO - Facultad de Ingeniera Montevideo, Uruguay 4
Can$as

E7isten situaciones en las &ue necesita#os


un co#pleto control de la posicin de cada
co#ponente

Esto suele suceder si &uere#os construir


una i#agen a partir de co#ponentes grAficos

En estos casos, no aplican las reglas de


layout antes descriptas
INCO - Facultad de Ingeniera Montevideo, Uruguay 42
Can$as

Es el #as si#ple de los paneles, ya &ue solo


indica#os donde "an los co#ponentes, relati"o
a los bordes del Can"as

En realidad, el Can"as no .ace ning%n layout,


si#ple#ente coloca las cosas donde le deci#os
&ue las colo&ue

-a#poco austa el ta#a>o de los ele#entos


dentro del Can"as, deAndolos con el ta#a>o
&ue estos tengan por defecto
INCO - Facultad de Ingeniera Montevideo, Uruguay 43
Can$as

!l colocar los ele#entos .ios, debe#os


especificar la posicin relati"a a los bordes
superiores +top C left,

/i no lo .ace#os todo &uedara colocado en


esa es&uina

-a#bi)n pode#os colocar los ele#entos


relati"os al borde inferior derec.o +botto# C
rig.t,
INCO - Facultad de Ingeniera Montevideo, Uruguay 44
Can$as
'&anvas ;ac:ground"-Aellow- Width"-#B2- Ceight"-#22-+
'Te*t;loc: &anvas.?e0t"-#2- &anvas.To!"-12-+
Cello
'/Te*t;loc:+
'Te*t;loc: &anvas.$ight"-#2- &anvas.;ottom"-12-+
world(
'/Te*t;loc:+
'/&anvas+
INCO - Facultad de Ingeniera Montevideo, Uruguay 45
Propiedades comunes

Widt.

Deig.t

'inWidt.

'a7Widt.

'inDeig.t

'a7Deig.t

Dori9ontal!lign#ent
INCO - Facultad de Ingeniera Montevideo, Uruguay 46
Propiedades comunes

Eertical!lign#ent

'argin

Padding

Eisibility

FlowDirection

Panel3Binde7

*ender-ransfor#

Layout-ransfor#
INCO - Facultad de Ingeniera Montevideo, Uruguay 47
Input
INCO - Facultad de Ingeniera Montevideo, Uruguay 48
Input

-ene#os tres tipos de entrada de usuario


o
'ouse
o
-eclado
o
$n< +-ablet pc, Dand .eld, /tylus, etc,

La entrada no procesada de un usuario es


en"iada al cdigo a tra")s de un
#ecanis#o de WPF, conocido co#o
:routed e"ent;

-a#bi)n e7iste una "ariante de #as alto


ni"el, deno#inada :Co##and;
INCO - Facultad de Ingeniera Montevideo, Uruguay 49
.outed &$ents

WPF define el siguiente #ecanis#o general


para tratar e"entos
o
Una clase e7pone #%ltiples e"entos
o
Un e"ento puede tener una cantidad arbitraria de
subscriptores
o
/i un e"ento no tiene .andlers registrados, es
ignorado
INCO - Facultad de Ingeniera Montevideo, Uruguay 5!
.outed &$ents

WPF utili9a routed e"ents

En "e9 de lla#ar a un .andler asociado al


e"ento &ue un control disparo, WPF .ace
una recorrida de un Arbol de ele#entos de
interfa9 de usuario, lla#ando a todos los
.andlers para el routed e"ent &ue este
asociado a cual&uier nodo al cual llegue#os
desde la ra@9 del Arbol
INCO - Facultad de Ingeniera Montevideo, Uruguay 5
.outed &$ents
INCO - Facultad de Ingeniera Montevideo, Uruguay 52
';utton PreviewMouse7own"-PreviewMouse7own;utton-
Mouse7own"-Mouse7own;utton-+
'@rid PreviewMouse7own"-PreviewMouse7own@rid-
Mouse7own"-Mouse7own@rid-+
'@rid.&olumn7e0initions+
'&olumn7e0inition /+
'&olumn7e0inition /+
'/@rid.&olumn7e0initions+
'&anvas PreviewMouse7own"-PreviewMouse7own&anvas-
Mouse7own"-Mouse7own&anvas-
Width"-12- Ceight"-#>- DerticalAlignment"-&enter-+
'6lli!se PreviewMouse7own"-PreviewMouse7own6lli!se-
Mouse7own"-Mouse7own6lli!se-
*,8ame"-my6lli!se-
&anvas.?e0t"-#- &anvas.To!"-#- Width"-#3- Ceight"-#3-
Eill"-Aellow- Stro:e"-;lac:- /+
'6lli!se &anvas.?e0t"-F.B- &anvas.To!"-B- Width"-1.B-
Ceight"-G- Eill"-;lac:- /+
'6lli!se &anvas.?e0t"-##- &anvas.To!"-B- Width"-1.B-
Ceight"-G- Eill"-;lac:- /+
'Path 7ata"-M BH#2 A GHG 2 2 2 #GH#2- Stro:e"-;lac:- /+
'/&anvas+
'Te*t;loc: @rid.&olumn"-#-+&lic:('/Te*t;loc:+
'/@rid+
'/;utton+
INCO - Facultad de Ingeniera Montevideo, Uruguay 53
.outed &$ents

/i uno de los ele#entos Elipse del ee#plo


anterior recibe una entrada, el routing de
e"entos .abilitar@a el Button, =rid, Can"as y
Ellipse a recibir el e"ento

Un *outed E"ent puede ser bubbling,


tunneling o direct
INCO - Facultad de Ingeniera Montevideo, Uruguay 54
/ue si!nifica esto0

Por ee#plo, un botn no esta restringido a


tener solo un te7tbloc< dentro

Por ee#plo, este botn, tiene /E$/ ele#entos


grAficos dentro

!duntar un .andler para cada ele#ento grafico


puede ser bastante pesado y poco eficiente
INCO - Facultad de Ingeniera Montevideo, Uruguay 55
1u((lin! routed e$ents

Co#ien9a buscando .andlers para el e"ento,


en el co#ponente &ue disparo el e"ento

Luego, busca en su padre, en el padre de su


padre, y as@ sucesi"a#ente

Este proceso se repite .asta llegar a la ra@9


del Arbol de co#ponentes
INCO - Facultad de Ingeniera Montevideo, Uruguay 56
Tunnelin! routed e$ents

Es si#ilar al anterior, pero co#ien9a la


b%s&ueda en la ra@9, .asta el co#ponente
&ue origino el e"ento

-rabaa en orden re"erso al anterior


INCO - Facultad de Ingeniera Montevideo, Uruguay 57
+irect e$ents

Este caso es si#ilar a co#o funcionan los


e"entos tradicionales en 32E-

/olo los .andlers directa#ente attac.eados al


ele#ento originarte son notificados
o
2o ocurre ning%n routing

Esto es %til para casos en los &ue el e"ento


tiene sentido en el conte7to del ele#ento
originanente
o
Por ee#plo, 'ouseEnter C 'ouseLea"e no tendr@a
sentido en el ee#plo anterior
INCO - Facultad de Ingeniera Montevideo, Uruguay 58
2andlin! del e$ento

Con la e7cepcin de los direct e"ents, WPF


define la #ayor@a de los routed e"ents en
pareas
o
Un bubbling y un tunneling
INCO - Facultad de Ingeniera Montevideo, Uruguay 59
2andlin! del e$ento

El tunneling e"ent sie#pre co#ien9a con


Pre"iew, y es lan9ado antes
o
Esto da la c.ance de &ue el padre "ea el e"ento
!2-E/ de &ue llegue a los .ios +de a.@ el
Pre"iew,
INCO - Facultad de Ingeniera Montevideo, Uruguay 6!
2andlin! del e$ento

El e"ento de pre"iew, es seguido de un


e"ento de bubbling
o
En general, solo interesa #anear este ulti#o

El Pre"iew suele usarse si &uere#os


blo&uear el e"ento o si &uere#os .acer algo
antes &ue llegue al .io
INCO - Facultad de Ingeniera Montevideo, Uruguay 6
using System;
using System.Windows;
using System.7iagnostics;
names!ace 6vent$outing {
!u4lic !artial class Window# , Window {
!u4lic Window#( {
.nitialiIe&om!onent( ;
%
void PreviewMouse7own;utton(o4Ject senderH $outed6ventArgs e
{ 7e4ug.Write?ine(-PreviewMouse7own;utton-; %
void Mouse7own;utton(o4Ject senderH $outed6ventArgs e
{ 7e4ug.Write?ine(-Mouse7own;utton-; %
void PreviewMouse7own@rid(o4Ject senderH $outed6ventArgs e
{ 7e4ug.Write?ine(-PreviewMouse7own@rid-; %
void Mouse7own@rid(o4Ject senderH $outed6ventArgs e
{ 7e4ug.Write?ine(-Mouse7own@rid-; %
void PreviewMouse7own&anvas(o4Ject senderH $outed6ventArgs e
{ 7e4ug.Write?ine(-PreviewMouse7own&anvas-; %
void Mouse7own&anvas(o4Ject senderH $outed6ventArgs e
{ 7e4ug.Write?ine(-Mouse7own&anvas-; %
void PreviewMouse7own6lli!se(o4Ject senderH $outed6ventArgs e
{ 7e4ug.Write?ine(-PreviewMouse7own6lli!se-; %
void Mouse7own6lli!se(o4Ject senderH $outed6ventArgs e
{ 7e4ug.Write?ine(-Mouse7own6lli!se-; %
%
%
INCO - Facultad de Ingeniera Montevideo, Uruguay 62
2andlin! del e$ento

!l eecutar lo anterior, obtene#os en la salida


estoF
o
Pre"iew'ouseDownButton
o
Pre"iew'ouseDown=rid
o
Pre"iew'ouseDownCan"as
o
Pre"iew'ouseDownEllipse
o
'ouseDownEllipse
o
'ouseDownCan"as
o
'ouseDown=rid
INCO - Facultad de Ingeniera Montevideo, Uruguay 63
Controles
INCO - Facultad de Ingeniera Montevideo, Uruguay 64
Controles

Un control es un co#ponente de interfa9 de


usuario, &ue pro"ee una interaccin
particular con el usuario

En Windows tene#os #uc.os ee#plos de


controles
o
-e7tBo7es, -e7tEditor, *adioButtons, etc3

Los controles son los blo&ues constructores


de cual&uier interfa9 WPF
INCO - Facultad de Ingeniera Montevideo, Uruguay 65
Controles

! pesar de &ue sole#os asociare una


deter#inada apariencia a un control, WPF
pro"ee la capacidad de alterar el loo< G feel de
los controles

Pode#os alterar aspectos si#ples co#o el color


de fondo o el tipo de letra, o pode#os .acer
ca#bios #as profundos, co#o la for#a y el
dibuo &ue presentan al usuario

En cual&uier caso, la escencia y funcionalidad


bAsica del control no se altera
INCO - Facultad de Ingeniera Montevideo, Uruguay 66
/ue es un control0

En WPF, los controles son todo co#porta#iento

Delegan a los te#plates el trabao de definir


co#o serA su apariencia

'uc.os fra#ewor<s re&uieren &ue


construya#os un custo# control cuando
&uere#os custo#i9ar la apariencia, pero en
WPF esto no es necesario
o
Los nested contents y los te#plates ofrecen una
solucin elegante y sencilla al proble#a
INCO - Facultad de Ingeniera Montevideo, Uruguay 67
/ue es un control0

2o precisa#os escribir un custo# control, !


'E20/ &ue precise#os un co#porta#iento
interacti"o diferente del brindado por los
controles built1in
INCO - Facultad de Ingeniera Montevideo, Uruguay 68
/ue es un control0

En WPF #uc.os ele#entos de interfa9


grafica no son controles, co#o ser Ellipse y
*ectangle
o
2o tienen un co#porta#iento intr@nseco
o
/on solo apariencia

Estos ele#entos de bao ni"el no e7tienden a


Control, sino &ue .eredan de
Fra#ewor<Ele#ent
INCO - Facultad de Ingeniera Montevideo, Uruguay 69
INCO - Facultad de Ingeniera Montevideo, Uruguay 7!
Como enca3a en un pro!rama0

Las partes "isibles del control son pro"istas


por el te#plate, en "e9 del control #is#o

2o esta co#pleta#ente desconectado, ya


&ue las usa para presentar la infor#acin

Estos aspectos "isuales son los &ue utili9a el


usuario para interactuar con el co#ponente
INCO - Facultad de Ingeniera Montevideo, Uruguay 7
Como enca3a en un pro!rama0

Lo anterior i#plica &ue si bien la parte "isual


puede ser ree#pla9ada, este ree#pla9o
debe cu#plir con ciertas responsabilidades

E7iste un :contrato; entre el control y su parte


"isual

En cierta for#a +inusual,, el control tiene un


dise>o basado en el patrn #odel1"iew1
controller
INCO - Facultad de Ingeniera Montevideo, Uruguay 72
Como enca3a en un pro!rama0

! pesar de &ue el control se .ace "isible a


tra")s de un te#plate, brinda sus ser"icios al
desarrollador a tra")s de un !P$

Los controles puede usar commands para


representar operaciones soportadas
o
Text(ox soporta copy4 cut4 paste4 etc.

Los controles puede pro"eer propiedades para


#odificar la for#a en co#o se "en y co#o
funcionan, as@ co#o la infor#acin asociada al
control +te7to en un te7tbo7, por ee#plo,
INCO - Facultad de Ingeniera Montevideo, Uruguay 73
Como enca3a en un pro!rama0

Pueden disparar e"entos cuando algo


i#portante o &ue deba ser atendido suceda

-a#bi)n pro"ee una serie de #)todos, a ser


usados desde el cdigo de la aplicacin,
cuando la interaccin deba seguir #as bien
un estilo progra#Atico
INCO - Facultad de Ingeniera Montevideo, Uruguay 74
Controles (uilt#in

WPF pro"ee una "ariedad bastante a#plia


de controles

'uc.os de ellos corresponden a los


controles t@picos de Windows, aun&ue 20
son wrappers sobre los controles WinH8
o
/on todos controles WPF nati"os, soportando
todas las caracter@sticas &ue esta#os "iendo de
WPF
INCO - Facultad de Ingeniera Montevideo, Uruguay 75
1utton

Es un control en el &ue el usuario puede


.acer clic<

El resultado del clic<, depende del


desarrollador de la aplicacin

/in e#bargo, en cual&uier caso e7isten


ciertas e7pectati"as relacionadas con dic.o
clic<
INCO - Facultad de Ingeniera Montevideo, Uruguay 76
1utton

Por ee#plo, clic<ear en un radio Button o un


C.ec<Bo7, suele alterar el aspecto grafico del
co#ponente, debido a un ca#bio en su estado

/in e#bargo, clic<ear en un botn, deber@a


producir un resultado

Utili9ar un botn es sencillo, basta agregar en el


(!'L
o
IButton Clic<4JButtonClic<edJKButtonICButtonK
INCO - Facultad de Ingeniera Montevideo, Uruguay 77
1utton

El contenido del ele#ento ('L +te7to :Button;,


es utili9ado en este caso co#o el Caption del
botn

El .andler del e"ento es especificado a tra"es


de la propiedad Clic<
o
El code be.ind debe contener un #)todo con el
#is#o no#bre &ue el especificado en el .andler
void ;utton&lic:ed(o4Ject senderH $outed6ventArgs e {
Message;o*.Show(-;utton was clic:ed-;
%
INCO - Facultad de Ingeniera Montevideo, Uruguay 78
1utton

WPF pro"ee los tres tipos estAndar de botn


INCO - Facultad de Ingeniera Montevideo, Uruguay 79
1utton

Pode#os utili9ar :control te#plates; para


custo#i9ar la for#a co#pleta en co#o se "e
un botn
INCO - Facultad de Ingeniera Montevideo, Uruguay 8!
Slider y Scroll(ar

/on controles &ue per#ite seleccionar un


"alor de un rango deter#inado de "alores

La apariencia es sie#pre la #is#a


o
Una l@nea, en la cual tene#os una escala y un
selector #o"ible
o
Este ulti#o es el &ue per#ite austar el "alor
INCO - Facultad de Ingeniera Montevideo, Uruguay 8
Slider y Scroll(ar

!#bos controles son si#ilares, la diferencia


esta #as bien en el uso

/crollbar
o
/e utili9a unto con un Area scrolleable

/lider
o
/e utili9a para seleccionar un "alor especifico de
un rango de "alores
INCO - Facultad de Ingeniera Montevideo, Uruguay 82
Slider y Scroll(ar
INCO - Facultad de Ingeniera Montevideo, Uruguay 83
Pro!ress1ar

$ndica cuanto de un proceso largo, una


aplicacin .a co#pletado

Pro"ee feedbac< al usuario de c#o .a


progresado el trabao, unto con una idea
general de cuanto falta por ter#inar
INCO - Facultad de Ingeniera Montevideo, Uruguay 84
Controles de texto

WPF pro"ee controles para editar y


desplegar te7to, siendo el #as si#ple de
ellos el -e7tBo7

Este pro"ee una l@nea si#ple de te7to, &ue


puede ser desplegada y editada
o
/i coloca#os !ccepts*eturn en true, entonces
pode#os .acer &ue sea #ultilinea
INCO - Facultad de Ingeniera Montevideo, Uruguay 85
Controles de texto

El te7tbo7 pro"ee facilidades de


procesa#iento de te7to si#ples, co#o ser
o
Funciones de clipboard +cut, copy, paste,
o
/eleccin de te7to
o
Undo y *edo

!lgunos ee#plosL
INCO - Facultad de Ingeniera Montevideo, Uruguay 86
Controles de texto
INCO - Facultad de Ingeniera Montevideo, Uruguay 87
Controles de texto

-e7tBo7 y PasswordBo7 pro"een


propiedades -e7t y Password
respecti"a#ente para obtener el "alor
ingresado en ellos
o
!#bas propiedades son de tipo /tring

Para situaciones en donde precisa#os te7to


con contenido #as allA del te7to plano,
tene#os el *ic.-e7tBo7
INCO - Facultad de Ingeniera Montevideo, Uruguay 88
Controles de texto

*ic.-e7tBo7 soporta los co#andos definidos


por la clase EditingCo##ands

Esto incluye las opciones clAsicas de


for#ateo co#o bold, italic, plain, etc, y los
s.ortcuts de teclas tradicionales, co#o
C-*LMB, etc
INCO - Facultad de Ingeniera Montevideo, Uruguay 89
Controles de texto

*ic.-e7tBo7 reconoce ta#bi)n te7to *-F


o
Pode#os pastear de Word y de $nternet E7plorer
INCO - Facultad de Ingeniera Montevideo, Uruguay 9!
Controles de texto

-anto -e7tBo7 co#o *ic.-e7tBo7 ofrecen


funcionalidades de spelling

/olo tene#os &ue establecer la propiedad


attac.ed /pellC.ec<ing3$sEnabled en true
INCO - Facultad de Ingeniera Montevideo, Uruguay 9
Controles de texto

El diccionario utili9ado para reali9ar el


spelling cu#ple con el atributo 7#lFlang
INCO - Facultad de Ingeniera Montevideo, Uruguay 92
ToolTip

Per#ite &ue un Label flotante sea


desplegado sobre alguna seccin de la
interfa9 de usuario

/olo pode#os utili9arlo en conunto con otro


co#ponente de la interfa9 de usuario

/e "uel"e "isible cuando el puntero del


#ouse se #ue"e +.o"er, enci#a del target
INCO - Facultad de Ingeniera Montevideo, Uruguay 93
ToolTip

Utili9a#os la propiedad -ool-ip del control


para asociarlo al target
I-e7tBo7 Widt.4J655J ToolTip56Type somet%in! %ere6 78
I-e7tBo7 Widt.4J655JK
I-e7tBo73-ool-ipK
I-ool-ip Content4J-ype so#et.ing .ereJ CK
IC-e7tBo73-ool-ipK
IC-e7tBo7K
INCO - Facultad de Ingeniera Montevideo, Uruguay 94
ToolTip

0 pode#os elaborar un poco #as el tooltip


I-e7tBo7 Widt.4J655JK
I-e7tBo73-ool-ipK
I-e7tBloc< Font/i9e4J8NJK
IEllipse Fill4J0rangeJ Widt.4J85J Deig.t4J85J CK
Plain te7t is I$talicKsoIC$talicK
I/pan FontFa#ily4J0ld Englis. -e7t '-JKlast centuryIC/panK
IEllipse Fill4J0rangeJ Widt.4J85J Deig.t4J85J CK
IC-e7tBloc<K
IC-e7tBo73-ool-ipK
IC-e7tBo7K
INCO - Facultad de Ingeniera Montevideo, Uruguay 95
,roup1ox y &xpander

/on #uy si#ilares entre si

Pro"een un container para contenido arbitrario,


y lugar para un .eader

/on #uy si#ilares, pero


o
el E7pander puede ser e7pandido y colapsado,
o
el =roupBo7 sie#pre #uestra su contenido

!#bos deri"an de DeaderedContentControl


INCO - Facultad de Ingeniera Montevideo, Uruguay 96
,roup1ox y &xpander
INCO - Facultad de Ingeniera Montevideo, Uruguay 97
<#tack4anel ,rientation=")ori9ontal">
'@rou!;o* Ceader"-@lass-+
<Border Margin="6" Backgrond=":$ite" 4adding="3">
<#tack4anel>
<.adioBtton Content=")alf;fll" <%C$ecked="Tre" />
<.adioBtton Content=")alf;em'ty" />
</#tack4anel>
</Border>
<//ro'Box>
'6*!ander Ceader"-@lass- .s6*!anded"-True-
Backgrond="=def" >ertical?lignment="Center"
Min:idt$="@30 Margin="53!3">
<Border Margin="6" Backgrond=":$ite" 4adding="3">
<#tack4anel>
<.adioBtton Content=")alf;fll" <%C$ecked="Tre" />
<.adioBtton Content=")alf;em'ty" />
</#tack4anel>
</Border>
</-x'ander>
</#tack4anel>
INCO - Facultad de Ingeniera Montevideo, Uruguay 98
,roup1ox y &xpander

2o solo el Area de contenido puede ser


cual&uier cosa, sino &ue en el .eader
pode#os colocar contenido arbitrario

Utili9a una for#a dual de content #odel


INCO - Facultad de Ingeniera Montevideo, Uruguay 99
</ro'Box>
'@rou!;o*.Ceader+
<#tack4anel ,rientation=")ori9ontal">
<TextBlock Text="#lig$tly" Font#tyle="<talic"
>ertical?lignment="Center" />
<Media-lement #orce="C:A>ideo%ABtterfly1&m("
:idt$="B3" />
<TextBlock Text=" more " >ertical?lignment="Center" />
<-lli'%e Fill=".ed" :idt$="63" )eig$t="C3" />
<TextBlock Text=" intere%ting "
>ertical?lignment="Center"
Font:eig$t="Bold" />
<Btton Content="D$eader" >ertical?lignment="Center" />
</#tack4anel>
'/@rou!;o*.Ceader+
<TextBlock Text="Boring content" />
<//ro'Box>
INCO - Facultad de Ingeniera Montevideo, Uruguay !!
'ist Controls

WPF ofrece "arios controles &ue pueden


presentar #%ltiples ele#entos
o
ListBo7, Co#boBo7 y ListEiew presentan una
lista de ele#entos
o
-reeEiew presenta una erar&u@a de ele#entos
o
-abControl presenta una lista de ite#s +los tabs,

-odos .eredan de $te#sControl


INCO - Facultad de Ingeniera Montevideo, Uruguay !
'ist Controls

La for#a #as fAcil de usarlos, es agregar


controles a su propiedad $te#s
<ComboBox>
<Btton>ClickE</Btton>
<TextBlock>)ello! &orld</TextBlock>
<#tack4anel ,rientation=")ori9ontal">
<TextBlock>-lli'%e:</TextBlock>
<-lli'%e Fill="Ble" :idt$="533" />
</#tack4anel>
</ComboBox>
INCO - Facultad de Ingeniera Montevideo, Uruguay !2
'ist Controls
INCO - Facultad de Ingeniera Montevideo, Uruguay !3
'ist Controls

Cada control &ue se agrega a uno de estos


list controls, es colocado auto#atica#ente en
un contenedor para &ue pueda ser colocado
en el control

Cada control tiene su ite# container


apropiado
o
Co#boBo7$te#, ListBo7$te#, -ab$te#,
ListEiew$te# y -reeEiew$te#
INCO - Facultad de Ingeniera Montevideo, Uruguay !4
'ist Controls

En el ee#plo anterior, este container es


generado auto#Atica#ente

Este proceso se deno#ina $te# Container


=eneration

Es con"eniente, pero a "eces necesita#os


#as control
INCO - Facultad de Ingeniera Montevideo, Uruguay !5
<TabControl>
'Ta4.tem Ceader"-K;utton-+
<Btton>ClickE</Btton>
'/Ta4.tem+
'Ta4.tem+
'Ta4.tem.Ceader+
<TextBlock Font#i9e="5B" FontFamily="4alatino
Linoty'e">
<?cce%%Text>DText</?cce%%Text>
</TextBlock>
'/Ta4.tem.Ceader+
<TextBlock>)ello! &orld</TextBlock>
'/Ta4.tem+
'Ta4.tem+
'Ta4.tem.Ceader+
<-lli'%e Fill="Ble" :idt$="33" )eig$t="63" />
'/Ta4.tem.Ceader+
<#tack4anel ,rientation=")ori9ontal">
<TextBlock>-lli'%e:</TextBlock>
<-lli'%e Fill="Ble" :idt$="533" />
</#tack4anel>
</Tab<tem>
</TabControl>
INCO - Facultad de Ingeniera Montevideo, Uruguay !6
'ist9iew

ListEiew deri"a de ListBo7, dando la posibilidad


de "er los datos estilo grilla

Debe#os describir las colu#nas de dic.a grilla


<Li%t>ie&>
'?istDiew.Diew+
'@ridDiew Allows&olumn$eorder"-true-+
'@ridDiew&olumn Ceader"-8ame- /+
'@ridDiew&olumn Ceader"-?ine S!acing- /+
'@ridDiew&olumn Ceader"-Sam!le- /+
'/@ridDiew+
'/?istDiew.Diew+
</Li%t>ie&>
INCO - Facultad de Ingeniera Montevideo, Uruguay !7
<Li%t>ie& <tem%#orce="Fx:#tatic Font%1#y%temFontFamilie%G">
<Li%t>ie&1>ie&>
</rid>ie&>
</rid>ie&Colmn )eader="7ame"
7is!layMem4er;inding"-{;inding Source%- /+
</rid>ie&Colmn )eader="Line #'acing"
7is!layMem4er;inding"-{;inding ?ineS!acing%- /+
</rid>ie&Colmn )eader="#am'le">
'@ridDiew&olumn.&ellTem!late+
'7ataTem!late+
'Te*t;loc: EontEamily"-{;inding%- EontSiIe"-12-
Te*t"-A;&76E@a4cde0g- /+
'/7ataTem!late+
'/@ridDiew&olumn.&ellTem!late+
<//rid>ie&Colmn>
<//rid>ie&>
</Li%t>ie&1>ie&>
</Li%t>ie&>
INCO - Facultad de Ingeniera Montevideo, Uruguay !8
Tree9iew

Presenta una "isin erAr&uica de los datos


en "e9 de una lista secuencial

Esto i#plica &ue los ele#entos


-reeEiew$te# deben estar anidados entre si
INCO - Facultad de Ingeniera Montevideo, Uruguay !9
<Tree>ie&>
<Tree>ie&<tem )eader="Fir%t to';le(el item" <%-x'anded="Tre">
<Tree>ie&<tem )eader="C$ild" />
<Tree>ie&<tem )eader="?not$er c$ild" <%-x'anded="Tre">
<Tree>ie&<tem )eader="/randc$ild" />
<Tree>ie&<tem )eader="/randc$ild 6" />
</Tree>ie&<tem>
<Tree>ie&<tem )eader="? t$ird c$ild" />
</Tree>ie&<tem>
<Tree>ie&<tem )eader="#econd to';le(el item">
<Tree>ie&<tem )eader="C$ild a" />
<Tree>ie&<tem )eader="C$ild b" />
<Tree>ie&<tem )eader="C$ild c" />
</Tree>ie&<tem>
<Tree>ie&<tem <%-x'anded="Tre">
<Tree>ie&<tem1)eader>
<#tack4anel ,rientation=")ori9ontal">
<-lli'%e Fill="Ble" :idt$="5"" )eig$t="5"" />
<TextBlock Text="T$ird to';le(el item" />
<-lli'%e Fill="Ble" :idt$="5"" )eig$t="5"" />
</#tack4anel>
</Tree>ie&<tem1)eader>
<Tree>ie&<tem )eader="C$ild a" />
<Tree>ie&<tem )eader="C$ild b" />
<Tree>ie&<tem )eader="C$ild c" />
</Tree>ie&<tem>
</Tree>ie&>
INCO - Facultad de Ingeniera Montevideo, Uruguay !
:enues

Per#ite definir los clAsicos #enues de las


"entanas yCo los #en%s e#ergentes de las
aplicaciones
INCO - Facultad de Ingeniera Montevideo, Uruguay
<Men>
<Men<tem )eader="DFile">
<Men<tem )eader="D7e&" />
<Men<tem )eader="D,'en111" />
<Men<tem )eader="D#a(e" />
<Men<tem )eader="#aD(e ?%111" />
<#e'arator />
<Men<tem )eader="4age #eDt'111" />
<Men<tem )eader="D4rint111" />
<#e'arator />
<Men<tem )eader="-Dxit" />
</Men<tem>
<Men<tem )eader="D-dit">
<Men<tem )eader="DHndo" />
<Men<tem )eader="D.edo" />
<#e'arator />
<Men<tem )eader="CDt" />
<Men<tem )eader="DCo'y" />
<Men<tem )eader="D4a%te" />
<Men<tem )eader="D2elete" />
<#e'arator />
<Men<tem )eader="#elect D?ll" />
</Men<tem>
<Men<tem )eader="D)el'">
<Men<tem )eader=")el' DTo'ic%" />
<Men<tem )eader="D?bot111" />
</Men<tem>
</Men>
INCO - Facultad de Ingeniera Montevideo, Uruguay 2
Context:enu
</rid Backgrond="Tran%'arent">
</rid1ContextMen>
'&onte*tMenu+
'Menu.tem Ceader"-Eoo- /+
'Menu.tem Ceader"-;ar- /+
'/&onte*tMenu+
<//rid1ContextMen>
111
<//rid>
INCO - Facultad de Ingeniera Montevideo, Uruguay 3
Tool(ars

La #ayor@a de las aplicaciones de Windows


pro"een toolbars, co#o #edio de acceso
rApido a un grupo de funcionalidades
INCO - Facultad de Ingeniera Montevideo, Uruguay 4
Tool(ars

WPF pro"ee los controles -oolbar-ray y


-oolbar

-oolbar-ray pro"ee un container en el cual


pode#os agregar #ultiples controles -oolbar
INCO - Facultad de Ingeniera Montevideo, Uruguay 5
<ToolBarTray>
<ToolBar>
<Btton>
<Can(a% :idt$="5C" )eig$t="5C" #na'%To2e(ice4ixel%="Tre">
<4olygon #troke="Black" #trokeT$ickne%%="31""
4oint%="61"!51" @1"!51" 561"!I1" 561"!5" 61"!5"">
<4olygon1Fill>
<Linear/radientBr%$ #tart4oint="5!5" -nd4oint="316!31J">
</radient#to' ,ff%et="3" Color="=???" />
</radient#to' ,ff%et="5" Color=":$ite" />
</Linear/radientBr%$>
</4olygon1Fill>
</4olygon>
<4olygon #troke="Black" Fill="2ark/ray" #trokeT$ickne%%="31""
#trokeLineKoin="Be(el"
4oint%="@1"!51" @1"!I1" 561"!I1"" />
</Can(a%>
</Btton>
<Btton>
<Can(a% :idt$="5C" )eig$t="5C" >
<4olygon #troke="Black" #trokeT$ickne%%="31"" Fill="L$aki"
#na'%To2e(ice4ixel%="Tre"
4oint%="31"!5I1" 31"!I1" 51"!31" C1"!31" B1"!"1" 561"!"1" 561"!5I1"" />
<4olygon #troke="Black" #na'%To2e(ice4ixel%="Tre"
#trokeT$ickne%%="31""
4oint%="51"!5I1" I1"!J1" 5"1"!J1" 561"!5I1"" >
<4olygon1Fill>
<Linear/radientBr%$ #tart4oint="316"!3" -nd4oint="31"!5">
</radient#to' ,ff%et="3" Color="=FFI" />
</radient#to' ,ff%et="5" Color="=C?J" />
</Linear/radientBr%$>
</4olygon1Fill>
</4olygon>
<4at$ #troke="Ble" #trokeT$ickne%%="5"
2ata="M B!6 C @!5 56!5 5I!3" />
<4olygon Fill="Ble" 4oint%="5"!5 5"1"!I1" 56!I" />
</Can(a%>
</Btton>
</ToolBar>
<ToolBar>
<Btton>#econd toolbar</Btton>
<C$eckBox <%C$ecked="Tre">C$oice</C$eckBox>
</ToolBar>
</ToolBarTray>
INCO - Facultad de Ingeniera Montevideo, Uruguay 6
,ridSplitter

Per#ite austar las di#ensiones del layout de


la aplicacin, austando los ta#a>os una
colu#na o fila de una grilla
</rid )eig$t="533" :idt$="I33">
</rid1Colmn2efinition%>
<Colmn2efinition :idt$="5M" />
<Colmn2efinition :idt$="C" />
<Colmn2efinition :idt$="6M" />
<//rid1Colmn2efinition%>
<-lli'%e /rid1Colmn="3" Fill=".ed" />
'@ridS!litter @rid.&olumn"-#-
CoriIontalAlignment"-Stretch- /+
<-lli'%e /rid1Colmn="6" Fill="Ble" />
<//rid>
INCO - Facultad de Ingeniera Montevideo, Uruguay 7
,ridSplitter
INCO - Facultad de Ingeniera Montevideo, Uruguay 8
+ata 1indin!
INCO - Facultad de Ingeniera Montevideo, Uruguay 9
+ata 1indin!

El propsito de la gran #ayor@a de las


aplicaciones &ue tienen interaccin con el
usuario, es presentar datos, y per#itir &ue
los usuarios #odifi&uen dic.os datos

!lgunas tareas &ue tendre#os &ue reali9ar


con los datosF
o
'ostrarlos, con"ertirlos, ordenarlos, filtrarlos,
relacionarlos, y editarlos
INCO - Facultad de Ingeniera Montevideo, Uruguay 2!
+ata 1indin!

WPF incorpora un #otor de data binding, &ue


per#ite reali9ar #uc.as de las tareas
anteriores, con #enos cdigo

2o &uita &ue las tareas puedan .acerse sin


este #otor, solo &ue &uedan #as co#pleas

Por ee#ploL
INCO - Facultad de Ingeniera Montevideo, Uruguay 2
Sin +ata 1indin!
INCO - Facultad de Ingeniera Montevideo, Uruguay 22
Sin +ata 1indin!

Pode#os i#ple#entar lo anterior con un


si#ple (!'L
;<## Window1.xaml ##8
IWindow 333K
I=ridK
333
I-e7tBloc< 333K2a#eFIC-e7tBloc<K
I-e7tBo7 2a#e4Jna#e-e7tBo7J 333 CK
I-e7tBloc< 333K!geFIC-e7tBloc<K
I-e7tBo7 2a#e4Jage-e7tBo7J 333 CK
IButton 2a#e4Jbirt.dayButtonJ 333KBirt.dayICButtonK
IC=ridK
ICWindowK
INCO - Facultad de Ingeniera Montevideo, Uruguay 23
Sin +ata 1indin!
public class Person O
string na#eP
public string 2a#e O
get O return t.is3na#eP Q
set O t.is3na#e 4 "alueP Q
Q
int ageP
public int !ge O
get O return t.is3ageP Q
set O t.is3age 4 "alueP Q
Q
public Person+ , OQ
public Person+string na#e, int age, O
t.is3na#e 4 na#eP
t.is3age 4 ageP
Q
Q
INCO - Facultad de Ingeniera Montevideo, Uruguay 24
77 Window1.xaml.cs
333
public class Person O333Q
public partial class Window6 F Window O
Person person 5 new Person=6Tom64 11>?
public Window6+ , O
$nitiali9eCo#ponent+ ,P
77 ill initial person fields
t%is.nameText1ox.Text 5 person.@ame?
t%is.a!eText1ox.Text 5 person.A!e.ToStrin!=>?
CC Dandle t.e birt.day button clic< e"ent
t.is3birt.dayButton3Clic< M4 birt.dayButtonRClic<P
Q
"oid birt.dayButtonRClic<+obect sender, *outedE"ent!rgs e, O
AAperson.A!e?
'essageBo73/.ow+string3For#at+
JDappy Birt.day, O5Q, age O6QSJ,
person32a#e,
person3!ge,,
JBirt.dayJ,P
Q
Q
INCO - Facultad de Ingeniera Montevideo, Uruguay 25
Sin +ata 1indin!

El cdigo crea un obeto persona, y lo usa


para iniciali9ar los ca#pos de la "entana

Cuando se presiona el botn del


cu#plea>os, la persona se #odifica, y los
datos se #uestran en un #essage bo7
INCO - Facultad de Ingeniera Montevideo, Uruguay 26
Sin +ata 1indin!
INCO - Facultad de Ingeniera Montevideo, Uruguay 27
Sin +ata 1indin!

El ee#plo es bastante sencillo

Los ca#bios en el obeto se reflean en un


'essageBo7

Podr@a#os #eorarlo para &ue los ca#bios


afecten la "entana principal
INCO - Facultad de Ingeniera Montevideo, Uruguay 28
Sin +ata 1indin!
"oid birt.dayButtonRClic<+obect sender,
*outedE"ent!rgs e, O
AAperson.A!e?
77 :anually update t%e -I
t%is.a!eText1ox.Text 5 person.A!e.ToStrin!=>?
'essageBo73/.ow+string3For#at+
JDappy Birt.day, O5Q, age O6QSJ,
person32a#e,
person3!ge,,
JBirt.dayJ,P
Q
INCO - Facultad de Ingeniera Montevideo, Uruguay 29
Sin +ata 1indin!

La for#a de .acer #as dinA#ica nuestra


aplicacin, agrega#os una l@nea de cdigo

Parece una for#a sencilla de #eorarla, pero


tiene un proble#a

2o escala bien a #edida &ue la aplicacin se


.ace #as co#plicada, re&uiriendo cada "e9
#as de estas l@neas de cdigo
INCO - Facultad de Ingeniera Montevideo, Uruguay 3!
Cam(ios en los o(3etos

Una for#a #as robusta para &ue la U$ lle"e


registro de los ca#bios, es &ue el obeto
a"ise cuando una propiedad ca#bia, por
ee#plo, lan9ando un e"ento

La for#a correcta de .acer esto, es &ue el


obeto i#ple#ente I@otifyPropertyC%an!ed
INCO - Facultad de Ingeniera Montevideo, Uruguay 3
usin! System.Component:odel? 77 I@otifyPropertyC%an!ed
333
public class Person B I@otifyPropertyC%an!ed C
77 I@otifyPropertyC%an!ed :em(ers
pu(lic e$ent PropertyC%an!ed&$ent2andler
PropertyC%an!ed?
protected $oid @otify=strin! prop@ame> C
if= t%is.PropertyC%an!ed <5 null > C
PropertyC%an!ed=
t%is4
new PropertyC%an!ed&$entAr!s=prop@ame>>?
D
D
...
INCO - Facultad de Ingeniera Montevideo, Uruguay 32
string na#eP
public string 2a#e O
get O return t.is3na#eP Q
set O
if+ t.is3na#e 44 "alue , O returnP Q
t.is3na#e 4 "alueP
@otify=6@ame6>?
Q
Q
int ageP
public int !ge O
get O return t.is3ageP Q
set O
if+t.is3age 44 "alue , O returnP Q
t.is3age 4 "alueP
@otify=6A!e6>?
Q
Q
public Person+ , OQ
public Person+string na#e, int age, O
t.is3na#e 4 na#eP
t.is3age 4 ageP
Q
Q
INCO - Facultad de Ingeniera Montevideo, Uruguay 33
@otificacin de cam(ios

Cuando la propiedad !ge de la persona


ca#bia, debida a la accin del .andler de la
"entana, el obeto persona .ace un raise del
e"ento PropertyC%an!ed

Podr@a#os #anual#ente capturar este


e"ento, colocar un .andler y reaccionar ante
el #is#o, co#o .ace#os con cual&uier otro
.andlerL
INCO - Facultad de Ingeniera Montevideo, Uruguay 34
@otificacin de cam(ios
77 Window1.xaml.cs
333
public class Person F $2otifyPropertyC.anged O333Q
public partial class Window6 F Window O
Person person 5 new Person=6Tom64 11>?
public Window6+ , O
$nitiali9eCo#ponent+ ,P
CC Fill initial person fields
t.is3na#e-e7tBo73-e7t 4 person32a#eP
t.is3age-e7tBo73-e7t 4 person3!ge3-o/tring+ ,P

77 Watc% for c%an!es in TomEs properties
person.PropertyC%an!ed A5 personFPropertyC%an!ed?
CC Dandle t.e birt.day button clic< e"ent
t.is3birt.dayButton3Clic< M4 birt.dayButtonRClic<P
Q
INCO - Facultad de Ingeniera Montevideo, Uruguay 35
@otificacin de cam(ios
$oid personFPropertyC%an!ed=
o(3ect sender4
PropertyC%an!ed&$entAr!s e> C
switc%= e.Property@ame > C
case 6@ame6B
t%is.nameText1ox.Text 5 person.@ame?
(rea*?
case 6A!e6B
t%is.a!eText1ox.Text 5 person.A!e.ToStrin!=>?
(rea*?
D
D
INCO - Facultad de Ingeniera Montevideo, Uruguay 36
@otificacin de cam(ios
"oid birt.dayButtonRClic<+obect sender,
*outedE"ent!rgs e, O
AAperson.A!e?
77 personFPropertyC%an!ed will update a!eText1ox
'essageBo73/.ow+
string3For#at+
JDappy Birt.day, O5Q, age O6QSJ,
person32a#e,
person3!ge,,
JBirt.dayJ,P
Q
Q
INCO - Facultad de Ingeniera Montevideo, Uruguay 37
@otificacin de cam(ios

Con el cdigo anterior, ocurre una cascada


de e"entos &ue .acen &ue el .andler del
botn del cu#plea>os, no tenga &ue
actuali9ar la U$

=rAfica#ente, se puede apreciar en el


siguiente diagra#a este fluo de e"entosL
INCO - Facultad de Ingeniera Montevideo, Uruguay 38
INCO - Facultad de Ingeniera Montevideo, Uruguay 39
@otificacin de cam(ios

/in e#bargo, .e#os resuelto parte del


proble#a

!un tene#os &ue actuali9ar #anual#ente en


el .andler del ca#bio de propiedad, la
interfa9 grafica

Pero tene#os otro proble#aL


INCO - Facultad de Ingeniera Montevideo, Uruguay 4!
Cam(ios en la -I

2ecesita#os ta#bi)n un #ecanis#o &ue


detecte los ca#bios en la interfa9 grafica, y
los propague .acia el obeto

En ee#plo anterior, si ca#bia#os el no#bre


y presiona#os el botn Birt.day, puede
pasarnos estoL
INCO - Facultad de Ingeniera Montevideo, Uruguay 4
Cam(ios en la -I
INCO - Facultad de Ingeniera Montevideo, Uruguay 42
Cam(ios en la -I

2ecesita#os #onitorear la propiedad -e7t


del te7tbo7, actuali9ando en caso afir#ati"o
la propiedad
INCO - Facultad de Ingeniera Montevideo, Uruguay 43
public partial class Window6 F Window O
Person person 4 new Person+J-o#J, 66,P
public Window6+ , O
$nitiali9eCo#ponent+ ,P
CC Fill initial person fields
t.is3na#e-e7tBo73-e7t 4 person32a#eP
t.is3age-e7tBo73-e7t 4 person3!ge3-o/tring+ ,P
CC Watc. for c.anges in -o#Ts properties
person3PropertyC.anged M4 personRPropertyC.angedP
77 Watc% for c%an!es in t%e controls
t%is.nameText1ox.TextC%an!ed A5 nameText1oxFTextC%an!ed?
t%is.a!eText1ox.TextC%an!ed A5 a!eText1oxFTextC%an!ed?
CC Dandle t.e birt.day button clic< e"ent
t.is3birt.dayButton3Clic< M4 birt.dayButtonRClic<P
Q
333
Cam(ios en la -I
INCO - Facultad de Ingeniera Montevideo, Uruguay 44
$oid nameText1oxFTextC%an!ed=o(3ect sender4 TextC%an!ed&$entAr!s e> C
person.@ame 5 nameText1ox.Text?
D
$oid a!eText1oxFTextC%an!ed=o(3ect sender4 TextC%an!ed&$entAr!s e> C
int a!e 5 G?
if= int.TryParse=a!eText1ox.Text4 out a!e> > C
person.A!e 5 a!e?
D
D
"oid birt.dayButtonRClic<+obect sender, *outedE"ent!rgs e, O
MMperson3!geP
'essageBo73/.ow+string3For#at+
JDappy Birt.day, O5Q, age O6QSJ,
person.@ame4
person.A!e>4
JBirt.day:
,P
Q
Q
Cam(ios en la -I
INCO - Facultad de Ingeniera Montevideo, Uruguay 45
Cam(ios en la -I
INCO - Facultad de Ingeniera Montevideo, Uruguay 46
SincroniHacin

/in i#portar entonces en donde se de el


ca#bio +obeto ,U$,, a#bos ele#entos se
#antienen sincroni9ados

/in e#bargo, a pesar de &ue tene#os lo &ue


buscAba#os, tu"i#os &ue escribir bastante
cdigo
INCO - Facultad de Ingeniera Montevideo, Uruguay 47
SincroniHacin

El constructor de Window6 tu"o &ue


iniciali9ar los datos en los controles,
con"irtiendo seg%n necesidad a /tring

El constructor Window6 tu"o &ue enganc.ar


los .andlers de los e"entos
PropertyC.anged del obeto Person
INCO - Facultad de Ingeniera Montevideo, Uruguay 48
SincroniHacin

El e"ento PropertyC.anged, para to#ar los


nue"os datos de la persona, con"irtiendo a
/tring seg%n sea necesario

El constructor de Window6 debe enganc.ar


el .andler de -e7tC.anged

Dandler de -e7tC.anged para propagar


ca#bios en la U$ a la persona, con"irtiendo
de /tring seg%n sea necesario
INCO - Facultad de Ingeniera Montevideo, Uruguay 49
SincroniHacin

Clara#ente, la cantidad de cdigo a escribir


se nos "a de las #anos, si la cantidad de
obetos, propiedades de los obetos y
e"entos au#enta

!de#As, este tipo de tareas parecen


bastante repetiti"as

De a.@ &ue WPF las abstrae en


funcionalidades del fra#ewor<, dAndole el
no#bre de Data Binding
INCO - Facultad de Ingeniera Montevideo, Uruguay 5!
WP +ata 1indin!

Consiste en registrar un par de propiedades,


una de ellas en un obeto +Person32a#e,, la
otra en la interfa9 grafica +-e7tbo73-e7t,, con
el #otor de Data Binding

Este #otor es el &ue se encarga de


#antener a#bas sincroni9adas, con"irtiendo
los tipos de datos seg%n sea necesario
INCO - Facultad de Ingeniera Montevideo, Uruguay 5
WP +ata 1indin!
INCO - Facultad de Ingeniera Montevideo, Uruguay 52
1indin!s

Para registrar a#bas propiedades, utili9a#os


el obeto Binding

-odas las siguientes son e&ui"alentesL


I-e7tBo7 333K
;Text1ox.Text8
;1indin! Pat%56A!e6 78
;7Text1ox.Text8
IC-e7tBo7K
I-e7tBo7 Text56C1indin! Pat%5A!eD6 78
I-e7tBo7 Text56C1indin! A!eD6 78
INCO - Facultad de Ingeniera Montevideo, Uruguay 53
1indin!s

!lgo un poco #as elaboradoL


I-e7tBo7 333K
I-e7tBo73ForegroundK
;1indin!
Pat%56A!e6 :ode56IneWay6
Source56CStatic.esource TomD6
Con$erter56CStatic.esource a!eCon$erterD6 78
IC-e7tBo73ForegroundK
IC-e7tBo7K
INCO - Facultad de Ingeniera Montevideo, Uruguay 54
1indin!s

Eol"iendo a este ee#plo,

es e&ui"alente aL
I-e7tBo7 Text56C1indin! Pat%5@ameD6 78
INCO - Facultad de Ingeniera Montevideo, Uruguay 55
1indin!s

En general, pode#os pensar &ue Pat. es la


ruta para acceder a una propiedad dentro del
obeto fuente de la infor#acin

En el caso anterior, el binding se da entre el


-e7tBo7 +propiedad -e7t, y la propiedad !ge
de un obeto &ue serA deter#inado luego
INCO - Facultad de Ingeniera Montevideo, Uruguay 56
1indin!s

En el caso anterior, el te7tbo7 act%a co#o el


binding target , consu#iendo los ca#bios del
binding source

El binding target puede ser cual&uier


ele#ento WPF, pero solo pode#os bindear
contra las dependency properties

El binding source puede ser cual&uier


propiedad de cual&uier ele#ento WPF
INCO - Facultad de Ingeniera Montevideo, Uruguay 57
1indin!s

En este caso, el binding source puede


especificarse en runti#e

/in e#bargo, en general, el binding source


pro"endrA de un Data Conte7t
INCO - Facultad de Ingeniera Montevideo, Uruguay 58
+ata source implcitos

Un Data Conte7t es el lugar en el &ue los


bindings buscan por su data source si no se
les .a dado ninguna instruccin especial

En WPF todo Fra#ewor<Ele#ent y todo


Fra#ewor<ContentEle#ent tienen una
propiedad DataConte7t
INCO - Facultad de Ingeniera Montevideo, Uruguay 59
+ata source implcitos

Esta es de tipo 0bect, por lo &ue pode#os


colocar cual&uier cosa &ue desee#os
INCO - Facultad de Ingeniera Montevideo, Uruguay 6!
+ata source implcitos

Cuando se busca un obeto para utili9ar


co#o data source de un binding, se recorre
el Arbol de co#ponentes en for#a in"ersa,
partiendo del co#ponente en cuestin

Esto es bastante %til cuando &uere#os &ue


dos co#ponentes co#partan el #is#o data
source
INCO - Facultad de Ingeniera Montevideo, Uruguay 6
+ata source implcitos
INCO - Facultad de Ingeniera Montevideo, Uruguay 62
+ata source implcitos

Esto funciona as@L


o
El binding busca un DataConte7t en el propio
-e7tBo7
o
El binding busca un DataConte7t en la =rid
o
El binding busca un DataConte7t en el Window

Dacer &ue a#bos te7tbo7 co#partan el


#is#o obeto Person, es cuestin de
colocarlo en el DataConte7t de la grilla
INCO - Facultad de Ingeniera Montevideo, Uruguay 63
77 Window1.xaml.cs
using /yste#P
using /yste#3WindowsP
using /yste#3Windows3ControlsP
na#espace Wit.Binding O
public partial class Window6 F Window O
Person person 4 new Person+J-o#J, 66,P
public Window6+ , O
$nitiali9eCo#ponent+ ,P
!rid.+ataContext 5 person?
t.is3birt.dayButton3Clic< M4 birt.dayButtonRClic<P
Q
"oid birt.dayButtonRClic<+obect sender,
*outedE"ent!rgs e, O
AAperson.A!e?
'essageBo73/.ow+string3For#at+
JDappy Birt.day, O5Q, age O6QSJ,
person.@ame4
person.A!e>4
JBirt.dayJ,P
Q
Q
Q
INCO - Facultad de Ingeniera Montevideo, Uruguay 64
+ata source implcitos

Entonces, si bien la funcionalidad es la


#is#a, el cdigo de sincroni9acin se .a
reducido enor#e#ente
INCO - Facultad de Ingeniera Montevideo, Uruguay 65
+ata Islands

Una de las catacteristicas especiales de


WPF, es &ue per#iten la creacion de casi
cual&uier tipo de obeto dentro del (!'L

Por ee#plo, si &uere#os trabaar con el


obeto Person anterior, pode#os .acerL
INCO - Facultad de Ingeniera Montevideo, Uruguay 66
+ata Islands

De#os creado una :isla; de datos, dentro de


la seccion de recursos del (!'L

Esta Data $sland, puede ser asociada al


DataConte7t de la grilla del ee#plo
IWindow 333 xmlnsBlocal56clr#namespaceBWit%1indin!68
IWindow3*esourcesK
;localBPerson xBJey56Tom6 @ame56Tom6 A!e56116 78
ICWindow3*esourcesK
I=ridK333IC=ridK
ICWindow
INCO - Facultad de Ingeniera Montevideo, Uruguay 67
+ata Islands
IS11 Window637a#l 11K
IWindow 333 7#lnsFlocal4Jclr1na#espaceFWit.BindingJK
IWindow3*esourcesK
IlocalFPerson xBJey56Tom6 @ame56Tom6 A!e56116 78
ICWindow3*esourcesK
I=rid +ataContext56CStatic.esource TomD68
333
I-e7tBloc< 333K2a#eFIC-e7tBloc<K
I-e7tBo7 333 Text56C1indin! Pat%5@ameD6 78
I-e7tBloc< 333K!geFIC-e7tBloc<K
I-e7tBo7 333 Text56C1indin! Pat%5A!eD6 78
IButton 333 2a#e4Jbirt.dayButtonJKBirt.dayICButtonK
IC=ridK
ICWindowK
INCO - Facultad de Ingeniera Montevideo, Uruguay 68
+ata Islands

!.ora debe#os #odificar el .andler del


botn, para &ue sa&ue la infor#acin de
(!'L
public partial class Window6 F Window O
333
"oid birt.dayButtonRClic<+obect sender, *outedE"ent!rgs e, O
77 ,et t%e Person from t%e WindowEs resources
Person person 5 =Person>t%is.ind.esource=6Tom6>?
MMperson3!geP
'essageBo73/.ow+333,P
Q
Q
INCO - Facultad de Ingeniera Montevideo, Uruguay 69
+ata Islands

Usa#os la funcin Find*esource para


obtener el obeto Person del #apa de
recursos del (!'L
INCO - Facultad de Ingeniera Montevideo, Uruguay 7!
+ata sources explcitos

/i tene#os una fuente de datos &ue


poda#os identificar, pode#os ser e7pl@citos
acerca de esta en el (!'L, en lugar del
confiar en el #ecanis#o i#pl@cito de
b%s&ueda
INCO - Facultad de Ingeniera Montevideo, Uruguay 7
+ata sources explcitos

Esto es necesario cuando tene#os dos


fuentes de datos diferentes, por ee#plo, dos
obetos Person

Utili9a#os la propiedad /ource del obeto


Binding

Por ee#ploL
INCO - Facultad de Ingeniera Montevideo, Uruguay 72
IS11 Window637a#l 11K
IWindow 333K
IWindow3*esourcesK
;localBPerson xBJey56Tom6 ... 78
;localBPerson xBJey56Ko%n6 ... 78
ICWindow3*esourcesK
I=ridK
333
I-e7tBo7 @ame56tomText1ox6
-e7t4:OBinding
Pat.42a#e,
Source5CStatic.esource TomDD6 78
I-e7tBo7 @ame563o%nText1ox6
-e7t4JOBinding
Pat.42a#e,
Source5CStatic.esource Ko%nDD6 78
333
IC=ridK
ICWindowK
INCO - Facultad de Ingeniera Montevideo, Uruguay 73
1indin! entre controles

WPF proporciona la facilidad de .acer un


binding entre la propiedad de un ele#ento
con la propiedad de otro ele#ento
I-e7tBo7 @ame56a!eText1ox6 ore!round56.ed6 ... 78
;<## *eep (uttonEs fore!round (rus% in sync
w7 a!e text (oxEs ##8
IButton Lore!round56C1indin! Pat%5ore!round4
&lement@ame5a!eText1oxDLKBirt.day
ICButtonK
INCO - Facultad de Ingeniera Montevideo, Uruguay 74
Con$ersin de $alores

Considere#os este ee#ploF


IS11 Window637a#l 11K
IWindow 333K
I=ridK
333
I-e7tBo7 -e7t4JOBinding Pat.4!geQJ
ore!round56C1indin! Pat%5A!e4 ...D6
333
CK
333
IC=ridK
ICWindowK
INCO - Facultad de Ingeniera Montevideo, Uruguay 75
Con$ersin de $alores

En el ee#plo anterior .ici#os un binding entre


la propiedad -e7t del -e7tbo7 y la propiedad
!ge del obeto Person

/in e#bargo, ta#bi)n .ici#os un binding entre


la propiedad Foreground y la propiedad !ge

/in e#bargo, !ge +$ntH8, y Foreground +Brus.,


son de tipos diferentes, necesita#os entonces
reali9ar alguna for#a de con"ersin
INCO - Facultad de Ingeniera Montevideo, Uruguay 76
Con$ersin de $alores

Un Ealue Con"erter +con"erter, es una


i#ple#entacin de $EalueCon"erter, &ue
contiene dos #)todos
o
Con"ert
o
Con"ertBac<
INCO - Facultad de Ingeniera Montevideo, Uruguay 77
Con$ert y Con$ert1ac*

Con"ert es lla#ada cuando se .ace la


con"ersin de datos desde la fuente .acia
los co#ponentes de U$ +$ntH8 a Brus.,

Con"ertBac< es lla#ado cuando se con"ierte


desde la U$ a la fuente de datos

En cual&uier caso, el "alor actual y el tipo de


datos son pasados a la funcin de
con"ersin en el con"erter
INCO - Facultad de Ingeniera Montevideo, Uruguay 78
Con$ert y Con$ert1ac*
M9alueCon$ersion=7NsourceTypeN7 typeof=int>4
7Ntar!etTypeN7 typeof=1rus%>>O
pu(lic class A!eToore!roundCon$erter B I9alueCon$erter C
pu(lic o(3ect Con$ert=o(3ect $alue4 Type tar!etType4 ...> C
if= tar!etType <5 typeof=1rus%> > C return null? D
int a!e 5 int.Parse=$alue.ToStrin!= >>?
return =a!e 8 PQ 0 1rus%es..ed B 1rus%es.1lac*>?
D
D
pu(lic o(3ect Con$ert1ac*=o(3ect $alue4
Type tar!etType4 ...> C
t%row new @otImplemented&xception= >?
D
D
INCO - Facultad de Ingeniera Montevideo, Uruguay 79
Con$ert y Con$ert1ac*

En el ee#plo anterior, ade#As de la


i#ple#entacin, agrega#os el atributo
EalueCon"ersion a la clase

Es %til para docu#entar el tipo de con"ersin


&ue esta#os reali9ando, pero no es e7igido
por WPF

Por ese #oti"o no es %til para atrapar errores


de tipos al con"ertir los "alores
INCO - Facultad de Ingeniera Montevideo, Uruguay 8!
Con$ert y Con$ert1ac*

Una "e9 &ue tene#os la definicin del


con"erter, es sencillo obtener una referencia
a este en el (!'L

Utili9a#os co#o antes, la seccin de


recursos de la "entana
INCO - Facultad de Ingeniera Montevideo, Uruguay 8
IS11 Window637a#l 11K
IWindow 333 7#lnsFlocal4Jclr1na#espaceFWit.BindingJK
IWindow3*esourcesK
IlocalFPerson 7FUey4J-o#J 333 CK
IlocalF!ge-oForegroundCon"erter 7FUey4JageCon"erterJ CK
ICWindow3*esourcesK
I=rid DataConte7t4JO/tatic*esource -o#QJK
333
I-e7tBo7
-e7t4JOBinding Pat.4!geQJ
Foreground4J
OBinding
Pat.4!ge,
Con"erter4O/tatic*esource ageCon"erterQQJ
333 CK
333
IButton 333
Foreground4JOBinding Pat.4Foreground,
Ele#ent2a#e4age-e7tBo7QJKBirt.dayICButtonK
IC=ridK
ICWindowK
INCO - Facultad de Ingeniera Montevideo, Uruguay 82
Con$ert y Con$ert1ac*
INCO - Facultad de Ingeniera Montevideo, Uruguay 83
9alidation

Una regla de "alidacin es una porcin de


cdigo usada para "alidar un dato en el target,
antes de actualice el source

El codigo de "alidacin es reali9ado en una


clase &ue e7tiende Ealidation*ule, .aciendo un
o"erride del #)todo Ealidate

E7iste una regla built1in deno#inada


E7ceptionEalidation*ule, &ue pro"ee alg%n ni"el
de proteccin ante un ingreso de datos errneos
INCO - Facultad de Ingeniera Montevideo, Uruguay 84
9alidation
IWindow 333 7#lnsFlocal4Jclr1na#espaceFWit.BindingJK
IWindow3*esourcesK
333
IlocalF!ge-oForegroundCon"erter 7FUey4JageCon"erterJ CK
ICWindow3*esourcesK
333
I-e7tBo7 333
Foreground4J
OBinding
Pat.4!ge,
Con"erter4O/tatic*esource ageCon"erterQQJK
I-e7tBo73-e7tK
IBinding Pat.4J!geJK
IBinding3Ealidation*ulesK
IE7ceptionEalidation*ule CK
ICBinding3Ealidation*ulesK
ICBindingK
IC-e7tBo73-e7tK
IC-e7tBo7K
333
INCO - Facultad de Ingeniera Montevideo, Uruguay 85
9alidation

Las reglas de "alidacin serAn eecutadas en


orden cuando los datos en el target ca#bien

/i todo esta bien, entonces los datos serAn


actuali9ados co#o sie#pre

/i una regla falla, entonces WPF destacara


los datos &ue pro"ocaron el fallo
INCO - Facultad de Ingeniera Montevideo, Uruguay 86
9alidation

En general WPF destaca el dato errneo con


algo &ue facilite detectar donde esta el
proble#a
INCO - Facultad de Ingeniera Montevideo, Uruguay 87
9alidation

Cuando un error de "alidacin ocurre, un


obeto EalidationError es creado

Este contiene el obeto usado para desplegar


el #ensae de error, en general a ni"el de la
U$

En el caso de la E7ceptionEalidation*ule, el
Jerror contentJ de este obeto contiene la
propiedad 'essage de la e7cepcin
capturada por esta regla
INCO - Facultad de Ingeniera Montevideo, Uruguay 88
9alidation

Para lograr acceder a esta infor#acin sobre


los errores, pode#os escuc.ar por el e"ento
EalidationError, attac.eado al ele#ento de U$
en cuestin &ue causa el error
INCO - Facultad de Ingeniera Montevideo, Uruguay 89
9alidation
CC Window63cs
333
public Window6+ , O
$nitiali9eCo#ponent+ ,P
t.is3birt.dayButton3Clic< M4 birt.dayButtonRClic<P
Ealidation3!ddErrorDandler+
t.is3age-e7tBo7,
age-e7tBo7REalidationError,P
Q
"oid age-e7tBo7REalidationError+
obect sender,
EalidationErrorE"ent!rgs e, O
'essageBo73/.ow++string,e3Error3ErrorContent,
JEalidation ErrorJ,P
Q
INCO - Facultad de Ingeniera Montevideo, Uruguay 9!
9alidation
IS11 Window637a#l 11K
333
I-e7tBo7 2a#e4Jage-e7tBo7J 333K
I-e7tBo73-e7tK
IBinding Pat.4J!geJ
2otify0nEalidationError4J-rueJK
IBinding3Ealidation*ulesK
IE7ceptionEalidation*ule CK
ICBinding3Ealidation*ulesK
ICBindingK
IC-e7tBo73-e7tK
IC-e7tBo7K
333
INCO - Facultad de Ingeniera Montevideo, Uruguay 9
9alidation

Debe#os recordar &ue el #ecanis#o


anterior funciona, solo si la propiedad
2otify0nEalidationError esta con "alor -rue
en el Binding del ele#ento en cuestin

!l eecutar esto con un error de "alidacin,


obtene#osL
INCO - Facultad de Ingeniera Montevideo, Uruguay 92
9alidation
INCO - Facultad de Ingeniera Montevideo, Uruguay 93
Custom $alidation rules

/i bien lo anterior funciona bien, el #ensae


no es #uy a#igable para el usuario final

Pode#os #eorarlo un poco custo#i9ando la


for#a en co#o se despliegan los #ensaes

Para esto, deri"a#os de Ealidation*ule, para


crear nuestra propia regla de "alidacin
INCO - Facultad de Ingeniera Montevideo, Uruguay 94
public class 2u#ber*ange*ule F Ealidation*ule O
int #inP
public int 'in O
get O return #inP Q
set O #in 4 "alueP Q
Q
int #a7P
public int 'a7 O
get O return #a7P Q
set O #a7 4 "alueP Q
Q
333
Custom $alidation rules
INCO - Facultad de Ingeniera Montevideo, Uruguay 95
public o"erride Ealidation*esult Ealidate+
obect "alue,
/yste#3=lobali9ation3Culture$nfo culture$nfo, O
int nu#berP
if+ Sint3-ryParse++string,"alue, out nu#ber, , O
return new Ealidation*esult+
false,
J$n"alid nu#ber for#atJ,P
Q
if+ nu#ber I #in VV nu#ber K #a7 , O
return new Ealidation*esult+
false,
string3For#at+
J2u#ber out of range +O5Q1O6Q,J,
#in, #a7,,P
Q
return new Ealidation*esult+true, null,P
Q
Q
INCO - Facultad de Ingeniera Montevideo, Uruguay 96
Custom $alidation rules

Enganc.a#os la regla en el (!'L co#o


antesL
I-e7tBo7 333
Foreground4J
OBinding Pat.4!ge,
Con"erter4O/tatic*esource ageCon"erterQQJK
I-e7tBo73-e7tK
IBinding Pat.4J!geJK
IBinding3Ealidation*ulesK
IlocalF2u#ber*ange*ule 'in4J5J
'a74J68WJ CK
ICBinding3Ealidation*ulesK
ICBindingK
IC-e7tBo73-e7tK
IC-e7tBo7K
INCO - Facultad de Ingeniera Montevideo, Uruguay 97
Custom $alidation rules
INCO - Facultad de Ingeniera Montevideo, Uruguay 98
Custom $alidation rules
INCO - Facultad de Ingeniera Montevideo, Uruguay 99
Custom $alidation rules

Pode#os #eorar aun #as, colocando el


#ensae de error en un tooltip sobre el
ele#ento &ue causo el error
"oid age-e7tBo7REalidationError+
obect sender, EalidationErrorE"ent!rgs e, O
age-e7tBo73-ool-ip 4 +string,e3Error3ErrorContentP
Q
INCO - Facultad de Ingeniera Montevideo, Uruguay 2!!
Custom $alidation rules

El proble#a con lo anterior, es &ue el tooltip


nunca desaparece, ya &ue no tene#os un
e"ento Ealidation/uccess3

2ecesita#os algo #asL


INCO - Facultad de Ingeniera Montevideo, Uruguay 2!
Sintaxis de la 1indin! Pat%

/i usa#os Pat.4!L=0, entonces ese !L=0


puede tener una "ariedad de for#atos
diferentes

!lguno de estos sonL


INCO - Facultad de Ingeniera Montevideo, Uruguay 2!2
Sintaxis de la 1indin! Pat%

Pat.4Property
o
Dace un binding a la propiedad del obeto actual
o
La propiedad puede pertenecer a un obeto CL*,
una dependency property o una attac.ed property
INCO - Facultad de Ingeniera Montevideo, Uruguay 2!3
Sintaxis de la 1indin! Pat%

Pat.4+0wner3!ttac.edProperty,
o
Dace un binding a una attac.ed dependency
property de un ele#ento WPF
o
Por ee#plo, Pat.4+Ealidation3DasError,

Pat.4+Property3/ubproperty,
o
Dace un bind con la subpropiedad de la
propiedad del obeto actual
o
Por ee#plo, Pat.42a#e3Lengt.
INCO - Facultad de Ingeniera Montevideo, Uruguay 2!4
Sintaxis de la 1indin! Pat%

Pat.4PropertyXnY
o
Dace un binding a un inde7er
o
Por ee#plo, Pat.42a#esX5Y

Pat.4PropertyCProperty
o
Dace un binding de la for#a #asterCdetail
o
Por ee#plo, Pat.4Custo#erC0rders
INCO - Facultad de Ingeniera Montevideo, Uruguay 2!5
Sintaxis de la 1indin! Pat%

Pat.4+0wner-ype3!ttac.edProperty,XnY3/ub
Property
o
Dace un binding a una #e9cla de propiedades,
subpropiedad e inde7ers
o
Por ee#plo,
Pat.4+Ealidation3Errors,X5Y3ErrorContent
INCO - Facultad de Ingeniera Montevideo, Uruguay 2!6
Custom $alidation rules

Pode#os entonces #eorar nuestro tooltip


anterior utili9ando alguna de estas nue"as
for#as de BindingPat.
INCO - Facultad de Ingeniera Montevideo, Uruguay 2!7
I-e7tBo7
2a#e4Jage-e7tBo7J 333
-ool-ip4
JOBinding
Ele#ent2a#e4age-e7tBo7,
Pat.4+Ealidation3Errors,X5Y3ErrorContentQJK
I-e7tBo73-e7tK
IBinding Pat.4J!geJK
IBinding3Ealidation*ulesK
IlocalF2u#ber*ange*ule 'in4J5J 'a74J68WJ CK
ICBinding3Ealidation*ulesK
ICBindingK
IC-e7tBo73-e7tK
IC-e7tBo7K
Custom $alidation rules
INCO - Facultad de Ingeniera Montevideo, Uruguay 2!8
SincroniHacin

En el ee#plo anterior, el tooltip esta asociado al


pri#er ele#ento de la attac.ed property Errors

/i no .ay errores, el tooltip esta "ac@o, cuando


.ay errores, se to#a la infor#acin y se
despliega

Za no necesita#os el 2otify0nEalidationError
en true, ya &ue el ca#bio en la coleccin y el
binding, #antiene los ele#entos sincroni9ados