tema 1- concpetos básicos

7/31/2019 Tema 1- Concpetos bsicos

1/34

Tema1.IntroduccinaWPFMic rosoft ITAcademy

Tema 1

MCTS: Windows

Presentation

Foundation.

WPF


2/34

Pgina 2 de 34

WWWIIINNNDDDOOOWWWSSSPPPRRREEESSSEEENNNTTTAAATTTIIIOOONNNFFFOOOUUUNNNDDDAAATTTIIIOOONNN

En este curso usted ver como crear sus primeras aplicaciones usando Windows

Presentation Foundation (WPF). Le ensearemos a utilizar los nuevos recursos de

presentacin de esta nueva plataforma de Microsoft con los que podr elevar a

niveles excitantes la calidad y funcionalidad de las interfaces de usuario de sus

ap lic ac iones. Lo introd ucirem os en la nueva filosofa de programa c in de c larativa c on

el leng ua je XAML que a yuda a sep ara r la interfaz de p resenta c in d el c d igo .NET en

el que programe la lgica del negocio de su aplicacin. Con WPF ver facilitados y

enrique c ido s c onoc ido s c onc ep tos c om o c ontroles, eventos, enlac e a da tos, as c om o

podr incorporar nuevos elementos como transformaciones, plantillas, estilos,

animac iones, med ia, 3D, doc umentos.

El curso est dividido en 5 captulos, y cada captulo en lecciones. Los captulos y

lecciones vienen acompaados de los proyectos con el cdigo de los ejemplos, as

como de videos ilustrativos que reforzarn el contenido de los temas tratados y lo

ayud arn a experime ntar por su c uenta.

Le recomendamos tambin que vea la aplicacin integral Visor de Cursos MSDN que

hemos desarrollado ntegramente con WPF y de la cual usted puede descargar

completamente el cdigo fuente. Con esta aplicacin usted puede visualizar e

inte rac tua r c on el curso.

LLLooosss aaannn ttteeeccceeedddeeennn ttteeesss

Cua ndo en 1985 la prime ra ve rsin d e Window s sa li a l me rc ado, y an d urante a lgn

tiemp o d espus, los p rog rama dores po r lo g enera l esc riban a p lic ac iones mo noltica s y

aisladas, rsticas y aburridas. Windows abri el camino al uso y desarrollo de

c om po nentes de softwa re, y a los mec anismo s de c omp osic in d e e sas c om po nentes

para desarrollar aplicaciones, dando soporte a una concepcin interactiva y

enriquecedora de usar las aplicaciones a travs de interfaces grficas de usuario, no

en balde Windows se llam Windows por ser el concepto de ventana grfica la

novedad fundamental. El gran salto cualitativo de un sistema que se nombraba por

c m o traba jab a (DOS) a un sistema que de ba su nomb re a c m o t trab ajab as c on

l (Wind ow s).
http://../Escritorio/Cursos/wpf/Curso_WPF/Modulo6/06_00.htmhttp://../Escritorio/Cursos/wpf/Curso_WPF/Modulo6/06_00.htm


3/34

Pgina 3 de 34

Pero en los 90s, posiblemente junto con la adolescencia o juventud de muchos de los

lectores, lleg la WWW. Los ordenadores se estaban conectando ms y ms hasta

formar el entramado que termin llamndose Web y surgi el concepto de navegar

en la Web. Las primeras aplicaciones para navegar (browser) se limitaban

simplemente a desplegar visualmente contenidos en el ordenador de escritorio del

usuario, imitand o e l efec to d e a lgo as c om o repasar las pg inas de un p erid ico. Estos

c onte nidos esta ba n de sc ritos en un lengua je de m arc as HTML, que p a ra c ordura

co lec tiva fue ace pta do p or todo s.

Y junto a la Web fueron apareciendo otras posibilidades. Internet Explorer 4, por

ejemplo, le aadi guiones (scripts). Los guiones son interpretados por los navegadores

y pe rmitan d ota r de un co mp ortamiento y una p ersona lizac in a los c ontenidos que

ha sta ahora solo se d esp legaban pasivos. Ahora c on los guiones los contenido s HTML

podan reaccionar a eventos interactuando con los usuarios y permitiendo a los

navegadores ejecutar alguna lgica y reaccionar ms rpidamente sin tener que

esta r via jand o a l servido r c ada vez que se ha c a una mnima interac c in.

No obstante los avances en la Web y en los navegadores, las aplicaciones de

escritorio desarrolladas sobre Windows seguan teniendo por lo general una interfaz

m s excitante y un co mp ortamiento m s ric o, co mp lejo y rp ido que el de la m ayora

de las ap licac ione s Web . Por otra p a rte p rog ram ar y dep ura r aplic ac ione s Web seg ua

siend o m uc ho m s d ifc il que las aplic ac ione s Wind ow s.

Pero tambin es cierto que la forma de trabajar con la Web introdujo concepciones

que no se tenan en las aplicaciones de escritorio Windows, como la forma simple de

instalar una aplicacin y la navegacin hacia detrs y hacia delante basada en

pginas.

Y en e so c on el nuevo milenio lleg Microsoft .NET. La m s mo de rna y evo luc iona d a

p la ta forma d e de sarrollo de softw are que p ermiti un rp ido de sarrollo de las

aplicaciones tanto de escritorio como Web, usando muchas ms y mejores

componentes de software, basndose en estndares aceptados de facto como un

modelo orientado a objetos seguro en sus tipos (type safe), http, XML y el hacer a la

Web asequible programticamente a travs de los servicios Web. Y por dems todo

esto en un esc ena rio a gn stic o e n c uanto al leng uaje de program ac in si ste


4/34

Pgina 4 de 34

satisfac e un c onjunto d e req uerimientos c om unes c onoc ido c om o CLS (Comm on

Langua ge Spec ific a tion).

Durante su a n joven existenc ia .NET ha dem ostrad o con c rec es sus bond ade s e

incrementado exponencialmente la cantidad y versatilidad de las aplicaciones, y lo

que e s muy imp ortante : la prod uc tividad de los desarrolladores de softw are. Sin

embargo, mantener una sistemtica renovacin, para no dormirse en el xito de sus

productos, ha sido una constante en Microsoft que ha jalonado el desarrollo. A pesar

