tema 3 - controles en formularios

7/31/2019 Tema 3 - Controles en Formularios

1/36

Tema3Paneles,ContenidoyControlesBsicosWPF

Microsoft IT Ac adem y

MCTS: Windows

Presentation

Foundation.

WPF


2/36

CCCaaappp tttuuu lllooo IIIIIIIIICCCOOONNNTTTRRROOOLLLEEESSS

En este captulo se estudian los conceptos bsicos como paneles, controles, eventos, as

como el enlace que alimenta y permite relacionar estos elementos. Se trata el concepto

de panel y cmo se distribuyen los elementos dentro del panel. Los paneles constituyen

la pieza fundamental para organizar la apariencia visual de la aplicacin. Tambin se

presentan aqu los controles bsicos as como se ilustran algunos de los diferentes

eventos asociados a estos controles bsicos y los nuevos mecanismos de propagacin de

eventos que introduce WPF. Finalmente con Enlace a Datos nos muestra cmo se puede

hacer el enlace con datos para rellenar y personalizar los controles con informacin.

LLLaaayyy ooouuu ttt

La informacin que muestra una aplicacin se agrupa y distribuye visualmente segn

el signific ad o y a pa rienc ia q ue q uiera d ar la ap lic ac in. Se c onoc e c om o layout a la

forma en que se hac e esta d istribuc in en el rea de v isua lizac in. En WPF el layout d e

una a p lic ac in se ma neja a t rav s de d istintos tipos de pane les.

Un panel es un contenedor que conoce cmo debe distribuirse visualmente su

c onte nido e n el rea d isponible pa ra el pa nel. Su func in e s orga nizar los eleme ntos

que contiene. La forma de usar los paneles es simple pues solo es necesario colocar


3/36

dentro de ste cada elemento hijo al cual se le quiere manejar su layout. El

mecanismo de layout en WPF es sencillo, no obstante puede ser combinado y

personalizado para conformar un sistema de layout ms complejo. WPF brinda un

c onjunto flexible d e e leme ntos pa ra trab ajar co n un layout.

Los p rinc ipa les pane les de WPF son:

Sta c kPanel DockPanel Grid WrapPanel Canvas

Los elementos contenidos en un panel son guardados en la propiedad Children de la

c lase Panel que es de tipo UIElem entC ollec tion, esta p rop ied ad es una c olec c in a la

que se asigna el conjunto de todos los elementos contenidos en el panel (estos

elem ent os son d e tipo UIEleme nts o e leme nto s de interfaz de usua rio).

Los eleme ntos que se p ued en p one r en un p anel son d e tipo UIElem ent (o e lem ento de

interfaz de usuario). Los controles (herederos de la clase Control) son tal vez el caso

m s c ono c ido d e e lem ento s de interfaz de usuario pe ro no son los nicos. Los c ontroles

se estudian en la Leccin Controles. Los paneles son a su vez elementos de interfaz lo

que significa que podemos tener paneles dentro de paneles formando layouts con

c ua lquier nivel de c om p lejidad . Adem s de c ontroles y pa neles en WPF se tienen o tros

elementos de interfaz de usuario como figuras, decoradores, imgenes, etc. que son

estud iados en d iferentes lec c ione s de este c urso.

Estud iem os a c ontinuac in c ad a uno de los tipos de p aneles.

SSStttaaaccckkkPPPaaannn eeelll

El Sta c kPanel es un p anel muy simp le pero a la ve z muy utilizado, en su interior los

elementos se va n a piland o e n el orde n en q ue a pa rec en esc ritos en el c d igo XAML

(o en el orden en que hayan sido aadidos a la coleccin de hijos del panel en el

c aso e n q ue e sto se haga desde c d igo ejec uta ble .NET). Los eleme ntos se sitan en el

panel segn se indique en la propiedad Orientation esto pueder horizontalmente

(Horizontal) o verticalmente (Vertical) que es el valor predeterminado si no se indica

explc itam ente la orienta c in indique.
http://../Escritorio/Cursos/wpf/Curso_WPF/Modulo2/02_01A.htmhttp://../Escritorio/Cursos/wpf/Curso_WPF/Modulo2/02_01B.htmhttp://../Escritorio/Cursos/wpf/Curso_WPF/Modulo2/02_01C.htmhttp://../Escritorio/Cursos/wpf/Curso_WPF/Modulo2/02_01D.htmhttp://../Escritorio/Cursos/wpf/Curso_WPF/Modulo2/02_01E.htmhttp://../Escritorio/Cursos/wpf/Curso_WPF/Modulo2/02_02.htmhttp://../Escritorio/Cursos/wpf/Curso_WPF/Modulo2/02_02.htmhttp://../Escritorio/Cursos/wpf/Curso_WPF/Modulo2/02_01E.htmhttp://../Escritorio/Cursos/wpf/Curso_WPF/Modulo2/02_01D.htmhttp://../Escritorio/Cursos/wpf/Curso_WPF/Modulo2/02_01C.htmhttp://../Escritorio/Cursos/wpf/Curso_WPF/Modulo2/02_01B.htmhttp://../Escritorio/Cursos/wpf/Curso_WPF/Modulo2/02_01A.htm


4/36

Por lo g ene ra l un Sta c kPanel se usa c om o elem ento c onte nido en otro pa nel,

realmente no existen muchos escenarios en los que toda la informacin a mostrar se

quiera ve r con la d istribuc in de un Sta c kPanel.

El c d igo del Listado 3-1 provoc ar que los eleme ntos (en este c aso tres boto nes) se

