PDF de programación - Introducción a la Interfaz de usuario de Windows Phone 8 - guía lab04

UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES


PDM115



Guía de Laboratorio N°04C

Ciclo I-2014

“Introducción a la Interfaz de usuario de Windows Phone 8”

Objetivos:

Que el estudiante:

Aprenda la declaración e implementación de los controles básicos en la programación de Windows
Phone haciendo uso de formularios para realizar el diseño de la interfaz y el uso de C# para definir
el manejo de estos.

Incorpore nuevos controles de forma intuitiva siguiendo la lógica de controles de similar
comportamiento.

Descripción:

Esta práctica consistirá en crear un programa que contendrá una serie de formularios que
mostraran el uso de cada uno de los controles básicos de Windows Phone (Checkbox,TextBox,
Slider, Button) con su respectiva interfaz de usuario (usando XAML). Cada formulario será llamado
por medio de un formulario adicional que usaremos como Menú basado en el componente
LongListSelector



UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES


PDM115



Ciclo I-2014

Contenido
Creación del proyecto. ........................................................................................................................ 1

Menú (Formulario principal) ............................................................................................................... 5

ListView(capa de presentación o vista) ........................................................................................... 5

LongListSelector (Aplicación o controlador) ................................................................................. 10

Creación de los formularios (opciones ). ........................................................................................... 18

Primera opción del menú (Button + MessageBox) ........................................................................... 21

Button + MessageBox (presentación o vista) ................................................................................ 26

Button + MessageBox (Aplicación o controlador) ......................................................................... 27

Segunda opción del menú (Button + TextBlock) ............................................................................... 30

Button + TextBlock (presentación o vista) .................................................................................... 30

Button + TextBlock (Aplicación o controlador) ............................................................................. 31

Tercera opción del menú (TextBox) .................................................................................................. 33

TextBox (capa de presentación o vista) ........................................................................................ 33

TextBox (Aplicación o controlador) ............................................................................................... 34

Cuarta opción del menú (CheckBox) ................................................................................................. 36

CheckBox (presentación o vista) ................................................................................................... 36

CheckBox (Aplicación o controlador) ............................................................................................ 37

Quinta opción del menú(RadioButton) ............................................................................................. 39

RadioButton(presentación o vista) ............................................................................................... 39

RadioButton(Aplicación o controlador) ........................................................................................ 40

Sexta opción del menú (Slider) ......................................................................................................... 42

Slider (presentación o vista) .......................................................................................................... 42

Slider (controlador) ....................................................................................................................... 44

Séptima opción del menú (Pivot). ..................................................................................................... 47

Pivot (presentación o vista) ........................................................................................................... 47

Pivot (controlador) ........................................................................................................................ 48



UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES


PDM115



Ciclo I-2014



Creación del proyecto.
Iniciamos Visual Estudio Express 2012 y seleccionamos un nuevo proyecto tal como se muestra en
la imagen.



1

UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES


PDM115



En la siguiente ventana seleccionaremos “Windows Phone Pivot App” , digitaremos el nombre
del proyecto y la dirección donde lo guardaremos y daremos Click en el botón ok. El nombre del
proyecto será el número de su carnet.

Ciclo I-2014



Y luego seleccionaremos “Windows Phone OS 8.0” y presionamos click en “OK”.



2

UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES


PDM115



Con lo que aparecerá la siguiente pantalla

Ciclo I-2014

Esta aplicación se basa en dos ítems de pivotes(first y second) cada uno posee un stackpanel que
es alimentado por dos listas el first es alimentado por lineone y linetwo de la clase
MainViewModelSampleDates(en la carpeta SampleData) y el ítem second por lineone y
linethree de la misma clase.



3

UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES


PDM115



El programa puede ser ejecutado ahora pero los datos en tiempo de ejecución son sustituidos por
otra lista que se encuentra en la carpeta ViewModels, clase MainViewModels.

Ciclo I-2014

La ejecución aparecerá así:



4

UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES


PDM115



Menú (Formulario principal)

ListView(capa de presentación o vista)


Ciclo I-2014

Resumen del procedimiento: Teniendo como base un selector de paginas(pivoteApp), sustituir
código en dos items del pivote, la primera el menú y la segunda: pagina informativa.

Procedimiento:

Buscaremos en el programa “MainPage.xaml” el comentario que dice “Pivot item one”de color
verde y seleccionaremos el código que está debajo de l desde (<phone:PivotItem Header=”first”>)
hasta (</phone:PivotItem>) como a continuación se muestra.



5

UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES


PDM115



Lo sustituiremos por este código.

Ciclo I-2014

<!--Pivot item one-->
<phone:PivotItem x:Name="pivotItem" Header="Controles"
RenderTransformOrigin="0.5,0.5">
<phone:PivotItem.RenderTransform>
<CompositeTransform/>
</phone:PivotItem.RenderTransform>
<phone:LongListSelector x:Name="listaControles" Margin="0,0,-12,0"
ItemsSource="{Binding Items}"

SelectionChanged="listaControles_SelectionChanged"
LayoutMode="Grid"
GridCellSize="220,150"
RenderTransformOrigin="0.5,0.5"
>
<phone:LongListSelector.RenderTransform>
<CompositeTransform/>
</phone:LongListSelector.RenderTransform>
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,10,17" Background="Red" >
<TextBlock Text="{Binding LineaUno}"
TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding LineaDos}"
TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource
PhoneTextSubtleStyle}" FontSize="24"/>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</phone:PivotItem>



Dentro del código anterior del Layout (MainPage.xaml )hemos cambiado algunas propiedades de
la lista (LongListSelector) pero las más importantes son dos: SelectionChanged, que servirá para
definir el método de selección de opciones, por el cual será referenciado en el
programa(MainPage.xaml.sc) y la propiedad LayoutMode con valor Grid para desplegar en forma
de filas y columnas el menú y no en forma de lista como estaba.

Además hemos sustituido los parámetros de llenado de la lista en el stackpanel de LineOne por
LineUno y LineTwo por Lineados.



6

UNIVERSIDAD DE EL SALVAD