En este tutorial vemos una serie de controles disponibles para desarrollar nuestras aplicaciones para Windows Phone, es viejito, pero espero que les sirva.

1. Tutorial: Controles de Windows Phone
MSP: Carola Velazquez
Puedes instales lo necesario para poder realizar las prácticas, hazlo desde el siguiente link:
http://download.microsoft.com/download/E/D/C/EDCF1B19-3D98-48C3-B176-
D20AF072497F/WPSDK71.iso
Visita el blog: http://mspcarojujuy.wordpress.com/

2. Controles de Windows Phone
Existen controles que podemos incluir en aplicaciones de Windows Phone dependiendo de lo
que queremos hacer y de cuáles de ellos son más convenientes para cada situación.
Veremos los controles más significativos para realizar aplicación Windows Phone.
A continuación se enumeran los controles que veremos en esta sección:
1. Controles de navegación
2. Controles de Agrupación y Distribución
3. Controles de texto
4. Botones y controles de Selección
5. Controles de Lista
6. Imagen, mapa, y controles de medios
7. Controles HTML
Veamos cada uno en más detalle
1. Controles de Navegación:
Las aplicaciones para Windows Phone se basan en un modelo de página en la que se
puede navegar a través de diferentes contenidos.
Las páginas contienen controles de distribución, que a su vez contienen controles
adicionales. Los cuales son:
• PhoneApplicationFrame: Es el control principal de la aplicación para Windows
Phone. Este control admite la navegación a través de páginas.
• PhoneApplicationPage: Encapsula el contenido que se puede navegar por el
PhoneApplicationFrame.
Por defecto, al crear un nuevo proyecto “Aplicación de Windows Phone” se genera un
PhoneApplicationPage, con unos controles por defecto.

3. 2. Controles de Agrupación y Distribución:
Son contenedores de otros controles y objetos visuales, se utilizan para colocar los
objetos contenidos en la pantalla. Un control de distribución sirve como la raíz de
diseño de la aplicación dentro de una página. Puedes utilizar los controles adicionales
de distribución según sea necesario. Los cuales son:
• Grid: Proporciona una superficie compuesta de filas y columnas para mostrar
elementos hijos. Por defecto, un proyecto “Aplicación de Windows Phone” posee un
Grid o Tabla para ordenar otros controles en su interior.
Al insertar el Grid, se agrega el código XAML:
Para agregar columna, debes cambiar la propiedad ColumnDefinitions:

4. Al presionar el botón agregar, se agregan tantas columnas como se desea, para cada
una se puede establecer el ancho (Width), se indica por defecto “*”, lo cual se ajusta al
de acuerdo al tamaño total de la tabla, mientras que Min y Max Width indican los
tamaños minimos y máximos que la columna puede tomar.
Mientras que para agregar filas al Grid o Tabla, se utiliza la propiedad RowDefinition
De igual manera que para las columnas, al cambiar esta propiedad se pueden agregar
filas, presionando el botón agregar, las propiedades para las filas son similares que
para las columnas:

5. El código XAML generado a partir de estas acciones, es el siguiente:
Dentro de cada celda (espacio generado entre filas y columnas) se pueden colocar
otros controles, de manera que el Grid se puede utilizar como control raíz a partir del
que se estructura la página de la aplicación que se realiza.
• StackPanel: Proporciona una superficie para mostrar elementos secundarios en una
línea, ya sea horizontal o verticalmente.

6. Al arrastrar el control al Design View se inserta el control, y el código XAML
correspondiente.
• ScrollViewer: Proporciona una superficie de desplazamiento para mostrar un elemento
hijo.
Al insertar el ScrollViewer, se agrega el código correspondiente XAML. También se
puede cambiar sus propiedades.

7. • Border: Proporciona un borde, un fondo, o ambas cosas a otro control.
Arrastra el control “border”, se insertará un “border” en Design View y también se
habrá agregado el código XAML que corresponde al borde:
Pueden cambiarse las propiedades del borde, realizando cambios en Propierties
Window, como en el ejemplo, donde se cambia el tamaño del borde:
Nota que al realizar un cambio en el tamaño del borde, también se cambia el código
XAML.