muestren de arriba abajo uno a continuacin del otro segn el orden en que

apa rec en en e l XAML, ya q ue a la p rop ied ad se le ha d ad o e l va lor "Vertic a l". Esto se

muestra e n la Figura 3-1.

Si en luga r "Vertica l" se hub iera d ado va lor "Horizonta l" a la p rop iedad O rienta tion

ento nc es el co ntenido del pane l se mo strara c om o en la Figura 3-2.

Listad o 3- 1 Botones en un Stac kPanel

AceptarCancelar

Omitir

Esperamos que entienda de manera intuitiva las propiedades que hemos utilizado

dentro d e c ad a eleme nto Button c om o Bac kground, FontFam ily, FontSize y

FontWeight. De to dos mo dos los c ont roles se e stud ian e n la Leccin Controles.

El valor que se le d e a propieda de s c om o M argin o c ualquier otra que rep resente una

posic in relat iva a la ub ic ac in, sern rela tiva s a la p osic in e n que un eleme nto ha ya

sido ubica do en el Pane l que lo c ontiene.
http://../Escritorio/Cursos/wpf/Curso_WPF/Modulo2/02_02.htmhttp://../Escritorio/Cursos/wpf/Curso_WPF/Modulo2/02_02.htm


5/36

Figura 3 - 1 Stac kPanel co n orientac in vertical

Figura 3 - 2 Stac kPane l con orientac in horizonta l

DDDoooccckkkPPPaaannn eeelll

A d iferenc ia de un Sta ckPanel en un Doc kPanel los eleme ntos pued en situarse a la

izquierda, a la derecha, arriba o abajo o de abajo en el rea del panel y se puede

indicar el tamao de espacio que queremos ocupe. Los elementos van siendo

ubica do s en el mismo orden en q ue va n ap arec iend o e n el XAML.

Su funcionamiento es pa rec ido al que b rinda la p rop ied ad Dock (ac op lar) en

WindowsForms.

De modo predeterminado el ltimo control aadido al DockPanel ocupa todo el

espacio que quede disponible en el panel. Esto parece ser el escenario ms comn.

De todo s mo do s esto p ued e e spe c ific a rse d e m anera e xplc ita da ndo e l va lor "True" o

"Fa lse" a la p rop ied ad LastChildFill .

Ob serve en e l cd igo XAML del Lista do 3-2 que se usa un Doc kPanel pa ra agrupa r una

imagen y dos supuestos (pues aun no le damos funcionalidad) botones de

navegacin, el resultado se muestra en la Figura 3-3. Note que primero ubicamos un

bo tn a la izquierda y luego el otro a la d erecha y co mo la imag en se ub ic a d e ltimo

y no se le indica una ubicacin esto significa que se le dar a sta todo el espacio

dispo nible lueg o d e ub ic ar a a mb os bo tones.


6/36

Listado 3- 2 Doc kPane l co n Botones e Imag en c om o c ontenido

9

:

Note que en el cdigo aunque hemos asignado como contenido de los botones los

c a rac te res "9" y ":" el FontFamily selec c ionado fue Webd ings y por ta nto se mo strarn

los c onos de sea do s c omo c ontenido de los bo tones. Para m s de talle vea ma pa de

caracteres de Windows.

Figura 3 - 3 Doc kPanel (Mi lbum retro)

Tam bin p od em os c om binar pa neles uno d entro d e o tro, vea en e l Listad o 3-3 c omo

los boto nes han sido a grupa dos en un Stac kPanel al que a su vez se le ha dad o la

posicin "Bot ton" del Doc kPanel. Una vez ma s c om o e l Sta c kPanel con los botone s ha

sido ubica do prime ro (en el fondo ), la ima ge n oc upa r to do el espa c io restante .


7/36

Listado 3- 3 Doc kPane l co n Stac kPanel e imag en c omo c ontenido

9

:

Para q ue usted note c mo se ha ubica do el Stac kPane l dentro de l Doc kPane l le

hem os dado va lor "Red "a la p rop ied ad Bac kground d el Sta c kPanel. Vea el resulta do

en la Figu ra 3-4 co n el rea roja detrs de los bo tone s.

Figura 3 - 4 Doc kPane l con Stac kPane l

GGGrrriiiddd

El Grid (Rejilla) es considerado el panel ms flexible y poderoso dentro de WPF, con el

que puede lograrse cualquier distribucin visual de una cantidad cualquiera de

eleme ntos. De he c ho los efec tos de los restantes pa neles pued en log ra rse c on un Grid

y estos solo se incluyen en WPF para mayor facilidad de algunas distribuciones

especficas.


8/36

Haciendo uso del Grid podemos lograr un efecto de "enrejillado" y ubicar los

eleme ntos en c elda s, agrup ndolos en las c olumna s y filas que se d efinen en e l Grid

(un elemento puede ocupar varias celdas de este enrejillado). Para definir las

columnas y las filas que forman el Grid se utilizan las propiedades ColumnDefinition y

Row Definition q ue son de tipo Co lumnDefinitionCo llec tion y Row DefinitionCollec tion y

en las cuales se guarda la coleccin de columnas (objectos ColumnDefinition) y filas

(objetos RowDefinition) que conforman el Grid. El cdigo a continuacin define un

Grid de d os filas y tres c olumnas.

El anc ho y a ltura de una c olumna o de una fila pue de de finirse c on las propied ad es

Width y Height de ColumnDefinition y RowDefinition respectivamente. Por defecto

cuando no se especifica ningn ancho ni alto se les da a todas las celdas el mismo