de la rique za e n ca pac idades de d esarrollo introd uc idas por .NET, tanto pa ra e l

mund o Windo ws c om o p ara e l mund o Web, lo c ierto es que an existe una b rec ha e n

la forma de de sarrollar ap lic ac iones y la de integrar las bo nda de s de am bo s mund os.

WPF (Wind ow s Presenta tion Found a tion) es el nuevo p rod uc to de Microsoft para sa lvar

esta brecha. WPF parece ser uno de los ms excitantes desarrollos para la

p rog rama c in en Wind ow s. Sob re c m o desarrolla r ap lic ac ione s en WPF trata r este

curso.

AAA qqquuu iiieeennn eeesss vvv aaa dddiiirrriiiggg iiidddooo???

Com enzar un curso sob re un nuevo tem a p retend iend o ser indep end iente de lo q ue

Ud. c onoc e es ca er en la vieja tramp a del qu p ongo y el qu supongo . De m od o q ue

partimos de que a estas alturas, si es que no estaba en hibernacin, Ud. estar

familiarizado con Windows y con su espectacular aporte al desarrollo de interfaces

grfica s de usuario pa ra las aplic ac ione s desarrolladas sob re ste.

Este no es un curso para aprender a programar, por tanto tener experiencia en

desarrollo orientado a objetos con algn lenguaje de programacin de .NET