8. Puedes cambiar el tamaño haciendo click sostenido, los valores que se visualizan en las
propiedades Height y Width, tanto en el código XAML como en la ventana de
propiedades para el control:
Incluso puedes cambiar el color del marco, con la propiedad “BorderBrush”,
simplemente debes elegir el color que deseas, ten en cuenta estas referencias:
1 – transparente
2 – opaco
3 – degradado
4 – imagen
Para cambiar el color debes seleccionar “opaco” y luego el color, como se muestra:

9. • Canvas: Proporciona una superficie para mostrar elementos hijos en
coordenadas específicas en el Canvas.
Al arrastrar el control a Design View, se visualiza el control y su código XAML.
• Panorama: Crea una vista panorámica de los elementos que puede ser
deslizada de lado a lado.
Para crear un control Panorama, debes Agregar un nuevo elemento:

10. Se abrirá una nueva ventana donde debes seleccionar el Panorama:
Así se abre una nueva página que corresponde a un control Panorama:
El control Panorama brinda más información a medida que se desliza la pantalla hacia
la derecha o izquierda
• Pivot: Proporciona una forma rápida de administrar las vistas de grandes conjuntos
de datos dentro de una aplicación. El control se puede utilizar como una interfaz de
navegación para el filtrado de grandes conjuntos o cambiar entre las vistas.
Para agregar un control Pivot, debes agregar un nuevo elemento:

11. Y luego elegir el control Pivot:
Finalmente se visualiza como:
El control Pivot ofrece ofrece un menú en la parte superior que al seleccionarlo recarga el
contenido en la pantalla.

12. Cuándo usar un control Pivot y Cuándo usar un control Panorama?
Decidir cuál es el control más adecuado hará que la aplicación sea rápida de acceder y cuente
con toda la información que el usuario desea en el momento oportuno, así si queremos
mostrar un pantallazo de lo que ofrece la aplicación, es conveniente utilizar un control
Panorama, que carga sólo un contenido reducido de lo que brinda la aplicación, en cambio de
si la aplicación debe mostrar grandes cantidades de información es útil utilizar el control Pivot.
Puedes incluso realizar una combinación de ambos controles de manera que la aplicación
muestre lo que ofrece y también grandes cantidades de información.
3. Controles de Texto.
• TextBlock: Muestra fragmentos de sólo lectura del texto, a modo de etiquetas. El
contenido se establece con la propiedad Text.
Arrastra el control al Design View y se inserta el TextBlock y el código XAML
correspondente:

13. Para cambiar el valor del TextBlock, debes cambiar la propiedad Text:
Al cambiar la propiedad colocando “Hola mundo!” se ve lo siguiente:
También puedes cambiar el tamaño de esta etiqueta, cambiando la propiedad
“FontSize”, en este caso aumentamos de 20 a 25px.
Cambia la posición del control arrastrándolo con click sostenido.

14. El proyecto muestra dos TextBlock por defecto:
Como práctica cambie el nombre de su aplicación en ambos TextBlock, recuerda
cambiar la propiedad Text.
• TextBox: Se utiliza para las entradas de textos cortos. También se pueden utilizar
para la introducción de texto de varias líneas. El contenido se establece con la
propiedad Text.

15. Agrega un TextBox, se agrega también el código XAML:
Cuál es la Diferencia entre TextBlock y TextBox?
Comienza la depuración para correr el Emulador, es decir, presiona en Depuración y
luego “Iniciar Depuración”. Al hacer click dentro del TextBox, aparece el teclado
para hacer el ingreso de texto:
Ingresa un texto en el TextBox:
Aquí podemos ver que TextBox permite ingresar texto, mientras que TextBlock
permite colocar información estática.