tama o y tanto su anc ho c om o su altura e s rep resenta do p or "*".

Para colocar un elemento dentro del Grid, basta con aadirlo como un hijo de este

(definirlo dentro de ste en el cdigo XAML) e indicar en cul columna y fila se ubica

mediante las propiedades agregadas Grid.Column y Grid.Row del Grid que lo

contiene.

Las dimensiones de las celdas de un Grid pueden ser modificadas, si queremos que

una celda del Grid se ajuste al tamao del elemento que contiene se debe dar el

va lor "Auto" al Wid th d e la c olumna , o a l Height de la fila . Pa ra referirse a l espa c io que

que de dispo nible d entro d e una c elda se usar "*" c on lo q ue se e star indic and o q ue

este espa c io sea ut ilizado prop orciona lme nte. Por ta nto p od em os "juga r" un poc o c on

esta representacin del espacio disponible, por ejemplo en un cdigo como el del

Lista do 3-4,


9/36

Listad o 3- 4 Grid, anc ho de las c olumnas

Provocara que la primera columna del Grid adopte como su ancho el ancho del

elemento q ue c onforma su c ontenido (en el ejemp lo la ima ge n de anc ho 150), lueg oel espac io resta nte se d istribuye c om o ilustra la Figura 3-5.

Figura 3 - 5 Grid c on tres columnas

Que a la prime ra c olumna se le indique po r anc ho "Auto" quiere de c ir que esta toma r

como ancho el necesario para contener al elemento que la ocupa y al indicar "*" y

"2*" quiere decir que el espacio que ha quedado disponible en el Grid luego de la

primera ocupar el ancho necesario, se distribuir entre las dos restantes columnas

asigna ndo 1/3 a la p rimera y 2/3 a la seg unda .

Si se q uieren mostrar las lnea s que d eterminan los bordes de las filas y columna s de un

Grid se d eb e d a r va lor "True" a la p rop iedad ShowG ridLines.

Veamos el cdigo (Listado 3-5) para la interfaz visual de una calculadora como

ejemp lo d e uso d e un G rid. Se ha n d efinido c inco c olumna s de ntro d el Grid a las


10/36

c ua les se les ha asigna do c om o a nc ho e l va lor "Auto" pa ra q ue este se a juste a l anc ho

del elemento que c ontenga.

Listad o 3- 5 Un Grid p ara una c alc ulad ora

0

7

89

4

5


11/36

Background ="CornflowerBlue"FontFamily="Arial"FontSize="20"FontWeight="Bold"Foreground="White">

6

1

2

3

0

+/-

.