(preferibleme nte C# ), y que Ud . haya a l meno s rom anc ea do c on una he rram ienta d e

desarrollo c om o Visua l Stud io, son requerimientos pa ra pasar este curso. Y por supuesto

que Ud. de be ser al me nos un usuario d e la Web p or lo q ue HTML y XML no le d eb en

resultar desconocidos.

CCCmmm oooeeesss ttt ooorrrgggaaannn iiizzzaaadddooo???

Aunque un buen desarrollador de WPF debera tener una slida base escribiendo

ap lic ac ione s WPF c om p leta me nte e n cd igo de un lengua je .NET, aborda r este c urso


5/34

Pgina 5 de 34

con este enfoque lo hara muy extenso y competira contra nuestro objetivo

fundamental y es que Ud. pueda poner rpidamente manos a lo obra y pueda

em pezar a ha c er sus p rimeras ap lic ac iones sob re WPF. Es por e llo que el c urso se basa

en la c omb inac in lengua je de ma rc as de c larativo + c digo proc ed ural .NET. La

descripcin de las interfaces visuales de interaccin de las aplicaciones sern

presentadas en un nuevo lenguaje de marcas XAML (eXtensible Application Markup

Language) y el cdigo que implementa la lgica de la aplicacin asequible a travs

de esta interfaz ser d esarrollad o en el leng uaje orienta do a ob jeto s C# .

Por la imposibilidad de abordar en un solo curso la basta amplitud de recursos y

especificidades de WPF y XAML, este curso tratar aquellos temas ms relevantes

ilustrndolos con ejemplos, listados de cdigo e imgenes con el despliegue de los

resultad os. Tod os los c d igos de los ejem p los pod rn ser de sc argados del sitio d el

c urso. El curso c ulminar c on el desa rrollo de una ap lica c in ge neral que ilustra e l uso

de la ma yora d e los tem as trata dos.

El curso est dividido en Captulos y cada Captulo consta de varias lecciones cada

una sob re un tem a p artic ular. Las lec c iones vienen a c omp aa da s de un vide o g uiad o

que ilustra c m o imp lem enta r los ejemp los trata dos y va riac ione s de estos.

Si Ud . se e nc uentra por p rime ra vez co n WPF es rec om end ab le que siga el curso de

manera secuencial en el orden en que estn las lecciones. Ud. siempre podr saltar

hac ia d etrs y hac ia d elante si as lo de sea a travs de los enlac es.

El primer Captulo es una introduccin general a WPF. Con esta introduccin se

pretende ilustrar al lector en los conceptos ms bsicos que estn detrs de WPF y

XAML. Se p resentan los prime ros ejem p los rea les y se exp lic an las tres forma s de c rea r

ap lic ac ione s c on WPF: ap lic ac ione s Window s pa ra esc rito rio, ap lic ac ione s pa ra Web y

una forma hbrida que m ezc la b ond ad es de Windo ws y bond ad es de Web

El Captulo 2 est de dica do al trab ajo c on c ontroles. En ste se trata el co nce pto de

panel y c m o se distribuyen los eleme ntos dentro d el pa nel. Los pa neles constituyen la

p ieza fund ame nta l pa ra o rga niza r la a parienc ia visua l de la ap lic ac in. Tamb in se

presentan aqu los controles bsicos as como los diferentes eventos asociados a estos

controles bsicos y los nuevos mecanismos de propagacin de eventos que introduce

WPF. Finalmente la Leccin Enlace a Datos nos muestra cmo se puede hacer elenlac e c on d at os pa ra rellena r y persona lizar los c ont roles c on informa c in.
http://../Escritorio/Cursos/wpf/Curso_WPF/Modulo1/01_00.htmhttp://../Escritorio/Cursos/wpf/Curso_WPF/Modulo2/02_00.htmhttp://../Escritorio/Cursos/wpf/Curso_WPF/Modulo2/02_04.htmhttp://../Escritorio/Cursos/wpf/Curso_WPF/Modulo2/02_04.htmhttp://../Escritorio/Cursos/wpf/Curso_WPF/Modulo2/02_00.htmhttp://../Escritorio/Cursos/wpf/Curso_WPF/Modulo1/01_00.htm


6/34

Pgina 6 de 34

El Captulo 3 est de d ic ado a Grficos. Se c om ienza c on las figuras y los rec ursos

bsico s pa ra ha cer figuras. Luego se tra ta n las "b rocha s y pinc eles". Tamb in se tra ta n

los efec tos que se pue den ha cer sob re las im ge nes y las transforma c ione s grfica s a

las que puede someterse una interfaz. WPF basa la visualizacin de todos sus

elementos en la te c nologa grfic a Mic rosoft Direc tX de mo do que los am antes de las

ap lic ac ione s grfica s tienen aho ra fa c ilidades para to c ar el pa ra so c on sus de do s.

El Captulo 4 est dedicado a estilos y plantillas. Los estilos nos permiten personalizar la

apariencia de la interfaz de usuario de modo similar y mas amplio que lo que por

ejemplo Ud. ahora puede hacer con los estilos en Microsoft Word. Las plantillas

(templates) son un recurso que nos facilitar expresar patrones de cdigo y que

propiciar la reutilizacin aumentado la productividad y flexibilidad.

El Captulo 5 trata sobre temas ms avanzados. Aunque imposible cubrirlos todos, y

c ubrir c ad a uno en p rofundida d , se trata aq u sob re c mo inc luir en sus ap lic ac iones

WPF, video, grfica 3D, animacin y documentos, algo que antes de WPF haba que

log rar con un trab ajo duro y una a ma lga ma de te c nologas.

El curso culmina con la exposicin de una aplicacin general que servir a su vez de

"visor del propio curso". Muchos de sus elementos participantes se habrn ido

p resenta ndo en las lec c ione s del curso.
http://../Escritorio/Cursos/wpf/Curso_WPF/Modulo3/03_00.htmhttp://../Escritorio/Cursos/wpf/Curso_WPF/Modulo4/04_00.htmhttp://../Escritorio/Cursos/wpf/Curso_WPF/Modulo5/05_00.htmhttp://../Escritorio/Cursos/wpf/Curso_WPF/Modulo6/06_00.htmhttp://../Escritorio/Cursos/wpf/Curso_WPF/Modulo6/06_00.htmhttp://../Escritorio/Cursos/wpf/Curso_WPF/Modulo5/05_00.htmhttp://../Escritorio/Cursos/wpf/Curso_WPF/Modulo4/04_00.htmhttp://../Escritorio/Cursos/wpf/Curso_WPF/Modulo3/03_00.htm


7/34

Pgina 7 de 34

CCCaaappp tttuuu lllooo III IIINNNTTTRRROOODDDUUUCCCCCCIIIOOONNN

Windows Presentation Foundation (WPF) es una de las novedosas tecnologas de

Microsoft y uno de los pilares de Windows Vista. WPF potencia las capacidades de

desarrollo de interfaces de interaccin integrando y ampliando las mejores

c a rac terstica s de las ap lic ac ione s windo ws y de las ap lic ac ione s we b . WPF ofrec e una

amplia infraestructura y potencialidad grfica con la que se podrn desarrollar

aplicaciones de excitante y atractiva apariencia, con mayores y ms funcionales

facilidades de interaccin que incluyen animacin, vdeo, audio, documentos,

naveg ac in, gr fic a 3D. WPF sep ara, c on e l leng ua je d ec la ra tivo XAML y los leng ua jes

de programa c in d e .NET, la interfaz de interac c in d e la lgica de l negoc io,

propiciando una arquitectura Modelo Vista Controlador para el desarrollo de las

aplicaciones.

Este primer captulo es una introduccin general a WPF. Con esta introduccin se

prete nde ilustrar al lec tor en los c onc ep tos m s bsic os que e stn d etrs de WPF c om o

el mode lo d e rbo l de elementos de presenta c in y el leng uaje dec larativo d e ma rc as

XAML. Se p resenta n los p rimeros ejem plos rea les y se exp lic an las forma s de c rear

ap lic ac ione s c on WPF: ap lic ac ione s Window s pa ra esc rito rio, ap lic ac ione s pa ra Web y

una forma hbrida que m ezc la b ond ad es de Windo ws y bond ad es de Web .


8/34

Pgina 8 de 34

LLLeeecccccciiinnn 111 LLLaaasss bbbaaassseeesss dddeee WWWPPPFFFyyy XXXAAAMMMLLL

EEElll MMMooodddeeelllooo dddeee lllaaa sss AAAppp llliiicccaaaccciiiooonnn eeesss dddeee WWWiiinnn dddooowww sss VVViiisss tttaaa

Las aplicaciones de escritorio en Windows tienen sus fortalezas sobre las aplicaciones

Web. Seg urame nte m uc hos de Uds. an p ued en sentir que la interac tividad y estimulo

sensorial de algunas aplicaciones Web parecen rsticas y poco atractivas en

comparacin con las que se logran en una aplicacin de escritorio Windows.

Programa nd o a p lic ac iones de e sc rito rio sob re .NET Ud . dispone d e un sinfn d e

componentes y de medios para integrar la lgica de sus aplicaciones con una rica

interfaz grfica que a su vez saca ventaja del hardware del cliente en comparacin

con la neutralidad que deben mantener los navegadores Web (compare por ejemplo

la rica apariencia y funcionalidad de Outlook con la simpleza e incomodidad de

a lguno s Web Ma il).

Los viajes de ida y vuelta e ntre e l cliente y el servidor de las aplic ac ione s Web p ued en

atentar contra el rendimiento. Esto ha provocado que los controles Web sean ms

primitivos en comparacin con los de Windows lo que induce a su vez a que los

diseadores de las aplicaciones Web incorporen poca interactividad y efectos en sus

ap lic ac iones pa ra c omp ensar la lentitud (que a pe sar de los aum entos en los anc hos

de ba nda no c omp ite an c ontra e l bus de da tos de la p lac a m ad re). Ud. no se ha

molestado alguna vez cuando para ver el precio de su reserva de avin tiene que

navega r a la p gina siguiente p ara que cua ndo c omp ruebe que el precio no le viene

bien y quiere proba r c on otro vuelo teng a q ue volver a la p g ina a nterior?

Sin e mb argo , las ap lic ac ione s trad ic iona les de esc ritorio sob re Window s tamb in

tienen sus debilidades en comparacin con las aplicaciones Web. Las aplicaciones

Windows por lo general requieren ser instaladas, tarea que adems se dificulta con el


9/34

Pgina 9 de 34

estar pendiente de las actualizaciones. Adems es cierto que el paradigma de

aplicaciones orientadas a pginas, navegando de una pgina a otra, as como el

llevar el historial de navegacin, se puede echar de menos en las aplicaciones

Windows (a menos que claro Ud. logre un efecto similar programando a cincel y

martillo).

Por otro lado a pesar de su riqueza interactiva las aplicaciones Windows tienen sus

limitaciones para el despliegue de documentos y la integracin de textos, imgenes,

audio y video (ha intentado hacer algo de esto con las Windows Forms?). Lo ms

proba ble es que algunas de las ap lic ac iones que Ud. hab r a prec iad o c on rique za d e

medios y controles hayan tenido que desarrollarse bajo el embrollo de mezclar

variadas tecnologas (controles Active X, Flash, PDF, etc) y con varios desarrolladores

intentando c on d ific ulta d integ rar sus trab ajos y resultad os.

El modelo de aplicacin de Windows Vista se basa en las mejores caractersticas y

experiencias de ambos mundos para integrarlos en un modelo unificado de

prog rama c in b asad o a su vez en e l c d igo administrad o d e .NET. Un eleme nto

integ rante de e se m od elo e s WPF y es de WPF de los que trata este c urso.

Hay dos componentes fundamentales en el modelo de aplicaciones de Windows

Vista. Una es WCF (Windows Communications Foundation), conocida por su nombre

interno Indigo. Este es un sistema de comunicacin basado en mensajes sobre

mltiples transportes y a travs de sistemas heterogneos. La otra componente es WPF

(Window s Presenta tion Found a tion), co noc ida po r su no mb re interno Ava lon. WPF da

soporte al desarrollo integrado de una rica, verstil, excitante, interactiva y

personalizada capa de presentacin de nuestras aplicaciones con la lgica del

negoc io d el tema de la a plica cin y todo ello ejecutand o en un c ontexto c onfiab le,

seg uro y p roduc tivo c om o e s .NET.

No le ha oc urrido que sus c lien tes, e incluso Ud . mismo , se sienten insa tisfec hos por la

pob re y poc o persona lizada a parienc ia visua l de su ap lic ac in? No se ha visto

disminuido el valor de la experticia que logr poner en la lgica de su aplicacin

porque la aplicacin tiene una pobre, sobrecargada o poco estimulante interaccin

grfica ? No ha q uerido Ud . que su ap lic ac in de esc ritorio basada en formularios

Windows tenga efectos y apariencias visuales como las que puede lograr por ejemplocon sus presentaciones en Power Point? o a la inversa, no ha querido Ud. que una


10/34

Pgina 10 de 34

presenta c in Pow er Point p ued a tener m s funcionalida d y rea c c iona r y mostrar d ato s

acorde con la lgica de su negocio? Ahora con WPF podr lograr que sus

ap lica ciones tenga n una m ezcla d e a mb as bond ad es.

XXXAAAMMMLLL

XAML siglas de eXtensible Application Markup Language es el lenguaje declarativo

p rop uesto por Microsoft pa ra de finir las interfac es de usua rio de las ap lic ac ione s. XAML

se basa en una sintaxis bien formada en XML y su fcil extensibilidad. XAML propicia

sep arar la de finic in d e las interfac es de usuario d e la lg ic a prop ia de la ap lic ac in.

En este sentido ofrece soporte para expresar el desarrollo de aplicaciones sobre laarquitec tura c onoc ida c om o MVC (Mod el View Controler) Mod elo Vista C ontrolad or.

La intencin con XAML es que en un lenguaje declarativo se puedan definir los

elementos que compondrn una interfaz de usuario para que estos puedan ser

desplegad os y co necta dos co n la lgica de la ap lic ac in me diante un motor de

presenta c in q ue e jec uta sob re .NET Frame wo rk co noc ido c om o WPF. Algo as c om o

que XAML es el pentagrama y la simbologa para expresar la partitura pero WPF es la

orquesta pa ra ejecuta rla!

XAML sigue las reglas sintcticas de XML. Cada elemento XAML tiene por tanto un

nombre y puede tener uno o ms atributos. Realmente XAML ha sido diseado para

esta b lecer una c orrespondenc ia lo ms d irec ta p osible con e l CLR de .NET. Por lo

ge neral tod o e lem ento en XAML se c orrespond e c on una c lase d el CLR de .NET, en

particular de WPF, y todo atributo XAML se corresponde con el nombre de una

propieda d o d e un evento de d icha clase.

A la inversa, aunque no todas las clases del CLR estn representadas en XAML,

aquellas clases que tengan un constructor por defecto y propiedades pblicas

pueden ser instanciadas declarativamente en cdigo escrito en XAML.

Tod os los nombres de elem ent os y d e a tributo s XAML son sensitivos a ma ysc ula y

minscula.

Los valores de los atributos, con independencia de su tipo deben escribirse entre

c om illas dob les (").


11/34

Pgina 11 de 34

La mayora de los elementos XAML tienen la caracterstica de que se despliegan

visualmente (rend er), pued en rec ibir entrada de tec lad o y rat n, dispa ran eventos y

saben v isua liza r el tamao y p osicin d e sus elem ent os c ontenido s (hijos).

La ma yora de los eleme ntos XAML son eleme ntos de interfaz de usua rio y d erivan d e

System.Windows.UIElement

Note en el cdigo XAML del Listado 1- 1 el pedazo que nos define un botn

(destacado en negrita). Al botn se le especifican los atributos ancho, alto, tipo de

fuente, tama o d e la fuente, color de fondo y co lor de frente (po r simp lic ida d he mo s

dejado que otros muchos atributos del botn tomen su valor predeterminado), el

bo tn tiene un c ontenido q ue en este c aso e s el texto Plsam e q ue a pa rec e e ntre los

dos ta gs y . La Figura 1 - 1 nos muestra c m o se ve ra ese b otn a l

ser desp lega do p or WPF.

Por simplicidad, en muchos de los ejemplos de este curso hemos dejado que algunos

a tributos tom en su va lor pred ete rminad o. Sin em bargo , hasta ahora los va lores

predeterminados de muchos atributos han ido cambiando de una versin de WPF a

otra. Pa ra e l desa rrollo d e a p lic ac ione s rea les rec om end amo s po ner exp lc ita me nte los

valores que quiera garantizar para los atributos an cuando estos coincidan con el

valor prede terminad o.

Listado 1- 1 Cdigo XAML de ventana con un botn

Plsame


12/34

Pgina 12 de 34

Figura 1 - 1 Ventana c on bo tn sin ac c in asoc iada

XXXAAAMMMLLL yyy eeelllcccooodddeee---bbbeeehhhiiinnn ddd

Si hac em os c lic sob re el bo tn d e la a plic ac in d e la Figu ra 1 - 1 no oc urrir na da. Si

queremos asociar una accin al evento de hacer clic sobre el botn debemos dar

c om o va lor del atributo C lic e l nomb re d e un ma nejado r pa ra e se evento (tal y co mo

se muestra en el Listado 1- 2 ).

En este c aso q ueremo s que al hac er clic el bot n c am bie d e c olor. Dnde de finimo s

el manejador con la accin para lograr el cambio de color al pulsar el botn? Como

XAML es un leng ua je de ma rc as dec la rat ivo, esta a c c in hay que d esc ribirla en un

leng ua je p roc ed ural de .NET (C# en e ste c urso). Esto e s lo que se c ono c e c om o c od e-

be hind (o c d igo en el trasfondo ). En este c aso e l ma nejado r, que hem os llam ad o

miBoton_Clic, lo que hace es cambiar en C# el valor de la propiedad Background.

Pero p ara e llo el ma nejado r deb e te ner una forma de po de r referirse a l bot n. Para

lograr esto en el cdigo XAML del Listado 2 se le da un nombre al botn al asociar al

at ributo Name el valor "miBoto n". El cd igo C# del ma nejad or miBoto n_Clic se

muestra e n e l Lista do 1- 3

Listado 1- 2 XAML pa ra b otn c on m aneja dor de eve nto

Plsame

Listad o 1- 3 Cod e-be hind p ara e l XAML del Listad o 1-2

using System.Text;using System.Windows;using System.Windows.Controls;using System.Windows.Data;

using System.Windows.Documents;using System.Windows.Input;using System.Windows.Media;


13/34


14/34

Pgina 14 de 34

Title="Botn con cdigo C# inline para el manejador">

Width="200"Height="100" Background ="Blue"Foreground="White"Plsame

elsemiBoton.Background = Brushes.Blue;

azul=!azul;

}]]>

Lo a dec uad o es po ner este c digo c on la imp lementac in d el manejad or del evento,

y el resto d e la lg ica d e la ap lic ac in, en un fic hero (co n extensin xaml.cs)

sep arad o de l fic hero (c on extensin .xaml) que c ontiene el cd igo XAML. Visua l Stud io

nos genera automticamente el fichero xaml.cs con el esqueleto de cdigo C# tal y

c om o se m uestra en e l Lista do 1- 5. Ud. deb er rellena rlo c on e l c d igo nec esario p a ra

c om pletar la d efinic in de los ma nejad ores.

Listado 1- 5 Esquem a de c d igo p ara completar el c od e-b ehind

using System;using System.Collections.Generic;using System.Text;using System.Windows;using System.Windows.Controls;using System.Windows.Data;

using System.Windows.Documents;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Imaging;using System.Windows.Shapes;

namespace WPFCursoOnline{

////// Interaction logic for Window1.xaml///

publicpartialclassWindow1 : System.Windows.Window{


15/34

Pgina 15 de 34

public Window1(){

InitializeComponent();}

}}

En principio esto es todo lo que se necesita saber para acoplar su interfaz de usuario

XAML con su lgica de funcionamiento en C#. En el XAML hay que ponerle nombre a

los elementos que necesitemos referir en el cdigo C# y darle como valor el nombre