16. • PasswordBox: Enmascara el texto que un usuario introduce. El contenido se
establece con la propiedad Password y se enmascara con la propiedad
PasswordChar.
Al agregar el control PasswordBox, se agrega el código, nota que se visualiza la típica
petición de ingreso de Usuario y contraseña para que este ejemplo sea más claro.
Inicia la depuración e ingresa un usuario y contraseña y verás que la contraseña se
enmascara:

17. 4. Botones y controles de Selección
Los botones son:
• Button: Un control que responde a la entrada del usuario y dispara un evento
Click. El contenido es establecido con la propiedad Content.
Inserta un botón, se agrega el código XAML correspondiente:
Puedes cambiar el nombre con el que se verá el botón con la propiedad Content,
cambialo a aceptar:

18. Los botones son controles que admiten eventos, como Click, MouseOver (cuando se
pasa por encima del botón el cursor del mouse) entre otros.
• HyperlinkButton: Representa un control de botón que muestra un
hipervínculo, es decir, un enlace a una página web. Cuando haces click, el
HyperlinkButton permite a los usuarios moverse a una página web en la misma
aplicación web o a una página web externa. Su contenido se establece con la
propiedad Content y el URL a navegar se establece con la propiedad
NavigateUri.
Inserta este control y cambia la propiedad Content al valor “Ver”, y la
propiedad NavigateUri por una dirección de alguna página web:
Al correr el Emulador, iniciando Depuración, al presionar el HyperlinkButton,
se abrirá la página web que has cargado.
NOTA: debes estar conectado a Internet.

19. Los controles de selección son:
• CheckBox: Representa un control que puedes activar o desactivar. La casilla de
verificación ofrece opcionalmente un estado indeterminado. Su contenido se
establece con la propiedad Content. Se puede elegir una o varias casillas al
mismo tiempo.
Inserta varios controles CheckBox:
Nota que cada CheckBox tiene asociada una etiqueta, puede cambiarse con la
propiedad Content.

20. • RadioButton: Permite seleccionar una única opción de una lista. Cuando los
botones de radio se agrupan son mutuamente excluyentes. Su contenido se
establece con la propiedad Content.
Agrega un control RadioButton
• Slider: Representa un control que te permite seleccionar entre una gama de
valores a lo largo de una pista. La propiedad Value determina la posición en la
pista.

21. Al cambiar la propiedad value:
5. Controles de Lista
• ListBox: Muestra una lista de elementos que puedes seleccionar haciendo clic
en él. Su contenido se establece con las propiedades Items o ItemsSource. La
apariencia de cada elemento puede ser personalizada utilizando un
DataTemplate.

22. Cambiando la propiedad Items se pueden agregar nuevos a la lista:
Presionando el botón agregar, se agregan tanto ítems como se quiera:
Cada ítem tendrá sus propiedades, y su contenido:

23. Finalmente se han agregado tres ítems a la lista, estos ítems pueden ser otros
controles.
6. Imagen, mapa, y controles de medios
• Image: Muestra una imagen. El contenido se establece con la propiedad
Source. Las aplicaciones de Windows Phone soportan formatos de imagen
PNG y JPG, las imágenes PNG soportan transparencias, mientras que las
imágenes JPG son las típicas imáganes que se utilizan.

24. Al insertar un control Image, se puede insertar una imagen:
Cambiando la propiedad Source y aprentando el botón Agregar, se puede
seleccionar la imagen a agregar:

25. • Map: Muestra un mapa de Bing. Debes obtener una clave de Bing Maps para
tu aplicación. Se establece el tipo de mapa que se muestra mediante el uso de
la propiedad Mode, y controlas como se amplía el mapa mediante la
propiedad ZoomLevel.

26. Veremos este tipo de control con más profundidad más adelante.
• MediaElement: Se utiliza para reproducir audio y vídeo. El contenido se
establece con la propiedad Source.
Cambiando la propiedad Source, se agrega el archivo a reproducir, por ejemplo un
video.
7. Controles HTML
• WebBrowser: Muestra código HTML renderizado. Su contenido se establece
con la propiedad Source.

27. Cambiando la propiedad Source, se carga una página en este control:
Al iniciar depuración, vemos en el Emulador: