Tutorial de Aplicaciones para Windows Phone 7.1 Controles

3,938 views
3,718 views

Published on

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

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,938
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Tutorial de Aplicaciones para Windows Phone 7.1 Controles

  1. 1. Tutorial: Controles de Windows PhoneMSP: Carola VelazquezPuedes 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.isoVisita el blog: http://mspcarojujuy.wordpress.com/
  2. 2. Controles de Windows PhoneExisten controles que podemos incluir en aplicaciones de Windows Phone dependiendo de loque 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ón2. Controles de Agrupación y Distribución3. Controles de texto4. Botones y controles de Selección5. Controles de Lista6. Imagen, mapa, y controles de medios7. Controles HTMLVeamos cada uno en más detalle1. Controles de Navegación:Las aplicaciones para Windows Phone se basan en un modelo de página en la que sepuede navegar a través de diferentes contenidos.Las páginas contienen controles de distribución, que a su vez contienen controlesadicionales. Los cuales son:• PhoneApplicationFrame: Es el control principal de la aplicación para WindowsPhone. Este control admite la navegación a través de páginas.• PhoneApplicationPage: Encapsula el contenido que se puede navegar por elPhoneApplicationFrame.Por defecto, al crear un nuevo proyecto “Aplicación de Windows Phone” se genera unPhoneApplicationPage, con unos controles por defecto.
  3. 3. 2. Controles de Agrupación y Distribución:Son contenedores de otros controles y objetos visuales, se utilizan para colocar losobjetos contenidos en la pantalla. Un control de distribución sirve como la raíz dediseño de la aplicación dentro de una página. Puedes utilizar los controles adicionalesde distribución según sea necesario. Los cuales son:• Grid: Proporciona una superficie compuesta de filas y columnas para mostrarelementos hijos. Por defecto, un proyecto “Aplicación de Windows Phone” posee unGrid 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. 4. Al presionar el botón agregar, se agregan tantas columnas como se desea, para cadauna se puede establecer el ancho (Width), se indica por defecto “*”, lo cual se ajusta alde acuerdo al tamaño total de la tabla, mientras que Min y Max Width indican lostamaños minimos y máximos que la columna puede tomar.Mientras que para agregar filas al Grid o Tabla, se utiliza la propiedad RowDefinitionDe igual manera que para las columnas, al cambiar esta propiedad se pueden agregarfilas, presionando el botón agregar, las propiedades para las filas son similares quepara las columnas:
  5. 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 colocarotros controles, de manera que el Grid se puede utilizar como control raíz a partir delque se estructura la página de la aplicación que se realiza.• StackPanel: Proporciona una superficie para mostrar elementos secundarios en unalínea, ya sea horizontal o verticalmente.
  6. 6. Al arrastrar el control al Design View se inserta el control, y el código XAMLcorrespondiente.• ScrollViewer: Proporciona una superficie de desplazamiento para mostrar un elementohijo.Al insertar el ScrollViewer, se agrega el código correspondiente XAML. También sepuede cambiar sus propiedades.
  7. 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 sehabrá agregado el código XAML que corresponde al borde:Pueden cambiarse las propiedades del borde, realizando cambios en PropiertiesWindow, 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ódigoXAML.
  8. 8. Puedes cambiar el tamaño haciendo click sostenido, los valores que se visualizan en laspropiedades Height y Width, tanto en el código XAML como en la ventana depropiedades 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 – transparente2 – opaco3 – degradado4 – imagenPara cambiar el color debes seleccionar “opaco” y luego el color, como se muestra:
  9. 9. • Canvas: Proporciona una superficie para mostrar elementos hijos encoordenadas 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 serdeslizada de lado a lado.Para crear un control Panorama, debes Agregar un nuevo elemento:
  10. 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 haciala derecha o izquierda• Pivot: Proporciona una forma rápida de administrar las vistas de grandes conjuntosde datos dentro de una aplicación. El control se puede utilizar como una interfaz denavegación para el filtrado de grandes conjuntos o cambiar entre las vistas.Para agregar un control Pivot, debes agregar un nuevo elemento:
  11. 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 elcontenido en la pantalla.
  12. 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 cuentecon toda la información que el usuario desea en el momento oportuno, así si queremosmostrar un pantallazo de lo que ofrece la aplicación, es conveniente utilizar un controlPanorama, que carga sólo un contenido reducido de lo que brinda la aplicación, en cambio desi 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ónmuestre 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. Elcontenido se establece con la propiedad Text.Arrastra el control al Design View y se inserta el TextBlock y el código XAMLcorrespondente:
  13. 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. 14. El proyecto muestra dos TextBlock por defecto:Como práctica cambie el nombre de su aplicación en ambos TextBlock, recuerdacambiar la propiedad Text.• TextBox: Se utiliza para las entradas de textos cortos. También se pueden utilizarpara la introducción de texto de varias líneas. El contenido se establece con lapropiedad Text.
  15. 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 yluego “Iniciar Depuración”. Al hacer click dentro del TextBox, aparece el tecladopara hacer el ingreso de texto:Ingresa un texto en el TextBox:Aquí podemos ver que TextBox permite ingresar texto, mientras que TextBlockpermite colocar información estática.
  16. 16. • PasswordBox: Enmascara el texto que un usuario introduce. El contenido seestablece con la propiedad Password y se enmascara con la propiedadPasswordChar.Al agregar el control PasswordBox, se agrega el código, nota que se visualiza la típicapetició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 seenmascara:
  17. 17. 4. Botones y controles de SelecciónLos botones son:• Button: Un control que responde a la entrada del usuario y dispara un eventoClick. 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. 18. Los botones son controles que admiten eventos, como Click, MouseOver (cuando sepasa por encima del botón el cursor del mouse) entre otros.• HyperlinkButton: Representa un control de botón que muestra unhipervínculo, es decir, un enlace a una página web. Cuando haces click, elHyperlinkButton permite a los usuarios moverse a una página web en la mismaaplicación web o a una página web externa. Su contenido se establece con lapropiedad Content y el URL a navegar se establece con la propiedadNavigateUri.Inserta este control y cambia la propiedad Content al valor “Ver”, y lapropiedad 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. 19. Los controles de selección son:• CheckBox: Representa un control que puedes activar o desactivar. La casilla deverificación ofrece opcionalmente un estado indeterminado. Su contenido seestablece con la propiedad Content. Se puede elegir una o varias casillas almismo tiempo.Inserta varios controles CheckBox:Nota que cada CheckBox tiene asociada una etiqueta, puede cambiarse con lapropiedad Content.
  20. 20. • RadioButton: Permite seleccionar una única opción de una lista. Cuando losbotones de radio se agrupan son mutuamente excluyentes. Su contenido seestablece con la propiedad Content.Agrega un control RadioButton• Slider: Representa un control que te permite seleccionar entre una gama devalores a lo largo de una pista. La propiedad Value determina la posición en lapista.
  21. 21. Al cambiar la propiedad value:5. Controles de Lista• ListBox: Muestra una lista de elementos que puedes seleccionar haciendo clicen él. Su contenido se establece con las propiedades Items o ItemsSource. Laapariencia de cada elemento puede ser personalizada utilizando unDataTemplate.
  22. 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. 23. Finalmente se han agregado tres ítems a la lista, estos ítems pueden ser otroscontroles.6. Imagen, mapa, y controles de medios• Image: Muestra una imagen. El contenido se establece con la propiedadSource. Las aplicaciones de Windows Phone soportan formatos de imagenPNG y JPG, las imágenes PNG soportan transparencias, mientras que lasimágenes JPG son las típicas imáganes que se utilizan.
  24. 24. Al insertar un control Image, se puede insertar una imagen:Cambiando la propiedad Source y aprentando el botón Agregar, se puedeseleccionar la imagen a agregar:
  25. 25. • Map: Muestra un mapa de Bing. Debes obtener una clave de Bing Maps paratu aplicación. Se establece el tipo de mapa que se muestra mediante el uso dela propiedad Mode, y controlas como se amplía el mapa mediante lapropiedad ZoomLevel.
  26. 26. Veremos este tipo de control con más profundidad más adelante.• MediaElement: Se utiliza para reproducir audio y vídeo. El contenido seestablece con la propiedad Source.Cambiando la propiedad Source, se agrega el archivo a reproducir, por ejemplo unvideo.7. Controles HTML• WebBrowser: Muestra código HTML renderizado. Su contenido se establececon la propiedad Source.
  27. 27. Cambiando la propiedad Source, se carga una página en este control:Al iniciar depuración, vemos en el Emulador:

×