de un manejador a los atributos eventos que queremos tratar. El resto es rellenar el

c digo C# que q ueda en el trasfondo.

PPPaaarrraaa lllooosss mmm sss cccuuurrriiiooosssooosss

Por lo pronto pudiera saltar a la seccin siguiente, pero si tiene curiosidad por

c om prende r un po c o lo que o c urre tras ba mb alinas en el c mo WPF hac e este a c op le

entonc es c ontine c on esta sec c in.

Note la p alab ra c lave pa rtial junto a l nomb re d e la clase Windo w1. Esto le indic a al

c om pilad or que sta e s una c lase p arcial y que el cd igo de la m isma , rellena do po r

el programa do r, deb e a c op larlo c on e l cd igo .NET que c orrespo nde a la de finic in

de la interfaz esc rita en e l XAML y que ser q uien c on su ejec uc in ha r el de sp lieg ue

y ac cionar de la c ap a d e presentac in.

El conc ep to de c lase p a rc ial es un a porte imp ortante de l .NET Frame wo rk 2.0

Si Ud . se fija en e l c d igo d el Lista do 3, en e l mismo usamo s la va riab le miBoton p ero no

aparece la instanciacin e inicializacin de un objeto Button para asignar a dicha

variab le. Tam po c o a pa rec e la d efinic in d el mto do InitializeCo mp onent. Ud. p ued e

ima ginar que lo q ue o c urre e s un a c op le d e la c lase p arcial del Listad o 1- 3 co n una

c lase p a rc ial c om o la que se m uestra en el Listado 1- 6.

Listad o 1- 6Supuesta clase parcial para el acople con el code-behindnamespace WPFCursoOnline{

publicpartialclassWindow1 : System.Windows.Window{

Button miBoton = new Button();


16/34

Pgina 16 de 34

void InitializeComponent(){miBoton.Width = 200;miBoton.Heigth = 100;

miBoton.FontSize = 25;miBoton.Background = Brushes.Blue;miBoton.Foreground = Brushes.White;...

}

}}

Rea lme nte Visua l Stud io no ge nera una ta l clase. El proceso q ue o curre e s muc ho m s

c om p lejo y su d esc ripc in se sa le d e los ob jetivos de e ste curso. Cua ndo se c om p ila el

proyecto que contiene el (los) fichero (s) con extensin .xaml un rbol por cada XAML

queda serializado e incrustado en el ensamblado resultante de la compilacin. En

ejecucin el mtodo InitializeComponent lo que hace es recorrer este rbol, crear

las instancias correspondientes a los elementos XAML y establecer las asociaciones

con las variables, en el ejecutable correspondiente al cdigo C#, que hayan sido

nomb rad as a travs de l atributo Name e n c ad a e lem ento XAML.

Por otra parte en XAML, al igual que en XML, el valor que se le puede asociar a un

a tributo se e sc ribe siempre en formato de un string. Por eso Ud. esc ribe FontSize="25" o

Background ="Blue". Es toda una maquinaria de convertidores de WPF (maquinaria

que Ud. puede extender) la que a partir de aqu termina haciendo algo como