/*

-

=


12/36

Background ="CornflowerBlue"FontFamily="Arial"FontSize="20"FontWeight="Bold"Foreground="White">

+C

Figura 3 - 6 Ca lcula do ra en un Grid

En la Figura 3-6 a la derecha se muestra el resultado de la ejecucin del cdigo del

Listado 3-5 . La Figura 3-6 a la izquierda muestra las lneas que conforman el Grid para

una m ejor c om prensin d e lo que p rovo c an c iertas instrucc ione s en e l cd igo XAML.

Con la p rop ied ad G rid .ColumnSpan , un elemento indica r sob re c uantas c olumna s se

extender dentro del Grid que lo contiene. Note en la Figura 3-6como las celdas del

Grid que hacen de pantalla de la calculadora se extienden a travs de las cinco

c olumna s). Igua lme nte c on la p rop ied ad G rid .Row Spa n se p ued e indica r sob re

c u nta s filas se extend er (e n este c aso e l botn "+" se e xtiend e e ntre dos filas).

WWWrrraaappp PPPaaannn eeelll

El WrapPanel agrupa los elementos de izquierda a derecha (o de arriba abajo) pero

ca mb iand o d e fila (de c olumna) cua ndo se l lega el tope derecho (al fondo) del rea

del pa nel. Su funciona miento e s parec ido a c om o se maneja el layout a l esc rib ir un

documento en Word. En un WrapPanel cuando una fila de elementos ha llenado elespacio horizontal disponible (un resultado equivalente puede lograrse en sentido


13/36

vertical), entonces ubica al prximo elemento al inicio de una prxima fila. El cdigo

del Listado 3-6 provoca que un conjunto de imgenes se coloquen de izquierda a

derecha en el mismo orden en que aparecen en el XAML que describe al panel. Al

igua l que en un Sta c kPanel el sentido en q ue son c oloc ados lo d efine el valor

"Horizontal" (el predeterminado) o "Vertical" que se le asigne a la propiedad

Orienta tion .En la Figura 3-6 se mue stra el resultad o de la ejec uc in de este c d igo . Un

resultado semejante pero en el sentido vertical puede logarse dando precisamente

va lor "Vertica l" de la prop ied ad Orienta tion. La selec c in d e uno u otro sentido para la

propiedad Orientation provoca que un cambio en las dimensiones de la ventana

(cmo elemento contenedor del WrapPanel) implique una redistribucin (de ser

nec esaria para las nueva s d ime nsione s) d e los eleme ntos en e l sentido ind ic ad o.

Listado 3- 6 Wrap Pane l c on Ima ge nes com o c ontenido y o rientac in horizontal

Figura 3 - 7 WrapPanel en sentid o horizonta l

En la Figura 3-7 solo c ab en las c ua tro prime ras im ge nes (de pend iend o d el tam aode la ventana) y el resto no cabe en la fila. La altura de fila es determinada por la


14/36

ma yor altura entre las a lturas de los eleme ntos a pone r en la fila (en este e jem plo ha n

sido imgenes de igual altura). Note que mientras sea suficiente el que quede

dispo nible las im ge nes trata n d e o c upa r el espa c io una de trs de la otra.

Note e n la Figura 3-8 a c ontinuac in e l resulta do de ha be r usado un Sta c kPanel en

lugar del WrapPanel para ubicar las imgenes. Vea como se han situado una a

c ontinuac in d e la o tra sin a justarse a l tama o d e la venta na.

Figura 3 - 8 Usando un Stac kPanel el lugar del WrapPanel

Si am pliam os hac ia la d erecha el tama o d e la venta na p od emo s seguir viend o

im ge nes d ispuesta s una a c ontinuac in d e la o tra en e l Sta c kPane l. Ima gine a hora si

la c antida d de im ge nes fuese sufic iente c om o p ara sob rep asar el anc ho d e nuestra

pantalla, no se estara aprovechando todo el espacio disponible en la ventana para

mostrar las imgenes .De hecho le hemos ilustrado un ejemplo donde el uso de un

WrapPanel es necesario para una distribucin asequible del contenido y sencilla de

programar.

CCCaaannn vvv aaa sss

El Canvas es quizs el ms sencillo de todos los paneles de WPF. Cuando se quiere

tener control directo sobre la posicin de los elementos dentro rea de visualizacin

del panel es recomendable el uso de un Canvas. El Canvas permite posicionar

elementos usand o c oordena da s ab solutas. Para c ad a e lem ento d entro d e un Ca nvas

hay que especificar la posicin que se le quiere dar, por defecto sino se indica unaposicin ste sera ub ica do la e squina sup erior izquierda del pa nel (Top , Left ).


15/36

El uso del Canvas no es recomendado cuando se desea que una aplicacin sea

tolerante a cambios en las dimensiones. Esto quiere decir que si un elemento se ha

situado en el Ca nvas esta blec iend o sus c oo rdena das Top y Left (el prime r TextBox d el

ejemp lo) ento nce s si estrec ham os o a mp liam os la venta na de la ap lic ac in ya sea po r

la izqu ierda (Left) o por la pa rte superior (Top ) el elemento se d esp laza r pa ra

ma ntene r las c oo rdena das relativas a l pa r (Top , Left). Esto p ued e p rovo c ar que

durante la reestructuracin del contenido ocurra un solapamiento de los elementos

c ontenido en e l Canvas. De igua l manera o c urre p ara los elementos c uya p osic in e s

relativa al (Right, Bottom ) si el tam ao de la ventana de la ap lic ac in e s mo dific ad o

de sde a ba jo o d esde la de rec ha.

El Listado 3- 7 mue stra un e jem p lo de uso de Ca nvas, ste simula una neve ra en la que

se han colocado pegatinas con recados (Figura 3-8). Los recados se han

represent ados c on c ontroles TextBox (ver Leccin Controles) que se han distribuido

asignndole una posicin especfica dentro del Canvas.

Listado 3- 7 Canvas c on c ajas de texto e Img enes com o c ontenido

Cuando en el cd igo se hac e p or ejemp lo


16/36

Foreground="Blue" FontSize="20"

Fon tFamily="Brad ley Hand ITC" Ac cep tsReturn="True"/ >

se est indicando la posicin que se desea ocupe el cuadro de texto dentro del

Canvas. Note cmo en XAML un elemento puede hacer referencia a una propiedad

de l elemento q ue lo c ontiene (pad re) ca lif ica ndo a la p ropieda d c on el nomb re de l

tipo d el elem ento padre ( Ca nva s.Top ="10" Ca nva s.Left="10").

Solo es nec esario espec ific ar una p osic in d e referenc ia (es de c ir c on las p rop ied ades

Left y una Top o c on las p rop ied ad es Right y Botto m). En c aso d e e spe c ific a r

(innec esariame nte) amb as Top tiene p rioridad sob re Botto m y Right sob re Left.

El resultado de la ejecucin de este cdigo de ejemplo se muestra en la Figura 3-9.

Como puede Ud. ver hemos obtenido una nevera con la distribucin de nuestraspe ga tinas de reca do s.

Los elementos aparecen ubicados dentro del Canvas segn sus posiciones absolutas

relativas a ste. Esto signific a q ue los eleme ntos que c om parten un espa c io c om n

dentro del Canvas pueden solaparse. En este caso se solaparn segn el orden en

que aparecen contenidos dentro del panel en el cdigo XAML que es a su vez el

orde n en que son rend erizados.

Figura 3 - 9 Peg atinas en la nevera (Ca nvas)


17/36

CCCooonnn tttrrrooollleeesss

Los controles son el vehculo para la interaccin entre los usuarios y la aplicacin.

Aunq ue los c ontroles tienen una ma nifesta c in visual es bue no sea lar que no t od o lo

que c onforma la interfaz visual de una a plic ac in tiene que ser nece sariam ente un

c ontrol, ya que po de mo s tener eleme ntos c on p rop sitos me ram ente d ec orativos y de

ap ariencia que no reac cionan ante ninguna a cc in.

La prctica en el uso de Windows ha creado un estndar de facto en cuanto a la

ap arienc ia prede terminad a de los c ontroles. Seg uram ente que usted est hab ituad o

a ver un botn como una suerte de rectngulo sobre el que puede hacer clic y una

c aja d e texto c om o un rect ngulo sob re el que se p ued e e sc ribir.

Aunque la apariencia puede ser lo que primero un usuario identifica de un control, lo

que rea lme nte lo ha c e func ional es su c om po rta miento . En WPF aparienc ia y

c om po rtam iento son d os c onc ep tos bien identific ad os e indep end ientes.

Hasta ahora en la mayora de las tecnologas personalizar la apariencia de un control

imp lic aba la imp lementac in d e uno nuevo , ahora e n WPF esto ya no es nec esario. La

capacidad de anidamiento de contenidos y el poderle asociar plantillas a los

c ontroles (ver Leccin Plantillas de Controles ) no s b rinda soluc iones ms simp les pa ra

ello.

Una de las diferencias ms significativas entre WPF y Win32 es que en WPF existe una

c lara sep arac in e ntre presenta c in, contenido y lg ic a me jor que en Win32. En WPF,

probablemente Ud. no necesite escribir cdigo ejecutable en algn lenguaje .NET

(la se C # po r ejemp lo) p ara m od ific ar la presenta c in d e un c ontrol (al menos en la

mayora de los casos). Esto puede especificarse ahora declarativamente en el propio

XAML. El contenido a presentar puede especificarse mediante enlace a datos (ver

Lec c in Enlac e a Datos). Incluso la lgica, o parte de ella, puede modificarse usando
http://../Escritorio/Cursos/wpf/Curso_WPF/Modulo4/04_04.htmhttp://../Escritorio/Cursos/wpf/Curso_WPF/Modulo2/02_04.htmhttp://../Escritorio/Cursos/wpf/Curso_WPF/Modulo2/02_04.htmhttp://../Escritorio/Cursos/wpf/Curso_WPF/Modulo4/04_04.htm


18/36

diferentes elementos de su propio diseo en la plantilla y usando desencadenadores

(ver Lec c in Trigg ers).

Una de las caractersticas ms significativas de los controles en WPF destaca en un

amplio grupo para los que no existen apenas restricciones en cuanto a su contenido,

de ac uerdo al c ual pue de n c onside rarse d os tipo s de c ontroles:

Controles que c ontienen un solo elem ento

Estos controles son de tipo ContentControl y tienen una propiedad Content de tipo

ob jec t c uyo valor es el eleme nto c ontenido e n el control.

Por ejem plo los tres siguiente s seg me nto s de c d igo XAML son eq uivalentes y de finen a

un c ontrol Button c uyo c onte nido es un nico e lem ento TextBloc k

Plsame

es una forma ab reviad a d e hac er

Plsame

que a su vez es una forma ab reviada de

Plsame

Este ser c onve rtido e n un TextBlock autom t ic am ente pa ra fo rma r el contenido del

Button.


19/36

Controles que c ontienen una c olecc in de eleme ntos

Estos controles son de tipo ItemsControl y tienen una propiedad Items de tipo

ItemCollection cuyo valor es una coleccin de elementos contenidos dentro del

control.

Si ana lizamo s un c ontrol cua lquiera d e a lguno de estos dos grupo s (tod os hered eros de

la clase raz Control) notaremos que por la forma en que estos definen su contenido,

ste puede ser desde una simple cadena de texto, una imagen, otro control y hasta

tod o un rbo l de eleme ntos WPF. Tam b in e xisten c ontroles pa ra c onte nido e spec fic o

(solo te xto, p or ejemp lo TextBox) e inc luso c ontroles que no req uieren d e c onte nido

a lguno (por ejem p lo el Thumb ).

De m om ento la va pa ra interac tua r desde el "exterior" c on las ap lic ac ione s WPF es a

travs de los c ontroles. Los c ontroles p rod uc en eve ntos deb ido a ha c er c lic e n algn

bo tn d el rat n, presiona r alguna tec la, o c ualquier otra d e las forma s c onoc ida s de

entrad a q ue seg uram ente usted ya c onoc e de Windo ws.

En WPF tiene e xisten una serie d e c ontro les bsicos los c ua les se e stud ian e n esta

leccin. Como todo elemento de WPF, a los controles se les aplican las

func iona lida des que se d esc ribe n a lo largo de e ste c urso, ta les c om o e stilos, enlace a

da tos, com po sic in y sop orte integrad o p ara c ap ac ida de s grfic as.

Los c ontroles de WPF no tienen relac in c on los antiguos c ontroles de Win32, aunq ue

visualmente algunos se presenten prede terminad am ente c on la misma ap arienc ia.

Hay propiedades comunes a los controles como Foreground, Background , Padding ,

etc , las c ua les pued en usa rse p a ra m od ific a r su ap arienc ia.

A c ontinuac in un resumen d e tod o lo que se p ued e ha c er en WPF c on un c ontrol:

Usar sus p rop ied ades pa ra m od ific a r su ap arienc ia y c om portam iento . Comp one r c ontroles para d efinir nuevo s c ontroles. Contener a su vez controles. Lo que se puede expresar declarativamente

grac ias al mo de lo d e c ontenidos de XAML.

Reemplazar la plantilla que define a un control y con ello modificar laapariencia con se que muestra el control (esto se estudia en la LeccinPlantillas de Co ntroles).
http://windowssdk.msdn.microsoft.com/en-us/library/system.windows.controls.control.foreground.aspxhttp://windowssdk.msdn.microsoft.com/en-us/library/system.windows.controls.control.background.aspxhttp://windowssdk.msdn.microsoft.com/en-us/library/system.windows.controls.control.padding.aspxhttp://../Escritorio/Cursos/wpf/Curso_WPF/Modulo4/04_04.htmhttp://../Escritorio/Cursos/wpf/Curso_WPF/Modulo4/04_04.htmhttp://../Escritorio/Cursos/wpf/Curso_WPF/Modulo4/04_04.htmhttp://../Escritorio/Cursos/wpf/Curso_WPF/Modulo4/04_04.htmhttp://windowssdk.msdn.microsoft.com/en-us/library/system.windows.controls.control.padding.aspxhttp://windowssdk.msdn.microsoft.com/en-us/library/system.windows.controls.control.background.aspxhttp://windowssdk.msdn.microsoft.com/en-us/library/system.windows.controls.control.foreground.aspx


20/36

En a delante se p resenta n los c ontroles m s imp ortante s y se ir mo strand o p a rte d el

cdigo XAML necesario para usarlos con figuras que muestran lo que se desplegara

en ejecucin al usar el mismo. Por supuesto que es imposible presentar todos los

c ontroles ni proba r tod a la infinida d d e p rop ied ad es de mo do que e sto q ued ar a su

inters, nec esidad y d isponibilidad de tiemp o.

BBBoootttooonnn eeesss

Los botones son con certeza los controles ms conocidos. Hay tres tipos de botones

bsic os: Button, Rad ioButton y Che c kBox tod os hered eros (direc ta o indirec ta me nte)

de la c lase Butto nBase.

El Lista do 4-1 nos mue stra un bo tn (un c ontrol Button) que tiene c om o c onte nido un

pa nel Stac kPane l que a su vez tiene c omo c ontenido un texto y una imag en (el

resulta do se mue stra en la Figura 4-1). En e ste ejemp lo se han m od ific ad o alguna s de

las propiedades del botn (Width, Height, Background) para variar su apariencia. A la

ima ge n que est de ntro d el bot n ba sta da rle va lor a una de sus propieda de s Width o

Height, ya que la otra se a justa e n co nsec uenc ia .

Listad o 4- 1 Cd igo XAML de ventana c on un Control Button

Yo, en un Botn?


21/36

Figura 4 - 1 Ventana c on bo tn

El Lista do 4-2 nos muestra un c ontrol Rad ioButto n q ue tiene un te xto (TextBlock) y una

ima ge n (Ima ge ). La Figura 4-2 mue stra el resulta do de la ejec uc in d e este c d igo .

Listad o 4- 2 Cd igo XAML de ventana c on un Co ntrol Rad ioButton

Selecciname si quieres

Figura 4 - 2 Ventana c on Rad ioButton

Los Rad ioButton p ued en a grupa rse e n paneles. En el grupo de Rad ioButton c onte nidos

en un pa nel no p od r hab er ms de uno selec cionado .

El bo tn Chec kBox se usa de mo do simila r al Rad ioButton(Lista do 4-3 y Figura 4-3).

Listado 4- 3 Cd igo XAML de ventana c on un Control Chec kBox


22/36

Selecciname a m

Figura 4 - 3 Ventana con Chec kBox

El Listado 4-4 a continuacin muestra varios de los botones vistos en esta leccin y

hac e uso d e lo ap rend ido en la Lec c in Layout para su d istribuc in en la ventana.

La Figura 4-4 muestra el resultad o d e la e jecuc in del c d igo XAML del Lista do 4-4.

Listad o 4- 4 Cd igo XAML de ventana c on va rios c ontroles bo tones

Selecciname a m


23/36

Selecciname a m

Selecciname a m

Selecciname a m

Aceptar

Cancelar

Note en la Figura 4-4 como ambos controles RadioButton no pueden seleccionarse a

la ve z.


24/36

Figura 4 - 4 Ventana con varios controles bo tones

SSSllliiidddeeerrryyy SSScccrrrooollllll

El co ntrol Slider y el c ontrol Sc roll hered an d e la c lase Range Base ya que am bos

traba jan sob re un rango de va lores.

El co ntrol Slider p ermite selec c iona r valores dentro d e un rang o. Por ejemp lo, el c ontrol

de volumen q ue Ud. ve en Windo ws Med ia Player o e l ajuste d e transpa renc ia de c olor

que p ued e e nc ontrar en Pow er Point se p od ran lograr usando un Slider. En el ejemp lo

del Lista do 4-5 se ha c e uso d e un c ontrol Slider pa ra determina r las d imensiones de una

ima gen p a ra ello fue ne cesario hac er uso d e Enlac e a Dato s (Bind ing) (esto se estud ia

en ms deta lle en la Lec c in Enlac e a Datos ). La e jec uc in d e este c d igo se m uestra

en la Figura 4-5.

Listado 4-5 Cd igo XAML de ventana c on un Control Slider

Ajustar tamao de Imagen


25/36

Note que a la propiedad Height de la imagen se le da el valor de la siguiente forma

Height ="{Binding ElementNa me=imageSizeSlider,Pa th=Value}". Este Bind ing a soc ia la

propiedad Height de la imagen con el valor que tenga el control llamado

imageSizeSlider q ue es en este c aso de tipo Slider.

Figura 4 - 5 Ventana c on Slider

Al igua l que e l Slider el control Sc rollView er traba ja asoc iad o a un rang o (Lista do 4-6).

Listad o 4- 6 Cd igo XAML de ventana c on un Control Sc rollViewer

Las prop ied ades Horizonta lSc rollBa rVisibility y Ve rtica lSc rollBa rVisibility a las que se les ha

dado va lor "Auto " ind ic an que los Sc rollView er tanto horizonta l co mo vertic a l solo sea n

visibles cuando sea necesario (es decir cuando el contenido sobrepasa las

dimensiones en que se est mostrando como se ilustra en la Figura 4-6). Los otros

va lores posibles de e sta s prop iedades son Disab led , Hidd en y Visible.

Figura 4 - 6 Ventana c on Sc roll

CCCooonnn tttrrrooollleeesss dddeeeTTTeeexxx tttooo


26/36

WPF tiene una variedad de controles para mostrar y editar textos, el ms sencillo de

ellos es el TextBox (Lista do 4-7) que p robab leme nte ya Ud ha visto en o tras lec c iones.

El TextBox brinda las c ap ac idades bsic as pa ra ed ic in: esc rib ir un texto, dar c amb ios

de lnea (a travs de la propieda d Ac c ep tsReturn), c ortar, cop iar, pe ga r etc . Note que

lo que muestra la Figura 4-7 como contenido de los controles de texto, es el texto que

el usuario de la aplicacin haya escrito sobre el control ya que los controles de texto

estn p rep arad os pa ra rec ib ir este tipo de entrada (de l mismo mo do q ue si se hub iese

esc rito e n el XAML de la siguiente forma :

Texto q ue se q uiera mo strar

Listad o 4- 7 Cdig o XAML de ventana c on un Control TextBox

Figura 4 - 7 Ventana c on TextBox

Otro c ont rol pa ra el trab a jo c on textos es el Passwo rdBox (Lista do 4-8, Figura 4-8) que a

d iferenc ia d el TextBox, mue stra camuflad o el conte nido q ue se te c lee sob re e l c ontrol.

Este c ontrol en luga r de una p rop ied ad Text pa ra ac c ed er al co ntenido , tiene una

prop ied ad Passwo rd .

Listad o 4- 8 Cd igo XAML de ventana c on un Control PasswordBox


27/36

Figura 4 - 8 Ventana c on PasswordBox (p ara los c uriosos el password es:

aprendaWPF)

Por ltimo ve remo s un c ontrol para la e d icin d e te xto, el c ontrol RichTextBox (Lista do

4-9). Este control permite que su contenido sea algo ms que simple texto, en el

ejemp lo va mo s a e sc ribir texto y peg ar im ge nes c om o p arte de l mismo c ontenido d el

Ric hTextBox de mo do de o b tene r un resulta do c om o el que nos mue stra la Figura 4-9.

Listad o 4- 9 Cd igo XAML Control RichTextBox

Figura 4 - 9 Ventana c on RichTextBox

EEEtttiiiqqquuu eeetttaaa sss

El co ntrol Labe l (Lista do 4-10) es un c ontrol muy ut ilizado p a ra , co mo su no mb re ind ic a ,

"etique ta r" a a quellos c ontroles que no d ispo nen d e una p rop ied ad c uyo va lor les sirva

de etiqueta. Una etiqueta no tiene porque ser un simple texto, sino puede ser tambin

c ua lquier elem ento de interfaz, (ba sado en q ue el co ntrol Lab el es un Conte ntCo ntrol),

c om o p or ejemp lo una ima ge n. Con las etiquetas se p ued e e xpresar la ap arienc ia d e

atajos para seleccionar determinado comando, haciendo que el contenido de la


28/36

etiqueta sea un texto , y a ste se le puede hacer resaltar un carcter escribindolo

precedido de underscore (_). Note el segmento que hemos destacado en negrita

dentro del XAML del Listado 4-10 delante de la letra que queremos identificar para

forma r pa rte d el ac c eso d irec to

( _Nombre ).

En el cdigo XAML del Listado 4-10 hemos vuelto a hacer uso de Binding, en este caso

para asoc ia r un TextBox a la prop ied ad Targe t d el c ontrol Lab el. Al asoc ia r a esta

prop ied ad un elemento de terminad o (en este c aso un TextBox) estam os

espe c ific and o q ue el ata jo q ue se d efine en e l Lab el es pa ra a c c ed er a este eleme nto

(Target).De este mo do po de mo s log rar que la ma yor pa rte d el cd igo que de

expresado d e fo rma dec la rat iva en e l XAML, con el uso d e Bind ing se e vita ha c er uso

de l co de-behind.

Listad o 4- 10 Cd igo XAML de ventana c on un Control Lab el

_Nombre:

_Apellidos:

El resulta do d e la ejec uc in d e e ste c d igo XAML ser e l que se m uestra en la Figura 4-

10 a continuacin, note como las letras (N y A) de las etiquetas se encuentran

subraya das. Si ap lic amo s la c om b inac in d e te c las Alt+N el cursor ap arec e e n la

primera caja de texto como muestra la Figura 4-10 a la derecha, de igual modo con

Alt+A el cursor ap arec era en la seg unda c aja d e te xto. Note q ue la c orrespo nde ncia

entre e tique ta y c aja d e texto es la e spe c ific ad a a trav s de la propieda d Target.


29/36

Figura 4 - 10 Ventana c on Etiqueta s

SSSeeellleeeccctttooorrreeesss

Estos controles brindan una forma de seleccin dentro de un conjunto de elementos.Entre esta familia d e c ontroles tenem os a Co mb oBox, ListBox y TabCo ntrol, as c om o

tam bin los Rad ioButton c uand o c omo vimo s ante riormente se e ncue ntran a grupad os

en un p anel.

CCCooommm bbboooBBBoooxxx yyy LLLiiisss tttBBBoooxxx

Vea mo s el Co mb oBox q ue se define en el Lista do 4-11. El resulta do de la ejec uc in lo

ilustra la Figura 4-11.

Listado 4- 11 Cd igo XAML de ventana con un Control Com boBox

Leccin 3 Layout

Leccin 4 Controles

Leccin 5 Eventos y Comandos

Leccin 6 Enlace a Datos


30/36

Figura 4 - 11 Ventana c on Com bo Box

Un e fec to sem ejante pued e log ra rse c on un ListBox c om o mue stra e l Lista do 4-12.

Listad o 4- 12 Cdig o XAML de ventana c on un Control ListBox

Leccin 3 Layout

Leccin 4 Controles



La Figura 4-12 muestra e l resultad o d e la e jecuc in del cd igo XAML del Lista do 4-12.


31/36

Figura 4 - 12 Venta na c on ListBox

TTTaaabbbCCCooonnn tttrrrooolll

TabControl es otro c ontrol selec tor. Este ag rupa su c onte nido y p ermite identific arlo

visualme nte med iante "pesta as" asoc iadas a su co ntenido . Tan to el co ntenido c om o

su encabezado (lo que se muestra en la pestaa) pueden ser cualquier elemento WPF

(ima ge n, texto , botn, etc .). Note e n el Listado 4-13 co mo Tab Item pe rmite d efinir de

forma senc illa su p rop io e nca be zad o y e l contenido.

Listad o 4- 13 Cd igo XAML de ventana c on un Co ntrol Tab Control

Leccin 3 Layout

Leccin 4 Controles



32/36


Note en la Figu ra 4-13 c om o est n relac iona do s "enc abezado" y "c onte nido". Si se

hace clic sobre un encabezado el control muestra el contenido que en este caso es

una ima gen.

Figura 4 - 13 Ventana con Tab Control

MMMeeennn sss

Para ilustrar el uso de los controles Menu vamos a apoyarnos en dos ejemplos: uno

hac iend o uso d el men p rinc ipa l de las ap lic ac iones y otro de un me n de c ontexto. Si

no logra ident ific ar cu les son estos, no se p reo c upe los rec onoc er en c uanto vea los

ejemplos.

Veamos primero los Men como muestra el Listado 4-14.

Listad o 4- 14 Cd igo XAML de ventana c on un Control Menu


33/36

_Edicin

La Figura 4-14 muestra el resultado de la ejecucin del cdigo XAML del Listado 4-14

de splega ndo un me n princ ipa l con las op c iones de Cortar, Cop iar y Peg ar.

Figura 4 - 14 Ventana con Men Princ ipa l

A cada MenuItem podemos asociarle un comando a ejecutar (como se ver en la

Lec c in Eventos y Co ma ndo s). Tamb in se p ued en a signa r tec las de a c c eso a

c ualquiera d e e sto M enuItem.

Tam b in p od em os c rea r un me n de c onte xto c om o m uestra el Lista do 4-15 (el que se

de splieg a normalmente al c lic de rec ho de l rat n e n las ap lic ac iones Windo ws).

Listado 4- 15 Cdigo XAML de ventana c on un Control ContextMenu


34/36

Se ha co loc ad o un Co ntextMenu a nivel de ventana de la ap lica cin

(Windo w.ContextMenu), esto implic a que en c ualquier luga r de la ve ntana en d ond e

quiera q ue se d e un c lic d erecho d el rat n se d esplega r e l me n de c ontexto, c om o

muestra la Figura 4-15. Un efecto equivalente puede lograrse a nivel de otros

elementos WPF, es decir podemos definir el contexto en el cual puede desplegarse el

me n (po r ejemp lo Grid.ContextMenu).

Figura 4 - 15 Ventana c on Men de Contexto

TTToooooolllBBBaaa rrrsss

La mayora de las aplicaciones adems de un men principal brindan una barra de

herramientas. En WPF es posible definir de forma sencilla nuestra propia barra de

herram ienta s c om o se mue stra e n e l Listado 4-16. Pod em os tamb in tene r varias barras

de herramientas agrupa das en un Too lBarTray. Este c ontrol (Too lBar) tiene integ rada la

misma apariencia y funcionalidad de las barras de herramientas con las que

trab ajam os en O ffic e.

Listad o 4- 16 Cd igo XAML de ventana con un Control Too lBar


35/36

La Figura 4-16 muestra una barra de tareas con los botones con imgenes como

c onte nido justo c om o se ha espe c ific ad o en el cd igo XAML del Listado 4-16.

Figura 4 - 16 Ventana c on Barra de Herram ientas

EEExxxppp aaannn dddeeerrr

El control Expa nde r permite mo strar un enc ab ezad o q ue identific a un c ontenido que

puede contraerse y expandirse a travs del control. El Listado 4-17 nos muestra un

c ontrol Expa nde r cuyo c ontenido es un grupo de Com bo Box. La direc c in e n q ue se

expande o contrae el contenido puede especificarse a travs de la propiedad

Expa nd Direc tion y sus va lores pueden ser "Down", "Up", "Left " y "Right ".

Listad o 4- 17 Cd igo XAML de ventana c on un Control Expand er

Excelente

Muy Bien


36/36

Bien

Regular

No he aprendido absolutamente nada

Hemos deshabilitado una de las opciones para que usted no desista de aprender WPF

c on este c urso.

Figura 4 - 17 Ventana c on Expa nd ir

Es imposible abordar en esta leccin la basta variedad de posibilidades que dan los

c ontroles en WPF. Se ha n mo strad o a qu a lguna s de las c a rac terstica s mssignificativas de aquellos controles que podemos considerar ms bsicos y que son

suficientes para proveer de una rica apariencia y funcionalidad a la mayora de las

aplicaciones. Lo invitamos a experimentar con ellos e ir descubriendo ms

ca pa cidades.

tema 3 - controles en formularios

Documents