Creando la interfaz de usuario de Windows

Phone (XAML)
Creando la interfaz de usuario de Windows Phone
(XAML)
Este artculo es una traduccin del artculo original encontrado en:
http://create.msdn.com/en-
US/education/quickstarts/Creating_the_Windos_!hone_User_"nter#ace_$%&'()*$%+.
,ormalmente- se utili.a Sil/erlight para crear aplicaciones de Windos !hone 0
',( para crear 1uegos de Windos !hone. '()* es el lengua1e declarati/o
utili.ado en Sil/erlight para crear inter#aces de usuario- por lo tanto en W!2 es
utili.ado para crear las aplicaciones de inter#a. de usuario en el tel3#ono- tales
como- controles- #ormas- te4to 0 otros contenidos presentados en la pantalla. Si
est5s #amiliari.ado con la programacin e6- t7 puede pensar en '()* como
lo m5s parecido a 89)*- pero m5s potente. (l igual que 89)*- '()* se
compone de elementos 0 atri6utos. Sin em6argo- '()* est5 6asado en ')* 0
por lo tanto de6es seguir las reglas de ')*.
97 podras preguntarte- :;!or qu3 me importa '()* si slo /o0 a utili.ar
herramientas como <isual Studio o E4pression =lend para crear inter#aces de
usuario>: ( pesar de que e4isten herramientas que aportan 6ene?cio- siempre
/as a querer pasar por alto el entender o modi?car el cdigo '()*. !or otra
parte- es a /eces m5s #5cil tra6a1ar el cdigo de inter#a. de usuario a mano-
cuando se desea tener un control del mismo- o simplemente- si deseas sa6er lo
que est5 ocurriendo en 3l.
Este tutorial contiene las siguientes secciones:
E1emplo '()*
'()* es slo el cdigo de procedimiento @slo es m5s #5cilA
!ropiedades
'()* 0 el 5r6ol /isual
)5s que una inter#a. de usuario est5tica
Ejemplo XAML

*o siguiente es un simple e1emplo en cdigo '()*- que permite crear un 6otn
XAML
BCrid 4:,ameD:Content!anel: Crid.EoD:F: )arginD:F%-G-F%-G:H
B=utton 8eightD:2%: WidthD:FIG: ContentD:Click )e: /H
B/ CridH

Cuando se e1ecuta la aplicacin de6e aparecer algo como esto:


El 6otn se especi?ca mediante el elemento <Button! El ancho 0 la altura
de los atri6utos especi?can el tamaJo del 6otn. El <"rid se genera cuando
se crea una nue/a aplicacin de Windos !hone en <isual Studio- 0 se utili.a
para colocar los o61etos. !ara aprender m5s acerca del diseJo en Sil/erlight-
consulta Kistri6ucin en la pantalla.
!uedes utili.ar <isual Studio para generar el cdigo '()*. !or e1emplo- puedes
arrastrar un 6otn de la ca1a de herramientas a la super?cie de diseJo.
( continuacin se muestra el cdigo '()* que <isual Studio puede generar. @El
'()* puede ser distintoA.
XAML
BCrid 4:,ameD:ContentCrid: Crid.EoD:F:H
B=utton ContentD:=utton: 9itleD:2%: 8ori.ontal(lignmentD:*e#t:
)arginD:FL%-%2M-G-G: ,ameD:6uttonF: <ertical(lignmentD:9op: WidthD:FIG: /H
B/CridH


9en en cuenta que <isual Studio agrega algunos atri6utos adicionales- como
8ori.ontal(lignment @(lineacin hori.ontalA 0 el )argin @)argenA- al agregar el
6otn. Este e4tra no de6era ser un incon/eniente si tus necesidades son mu0
espec?cas. Ca6e destacar- que puedes cam6iar estos atri6utos utili.ando la
inter#a. de usuario de <isual Studio- pero en algunos casos- es posi6le que
pre?eras slo el '()* directamente para editar.

Una de las me1ores cosas acerca del uso de un lengua1e declarati/o como
'()*- est5 en tener una clara separacin entre el marcado que representa la
inter#a. de usuario 0 el cdigo que hace en la aplicacin. !or e1emplo- un
diseJador podra tra6a1ar en el diseJo de una inter#a. de usuario 0 luego los
desarrolladores aJadir el cdigo de procedimiento en el '()*. "ncluso si el
diseJador 0 el desarrollador son la misma persona @0a que a menudo lo sonA-
puedes mantener tu inter#a. de usuario en los archi/os de '()* @.4amlA 0 el
cdigo de procedimiento en archi/os de cdigo su60acente @.cs 0 ./6A.

'()* es s#lo el $#di%o de pro$edimiento
Elementos '()*- como <Button&' son el equi/alente a crear instancias de
o61etos en el cdigo de procedimiento. !or e1emplo- considera el siguiente
'()*:
XAML
BCrid 4:,ameD:Content!anel: Crid.EoD:F: )arginD:F%-G-F%-G:H
B=utton 8eightD:2%: WidthD:FIG: ContentD:Click )e: /H
B/ CridH

( continuacin se muestra como el '()* puede ser escrito tanto en CN como
en <isual =asic:
C#
/ /"niciali.ar el 6otn
=utton m0=utton D ne =utton @AO
/ /Esta6lecer sus propiedades
m0=utton.Width D FIGO
m0=utton.8eight D 2%O
m0=utton.Content D :Click )e:O
/ /(socia al 5r6ol /isual- espec?camente como un hi1o de el o61eto Crid
/ /@llamada PContent!anelQA. En otras pala6ras- la posicin del 6otn en la inter#a. de usuario.
Content!anel.Children.(dd @m0=uttonAO
Visual Basic
P"niciar el 6otn
Kim m0=utton (s ,e =utton @A
PEsta6lecer sus propiedades
m0=utton.Width D FIG
m0=utton.8eight D 2%
m0=utton.Content D :Click )e:
P(sociar al 5r6ol /isual- espec?camente como un hi1o de el o61eto Crid P @llamada
PContent!anelQA. En otras pala6ras- la posicin del
P6otn en la inter#a. de usuario.
Content!anel.Children.(dd @m0=uttonA

!ara la "nter#a. de Usuario- '()* tiene la /enta1a de ser m5s #5cil de leer 0 ser
aun m5s compacto que el cdigo de procedimiento. Sin em6argo- a /eces es
necesario el uso de cdigo de procedimiento para crear la inter#a. de usuario
de #orma din5mica.
Propiedades
*os siguientes- son dos maneras de especi?car los /alores de la propiedad en
'()*.
(tri6uto de la sinta4is de elementos
!ropiedad de la sinta4is de elementos
El elemento de sinta4is del atri6uto- es el atributo = "valor", sinta4is que se ha
/isto en los e1emplos anteriores 0 que podras estar #amiliari.ado con 3l en
89)*. En el siguiente e1emplo- es creado un rect5ngulo ro1o. Su relleno es un
atri6uto que se esta6lece en un nom6re de color prede?nido.

XAML
BEectangle RillD:Eed: /H
(lternati/amente- puedes especi?car el /alor del color- utili.ando la sinta4is de
elementos de propiedad.
XAML
BEectangleH
BEectangle.RillH
BSolidColor=rush ColorD:Eed: /H
B/ Eectangle.RillH
B/EectangleH
En este caso- de6es especi?car e4plcitamente el SolidColor=rush @!incel de
color slidoA- el cual es el o61eto de tipo requerido por el relleno de la
propiedad- no slo la cadena :Eed:. ( partir de este e1emplo- es posi6le deducir
que la sinta4is de elementos de propiedad es slo una manera detallada de
hacer lo mismo. Sin em6argo- no todos los /alores de las propiedades se
pueden especi?car mediante una cadena simple de atri6utos. !or e1emplo- si
necesitas especi?car /arias propiedades de un o61eto que se utili.a como el
/alor de una propiedad- es pro6a6le que tengas que utili.ar la sinta4is de
elementos de la propiedad. En el siguiente e1emplo se crea un rect5ngulo- pero
en lugar de un relleno simple de color ro1o- se utili.ar5 un degradado.
XAML

B- Este rect5ngulo se pinta con un degradado lineal diagonal. -H
BEectangle WidthD:%GG: 8eightD:%GG:H
BEectangle.RillH
B*inearCradient=rush Start!ointD:G-G: End!ointD:F-F:H
BCradientStop ColorD:Sello: TUsetD:G.G: /H
BCradientStop ColorD:Eed: TUsetD:G.%L: /H
BCradientStop ColorD:=lue: TUsetD:G.2L: /H
BCradientStop ColorD:*imeCreen: TUsetD:F.G: /H
B/ *inearCradient=rushH
B/ Eectangle.RillH
B/ Eectangle H

Cuando es e1ecutada la aplicacin se /er5 algo como esto:


Como puedes /er- el relleno de la propiedad- utili.a un o61eto comple1o
@*inearCradient=rushA para crear el gradiente. En casos como estos- es
necesario utili.ar la sinta4is del elemento de la propiedad- en lugar de
simplemente especi?car el /alor como una cadena asignada a un atri6uto.
'()* 0 el 5r6ol /isual
En '()*- se tienen elementos @tales como <Button 0 <"rid) que pueden
tener otros elementos @nodosA por de6a1o de ellos @los hi1osA. Esta relacin
padre / hi1o especi?can o61etos que se colocan en la pantalla 0 responden a
e/entos iniciados por el usuario. Consideremos el siguiente e1emplo.
Cuando se e1ecuta la aplicacin- se /er5 algo como esto:
XAML
BCrid 4:,ameD:Content!anel: =ackgroundD:Eed: Crid.EoD:F: )arginD:F%-G-F%-G:H
BStack!anel )arginD:%G: =ackgroundD:=lue:H
,ameD:?rst9e4t=lock: B9e4t=lock RontSi.eD:MG:HRirst 9e4t=lockB/ 9e4t=lockH
,ameD:second9e4t=lock: B9e4t=lock RontSi.eD:MG:H Second 9e4t=lock B/
9e4t=lockH
,ameD:third9e4t=lock: B9e4t=lock RontSi.eD:MG:H 9hird 9e4t=lock B/
9e4t=lockH
B/ Stack!anelH
B/ CridH
El Stack!anel a.ul est5 contenido dentro de un Crid ro1o. El elemento 9e4t=lock
est5 contenido dentro del Stack!anel @el elementos 9e4t=lock es hi1o del
Stack!anelA. (dem5s- los elementos 9e4t=lock est5n apilados uno encima del
otro- en el orden en que se declaran en el '()*. El siguiente diagrama de 5r6ol
muestra las relaciones entre los elementos.
(dem5s de determinar cmo se presenta el contenido- el 5r6ol /isual tam6i3n
puede tener un e#ecto de cmo se procesan los e/entos. )uchos e/entos
tpicos acontecidos en el 5r6ol @llamados e/entos enrutadosA :6ur6u1a:. !or
e1emplo- puedes conectar un controlador de e/entos al Stack!anel que controla
el 6otn i.quierdo del ratn @el e/ento )ouse*e#t=uttonKonA.
El siguiente '()* muestra como agregar un )ouse*e#t=uttonKon a un
controlador de e/entos denominado common)ouse8andler en el Stack!anel.
XAML
BCrid =ackgroundD:Eed: 4:,ameD:Content!anel: Crid.EoD:F: )arginD:F%-G-F%-G:H
BStack!anel )arginD:%G: =ackgroundD:=lue:
)ouse*e#t=uttonKonD:common)ouse8andler:H
B9e4t=lock ,ameD:?rst9e4t=lock: RontSi.eD:MG: HRirst 9e4t=lockB/9e4t=lockH
B9e4t=lock ,ameD:second9e4t=lock: RontSi.eD:MG: HSecond
9e4t=lockB/9e4t=lockH
B9e4t=lock ,ameD:third9e4t=lock: RontSi.eD:MG: H9hird 9e4t=lockB/9e4t=lockH
B/ Stack!anelH
B/ CridH


( continuacin se muestra el cdigo de procedimiento para colocar el e/ento:




C#

pri/ate /oid common)ouse8andler @o61ect sender- EoutedE/ent(rgs eA
V
RrameorkElement #eSource D e.TriginalSource as RrameorkElementO
sitch @#eSource.,ameA
V
case :?rst9e4t=lock::
?rst9e4t=lock.9e4t D ?rst9e4t=lock.9e4t W XClickY:O
6reakO
case :second9e4t=lock::
second9e4t=lock.9e4t D second9e4t=lock.9e4t W XClickY:O
6reakO
case :third9e4t=lock::
third9e4t=lock.9e4t D third9e4t=lock.9e4t W XClickY:O
6reakO
Z
Z

Visual Basic

!ri/ate Su6 common)ouse8andler @=0<al sender (s S0stem.T61ect- _
=0<al e (s S0stem.Windos."nput.)ouse=uttonE/ent(rgsA
Kim #eSource Como RrameorkElement e.TriginalSource D
Select case #eSource.,ame
Case :?rst9e4t=lock:
?rst9e4t=lock.9e4t D ?rst9e4t=lock.9e4t [ :ClickY:
Case :second9e4t=lock:
second9e4t=lock.9e4t D second9e4t=lock.9e4t [ :ClickY:
Case :third9e4t=lock:
third9e4t=lock.9e4t D third9e4t=lock.9e4t [ :ClickY:
End Select
End Su6

!ara pro6ar este e1emplo- ha. clic en el 9e4t=lock. Cuando esto sucede-
9e4t=lock es capturado- 0 se propaga hasta su elemento padre @el Stack!anelA-
que a su /e. controla el e/ento.

El siguiente diagrama muestra como el e/ento se propaga hasta el 5r6ol:

F. El usuario hace clic en 9e4t=lock.
%. El e/ento se propaga hasta el elemento primario.
M. \ 0 siguen las 6ur6u1as hasta el 5r6ol.
Kado que el e/ento contin7a hasta el 5r6ol- puede :escuchar: al e/ento
)ouse*e#t=uttonKon en el Crid.
M(s )ue una interfaz de usuario est(ti$a
97 puedes hacer algo m5s que la e4hi6icin de una inter#a. de usuario est5tica
con '()*. !uedes crear animaciones- incrustar /ideos 0 enla.ar datos
solamente usando el lengua1e de marcacin. (prender5s m5s acerca del uso
del '()* en otros tutoriales- sin em6argo- he aqu un e1emplo de una
animacin simple en cdigo '()*. !ara pro6ar este e1emplo- ha. clic en el
rect5ngulo para poder /isuali.ar el e#ecto.
XAML

BStack!anel =ackgroundD:NRKRLEI:H
BStack!anel.EesourcesH
BStor06oard 4:,ameD:m0Stor06oard:H
BKou6le(nimationUsing]e0Rrames
Stor06oard.9arget,ameD:m0Eectangle:
Stor06oard.9arget!ropert0D:8eight:H
BY^ Este ]e0Rrame resta6lece la animacin
con un /alor de @MGA al comien.o de la animacin^H
B*inearKou6le]e0Rrame <alueD:MG: ]e09imeD:G:G:G: /H
BY_Esta animacin se utili.a para crear aceleracin. El
SplineKou6le]e0Rramecrea una
animacin que comien.a lenta 0 luego acelera. El rect5ngulo :cae:^H
BSplineKou6le]e0Rrame ]e0SplineD:G-G F-G: <alueD:MGG:
]e09imeD:G:G:G.&: /H
BY^ Esta animacin spline crea el :re6ote: en el ?nal-
donde el rect5ngulo acorta sulongitud r5pidamente al principio 0
luego #rena 0 se detiene.^H
BSplineKou6le]e0Rrame ]e0SplineD:G.FG- G.%F G.GG- F.G: <alueD:%LG:
]e09imeD:G:G:F.L: /H
B/Kou6le(nimationUsing]e0RramesH
B/Stor06oardH
B/Stack!anel.EesourcesH
BEectangle 4:,ameD:m0Eectangle: )ouse*e#t=uttonKonD:)ouse_Clicked: RillD:=lue:
WidthD:%GG: 8eightD:MG: /H
B/Stack!anelH
C#
// Cuando el usuario hace clic en el rect5ngulo- la animacin comien.a.
pri/ate /oid )ouse_Clicked@o61ect sender- )ouseE/ent(rgs eA
V
m0Stor06oard.=egin@AO
Z
Visual Basic
PCuando el usuario hace clic en el rect5ngulo- la animacin comien.a.
!ri/ate Su6 )ouse_Clicked@=0<al sender (s T61ect- =0<al e (s )ouseE/ent(rgsA
m0Stor06oard.=egin
End Su6
Este es un e1emplo del uso de '()* para especi?car el comportamiento de los
contenidos en el lugar del diseJo o de otros tipos est5ticos de inter#aces de
usuario. El elemento Stor06oard de?ne algunas propiedades generales de la
animacin- tal como qu3 o61eto ser5 animado. *os elementos hi1os de
Stor06oard- como *inearKou6le]e0Rrame- especi?ca cmo se e1ecuta la
animacin. !ara o6tener m5s in#ormacin so6re animaciones- consulta