miBot on .FontSize = 25; o miBot on .Bac kground = Brushes.Blue;

VVVeeennn tttaaajjjaaa sss dddeee XXXAAAMMMLLL yyy WWWPPPFFF

Si el lec tor ha desarrollad o a lguna ap lic ac in con Windo ws Forms usand o Visua l Stud io,

podr pensar que lo que se ha explicado en la seccin anterior es lo mismo que

po de mos hac er co n el disea do r de Visual Studio c uand o impleme ntam os una

ap lic ac in Wind ow s Forms y arrastramo s un b ot n d esde la c a ja d e he rramienta s pa ra

lueg o retoc a rle las p rop ied ade s con e l ed itor de p rop ied ades. En este c aso es el

Disea dor de Visua l Stud io q uien est p or det rs ge nerand o e l c d igo p roc ed ural C#

correspondiente. Entonces toda esta nueva parafernalia del WPF para qu el mismo

vino con otra botella? No es ms complicado escribir este cdigo en XAML que

trab a jar visua lmente c on e l Disea dor de Visua l Stud io y el Ed itor de Prop iedades?


17/34

Pgina 17 de 34

Bueno , nad ie ha d ic ho q ue c on WPF vamo s a renunc ia r a usa r una herram ienta visua l

de d iseo integ rada a Visua l Stud io. Una herramienta bsica integ rada a Visua l Stud io,

de nombre Cyder, est en preparacin (y por ello en este curso no ha sido utilizada).

Una tal herramienta de diseo generara cdigo declarativo en XAML (como el que

aho ra hem os esc rito a m ano ) en luga r de l c d igo C# .

Lo q ue ha ce m s va lioso a este e nfoq ue d e WPF ba sado e n XAML es que a l qued ar la

interfaz de usuario espe c ific ad a c on un lengua je d e ma rc as y dec larativo, com o es

XAML, la hace legible y ms fcilmente "retocable" por los humanos y, lo que es ms

importante, fcilmente susceptible de ser analizada y procesada por herramientas.

Esto ofrece a terceros la posibilidad de crear herramientas de diseo visual que

sop orten XAML (de hec ho ya se e stn d esarrollando a lguna s).

La separacin entre cdigo XAML para expresar la interfaz y apariencia, y cdigo de

un lenguaje .NET c om o C# pa ra expresar la lg ic a de la ap lic ac in, fac ilitar que los

diseadores con capacidades artsticas (posiblemente con experiencias en los

leng uajes de ma rc as c om o HTML pe ro po co hab ilido sos pa ra la programa c in)

puedan integrar mejor y con mas efectividad su trabajo con los programadores

c onc entrad os en la lgica de la ap lic ac in (q ue p or lo g eneral son m uy rstic os a la

hora de disear una atractiva apariencia). Con ello se facilitar poder modificar la

inte rfaz visua l sin tene r que to c a r la lg ic a de la a p lic ac in (incluso sin ver cd igo C # )

y viceversa.

XAML es extensible, como su nombre lo indica, lo que significa que los desarrolladores

pueden crear sus propios controles y elementos personalizados. Como XAML es por

naturaleza una representacin textual en XML de los objetos de WPF, puede ser

extendido por los desarrolladores por las tcnicas de la programacin orientada a

objetos. De este modo objetos concebidos para la lgica de la aplicacin pudieran

ser expuestos va XAML para q ue sea n e xtend idos por los d isea dores visua les.

Pero es ms, aunque XAML no es un lenguaje de programacin procedural, y no est

orienta do a esc ribir la lg ic a de la ap lic ac in, tiene elementos de naturaleza funcional

que inc iden sob re la prop ia visua lizac in de la interfaz, tal es el caso p or ejemp lo de los

elem entos Trigger y Anima tion q ue p ermitirn da rle d inam ismo a la interfaz visua l sin

tener que lleg ar a C# . Ver Lec c in Anima c iones y Lec c in Triggers.
http://../Escritorio/Cursos/wpf/Curso_WPF/Modulo5/05_01.htmhttp://../Escritorio/Cursos/wpf/Curso_WPF/Modulo4/04_03.htmhttp://../Escritorio/Cursos/wpf/Curso_WPF/Modulo4/04_03.htmhttp://../Escritorio/Cursos/wpf/Curso_WPF/Modulo5/05_01.htm


18/34

Pgina 18 de 34

EEElll MMMooodddeeelllooo CCCooonnn ttteeennneeedddooorrrCCCooonnn ttteeennn iiidddooodddeee XXXAAAMMMLLL

El ncleo del modelo de presentacin de WPF se basa en los elementos de

presentacin. En el ejemplo de esta seccin tenemos un elemento Button que es un

control con contenido visual y comportamiento (puede responder a eventos) y un

elemento Window que es un contenedor. En este caso el contenido del botn es un

texto y por eso se puso directamente la cadena Plsame dentro de los tags Button.

Esto se po dra haber esc rito ta mb in a soc iando e l valor "Plsame " a l atributo Content

c om o se m uestra en el Lista do 1- 7

Listad o 1- 7 Uso d el a tributo Co ntent

Lo interesante es que en WPF el contenido de un botn no tiene por qu ser un textosino q ue pued e ser cua lquier otro elemento (prc tica me nte c ua lqu ier objeto .NET).

El Listado 1- 8 nos muestra cmo definir un botn que tiene como contenido una

imagen, lo que a l ser desp lega do p or WPF se ob tiene la Figura 1 - 3.

Listado 1- 8 XAML de bo tn con imag en d entro


19/34


20/34

Pgina 20 de 34

Listado 1- 10 XAML de bo tn que c ontiene ima gen y texto

WINDITO

El Listado 10 muestra el uso del panel DockPanel. En este caso el contenido del botn

ser un pa nel que c ontiene una ima ge n (un elemento Imag e) seg uido de un texto (un

elemento TextBloc k). El resulta do se m uestra en la Figura 1 - 4

Figura 1 - 4 Botn c on ima ge n y texto

AAA tttrrriiibbbuuu tttooosss

Los atributos son la representacin XAML de las propiedades de la clase

c orrespo ndiente a un elemento.

Lam enta b lem ente el trmino a tributo ta mb in ha sido utilizad o p or .NET pa ra no mb ra r

al recurso de metainformacin que se puede asociar a diferentes construcciones de

los lengua jes .NET Este uso d el trmino no t iene na da que ve r c on uso q ue se le d a en

XAML.

Dependiendo del tipo de la entidad representada por el atributo, a estos pueden

asignrsele un valor de una de dos formas. Se le pue de a signa r un valor inline, c om o


21/34

Pgina 21 de 34

parte de la declaracin del elemento o se le puede asignar un valor declarndolo

explcitamente como un elemento anidado dentro del elemento que se est

describiendo.

Cua ndo e l atributo se le a signa valor inline, el va lor en XAML se p one siem pre c om o un

string , es dec ir ent re com illas (" "). Esto no quiere dec ir que e l va lor rea l c orrespond iente

en su representacin en el CLR sea un string. Por ejemplo cuando hacemos el string "20" c orrespond e a l va lor entero 20 en e l CLR de .NET, cuand o

se ha c e el string rea lme nte c orrespond e a l

objeto brocha Brushes.AliceBlue (a su vez una propiedad esttica de tipo Brush y de

nombre AliceBlue definida dentro de la clase Brushes. WPF se encarga de hacer las

transformaciones a partir del string "AliceBlue" que es lo que se escribe originalmente

en XAML. Esto pod a pone rse en forma an idada explc itame nte (Lista do 1- 11).

Listado 1- 11 Atributo c on va lor dec larad o e xplc itam ente


22/34

Pgina 22 de 34

LLLeeecccccciiinnn 222 CCCooonnn ssstttrrruuuyyy aaa sssuuu ppp rrriiimmm eeerrraaa aaappp llliiicccaaaccciiinnn cccooonnn

WWWPPPFFF

En esta leccin le mostraremos cmo crear sus proyectos para WPF desde Visual

Stud io. Veremo s c om o c rea r tres tipos de aplic ac ione s. Ap lic ac ione s WPF que

ejecutarn en Windows. Aplicaciones WPF Web y que ejecutarn dentro de un

navegador (Internet Explorer) y en las que podr manejar el concepto de pgina. Y

tamb in se ver c omo crear una a plica cin Window s pero c on p g inas de mod o d e

po de r naveg ar entre d ic has p ginas.

IIInnn sss tttaaa lllaaaccciiinnn dddeeeWWW

PPPFFF

Para p rac tica r los tema s de e ste curso Ud. nec esita de Windo ws Vista , Windo ws XP con

Service Pac k 2 o Wind ows Serve r 2003.

Prime ro d eb e insta lar tam b in el Wind ow s SDK. A continuac in deb e insta lar el .NET

Frame wo rk 3.0 (que vend r inc luido c om o p arte d e Window s Vista ).

http://msdn.microsoft.com/netframework/downloads/updates

En p rinc ip io Ud. no nec esita de Visua l Stud io p ara c om p ilar y ejec uta r ap lic ac ione s de

WPF (al igua l que tamp oc o lo nec esita pa ra desarrolla r ap lic ac ione s .NET). Cuando Ud .

se d esc arga el SDK este viene c on a plic ac in d e lnea de c om ando MSBuild c on la

c ua l Ud . podr c om p ilar y generar ap lica c ione s WPF. Sin emb argo este c urso lo

ilustram os sob re la base d e ut iliza r Visua l Stud io porque e sto nos ha r a todos el trab a jo

infinitamente ms fcil de modo que no vamos a abrumarlo en este curso

explic ac ione s de c m o ha c er las cosas c on MSBuild cuando posib lem ente la m ayora

no lo nec esita r.
http://msdn.microsoft.com/netframework/downloads/updateshttp://msdn.microsoft.com/netframework/downloads/updateshttp://msdn.microsoft.com/netframework/downloads/updates


23/34

Pgina 23 de 34

Si a l mom ento de interac tua r c on e ste curso ya d ispo ne d el nuevo Visua l Stud io p a ra

WinFX (c d igo interno Orc as) posiblem ente no teng a que insta lar nad a m s. Por aho ra

suponemo s que Ud. de be tene r insta lado Visua l Stud io 2005 y a dem s deb e insta la r

Visua l Stud io Extensions for .NET Framework 3.0 (WCF&WPF). Esto le a a d ir a Visua l

Stud io las herramientas que inc luyen la integ rac in de XAML c on e l ed itor Inte llisense,

las plantillas (templates) de proyectos para WPF, para WCF y la integracin con la

doc ume ntac in d el Window s SDK.

De mom ento, esta s extensiones incluyen tamb in a Visua l Stud io un d iseador visua l, a l

estilo de l que tene mo s pa ra las Window s Forms, pe ro que e st an en un esta do rstico

y experimental. Pero no se alarme que esta claro que un buen diseador vendr. De

modo que por esta razn, y para que Ud. gane un dominio mayor del tema, los

ejemplos de este curso los vamos a escribir directamente a mano en XAML, aunque

claro que el Intellisense nos ayudar y nada nos impide echar mano tambin al viejo

mtodo de copiar y pegar (para lo que Ud. podr descargar todos los proyectos de

los ejemp los que vienen c on el curso).

Si ya lo tiene to do insta lado y d io una lectura a la lec c in a nterior entonc es ma nos a la

obra con WPF. En esta leccin vamos a ver los tres modos de crear aplicaciones en

WPF, primero veremos como desarrollar una aplicacin que ejecutar como

aplicacin de escritorio Windows, luego veremos cmo desarrollar una aplicacin

similar pero para que sea ejecutada por un navegador y por ltimo veremos una

forma hbrida de c mo ejec utar una a plica cin Window s pero co n ca pa cidad es de

navegacin como las que se ofrecen en las aplicaciones ejecutadas bajo un

navegador.

CCCrrreeeaaarrr uuunnnaaa aaappp llliiicccaaaccciiinnn WWWPPPFFFppp aaa rrraaa eeejjjeeecccuuu tttaaarrr cccooommm oooaaappp llliiicccaaaccciiinnn dddeee eeessscccrrriiitttooorrriiiooo

Ab ra Visua l Stud io y esc oja la op c in New Projec t pa ra c rea r un nuevo p royec to.

Selec c ione la o pc in NET Frame wo rk 3.0 en la venta na aparec ern las p lantillas para

las nueva s posibilida des que da WPF ta l y c om o se m uestra en la Figura 2- 1.

Escoja la opcin Windows Application (WPF)para indicar que queremos crear un

ejecuta ble pa ra una ap lic ac in Windo ws c on WPF (despu s verem os c m o p od em os

seleccionar tambin XAML Browser Application (WPF) si lo que queremos es crear una

aplicacin para usarla dentro de un navegador web). Dle un nombre al proyecto y


24/34

Pgina 24 de 34

pulse OK. Los ficheros de proyecto y los manifiestos de la aplicacin sern creados

automticamente.

Ab ra el Solution Explorer y mire los fiche ros gene rados. Abra el fic hero Windo w1.xa ml

para que vea la p lant illa en XAML c rea da pa ra la interfaz (Figu ra 2- 2) y ab ra el fic hero

Windo w1.xam l.cs p ara que vea la plantilla C# c rea da pa ra el cod e-behind

Figura 2- 1 Escog iendo la opc in de c rea r un proyec to pa ra a plica c in de

esc ritorio WPF

Figura 2- 2 Plantilla p ara e l c dig o XAML de una a plic ac in de esc ritorio WPF


25/34


26/34

Pgina 26 de 34

Name=miBoton el Intellisense incorporar esta informacin, de modo que a partir de

ah cuando se use la variable miBoton en el cdigo C# este ofrecer las facilidades

acostumbradas desplegando las caractersticas asociadas al tipo de la variable

(Figura 2- 4).

Figura 2- 4 Esc ribiendo el code-b ehind de l manejad or del evento c lic

Busque la opcin Build y compile el proyecto y luego ejecute la aplicacin, deber

de splega rse una ventana c om o la q ue se m ostr e n la Figura 1- 2. Haga clic sobre el

bot n y observe c mo ste reac ciona a l evento y ca mb ia d e c olor.

CCCrrreeeaaarrr uuunnnaaa aaappp llliiicccaaaccciiinnn WWWPPPFFFpppaaarrraaa eeejjjeeecccuuu tttaaa rrr eeennn uuunnn nnnaaavvv eeegggaaadddooorrr

En lugar de crear una aplicacin WPF que funcione como aplicacin de escritorio

Windo ws, pued e c rea rse una ap lic ac in WPF pa ra que sea ejecuta da a trav s de un

navegador. Para ello siga los mismos pasos que para crear la aplicacin de escritorio

pero esc oja la p lantilla WinFX Web Brow ser App lic a tion a la hora d e e sc og er el tipo d e

proyec to (Figura 2- 1).

Abra el fichero Page1.xaml, compruebe que a diferencia del caso anterior para una

aplicacin Windows, ahora en la plantilla aparece ahora el elemento XAML

en lugar de (Figura 2- 2).
http://../Escritorio/Cursos/wpf/Curso_WPF/Modulo1/01_01C.htmhttp://../Escritorio/Cursos/wpf/Curso_WPF/Modulo1/01_01C.htm


27/34


28/34

Pgina 28 de 34

Figura 2- 3 Cdigo C# de aplica c in WPF pa ra e jec utar en navega do r

Si ejec uta mo s esta ap lic ac in esta se d esp lega r dentro del Inte rnet Explorer (Figura 2-

4). Note los dos nuevos botones de navegacin que aparecen dentro de la ventana

del nave ga dor. Estos bo tone s sirven pa ra la naveg ac in e ntre las pg inas de la m isma

aplicacin y son puestos automticamente por WPF, por haber seleccionado la

opcin de generar una aplicacin Web Browser. Adems como siempre estn los

boto nes del Internet Exp lorer pa ra nave ga r entre d istintas p ginas abiertas c on Internet

Explorer.

Figura 2- 4 Aplica c in WPF ejec utando en e l naveg ad or


29/34

Pgina 29 de 34

Para el ejemplo anterior los botones de navegacin no son de utilidad porque

tenem os una sola p g ina y p or tanto no ha y p ginas entre las que naveg ar (note q ue

en la ima ge n los bo tones ap arec en c om o d eshab ilitad os).

Sin embargo si tuviramo s el p royec to c on los dos fiche ros Wind ito.xaml (Figura 2- 5) y

WEBOO .xaml (Figura 2- 6) si habra na veg ac in entre p gina s y os botones nos sirven

pa ra e llo.

Note e n el XAML de la p gina d e la Figu ra 2- 5 que hem os utilizado un nue vo e lem ento

XAML que es Hyperlink, este nos permite enlazar una pgina con otra cuya ubicacin

hay q ue d arle c omo valor al atributo Naviga teUri. Comp ile y e jec ute la a plic ac in y se

despleg ar de ntro del Internet Explorer la p rime ra pgina (Figura 2- 7). De c lic sob re el

hyperlink y se pasar a la pgina siguiente (Figura 2- 8). Fjese que ahora el botn de

naveg ac in a pa rec e a c tivad o ha bilitand o el movimiento sob re el historial de p ginas

de la misma ap lic ac in, pe rmitiend o e n este c aso reg resar a la p gina a nterior.

Figura 2- 5 Cdigo XAML de una p g ina c on hyp erlink


30/34


31/34


32/34


33/34

Pgina 33 de 34

Figura 2- 14 Indic and o la pg ina inic ial dentro de la ap lic ac in Windows

Com pile y ejec ute la a plic ac in, co mp rueb e q ue se m ostrar una ventana en el estilo

de una aplicacin de escritorio Windows, es decir que no ejecutar dentro de un

nave ga do r. Sin em ba rgo , note q ue a hora en su interior se ha de splega do la p gina y

que en la parte superior de la pgina WPF nos ha puesto automticamente los

boto nes de na veg ac in (Figu ra 2- 15).

Figura 2- 15 Aplic ac in Windows c on nave ga c in entre pg inas


34/34

Aunque no estamos dentro de un navegador Web si hacemos clic en el hiperlynk

WEBOO de la Figu ra 2- 15 naveg arem os ha c ia la p rxima p gina (Figura 2- 16), note

co mo el bot n de navega cin est ac tivad o

Figura 2- 16 Aplicac in Windows con Naveg ac in entre p g inas