Aplicaciones Móviles Multiplataforma Layouts

Laboratorio: Funciones y Procedimientos en C#

COMPETENCIAS

1. Comprender paradigmas de la programación orientada a objetos

2. Escribir funciones y procedimientos en lenguaje de programación C#
3. Declarar clases e instanciar objetos en Visual Studio con C#

EQUIPOS, MATERIALES, PROGRAMAS Y RECURSOS

● PC Personal.
● Sistema operativo Windows 7.
● Material disponible desde Tecsup Virtual.
● Software Visual Studio 2017

SEGURIDAD

● Colocar las mochilas en el gabinete al final del salón para evitar caídas en caso de sismo.
● No ingresar con bebidas ni comidas.
● Apagar los equipos y los monitores al culminar la sesión.

INTRODUCCIÓN

Existen diferentes lenguajes de programación orientado a objetos para escribir funciones y

procedimientos pero el C# se acomoda a la necesidad del curso, porque nos va permitir realizar
aplicaciones multiplataforma en móviles con XAMARIN y VISUAL STUDIO 2017

PREPARACIÓN

El alumno debe revisar previamente el material del curso en Tecsup Virtual y revisar su texto.

REVISION DEL CASO PRÁCTICO

1. Crear proyecto de Visual Studio de tipo Xamarin.Forms de Nombre Ejercicio02

Departamento de TdG Pág. 2

Aplicaciones Móviles Multiplataforma Layouts

Departamento de TdG Pág. 3

Aplicaciones Móviles Multiplataforma Layouts

2. Seleccionar una aplicación en blanco.

Departamento de TdG Pág. 4

Aplicaciones Móviles Multiplataforma Layouts

Main Page
1. Vamos a empezar a crear un menú usando algunos botones dentro de un stacklayout

2. Una vez que tenemos el diseño del formulario vamos agregar las páginas de contenido
que usaremos en el proyecto.

a. Page1
b. Page2
c. TabbedPage1
d. CarouselPage1
e. ModalPage1

Ejemplo:

Departamento de TdG Pág. 5

Aplicaciones Móviles Multiplataforma Layouts

3. Una vez que hemos agregado todas las páginas de contenido, vamos a modificar el
código C# de la página MainPage.xaml

a. Crear llamadas a cada una de las páginas.

Departamento de TdG Pág. 6

Aplicaciones Móviles Multiplataforma Layouts

b. Como puedes ver todas las llamadas son la palabra reservada Navigation, para poder
usar ese tipo de llamadas se debe modificar el archivo de inicio App.xaml de la siguiente manera.

Hierarchical Navigation
4. En el paso 2. se agregó las páginas de contenido Page1.xaml y Page2.xaml, lo que
haremos será hacer una navegación desde la página 1 hasta la página 2.

a. Modificar la página Page1.xaml

b. Modificar la página Page1.xaml.cs

Departamento de TdG Pág. 7

Aplicaciones Móviles Multiplataforma Layouts

c. Modificar la página Page2.xaml

d. Modificar la página Page2.xaml.cs

Departamento de TdG Pág. 8

Aplicaciones Móviles Multiplataforma Layouts

TabbedPage
5. Modificaremos el archivo TabbedPage1.xaml, tener en cuenta que en la línea 2 del código
tiene TabbedPage en lugar de ContentPage.

6. Ahora vamos a modificar el archivo TabbedPage1.xaml.cs que lo único que hará es volver
al menú principal, tener en cuenta que la página debe heredar a TabbedPage

Departamento de TdG Pág. 9

Aplicaciones Móviles Multiplataforma Layouts

CarouselPage
7. Modificaremos el archivo TaCarouselPage1.xaml, tener en cuenta que en la línea 2 del
código tiene CarouselPage en lugar de ContentPage.

8. Ahora vamos a modificar el archivo CarouselPage1.xaml.cs que lo único que hará es

volver al menú principal, tener en cuenta que la página debe heredar a CarouselPage

Departamento de TdG Pág. 10

Aplicaciones Móviles Multiplataforma Layouts

ModalPage
9. Modificaremos el archivo ModalPage1.xaml , colocando un botón para regresar al menú
principal.

10. Modificaremos el archivo ModalPage1.xaml.cs , colocando el código para cerrar la

ventana actual.

Departamento de TdG Pág. 11

Aplicaciones Móviles Multiplataforma Layouts

PROBAR Y RESULTADOS.
11. Ahora ejecutamos el programa y verificamos el emulador.
a. La primera ventana en levantarse es el menú y podemos ver todos los botones que
llamarán a las diferentes opciones.

Departamento de TdG Pág. 12

Aplicaciones Móviles Multiplataforma Layouts

b. Navigation y Tabb

Departamento de TdG Pág. 13

Aplicaciones Móviles Multiplataforma Layouts

c. Carousel

Departamento de TdG Pág. 14

Aplicaciones Móviles Multiplataforma Layouts

d. Modal y Popup

Desarrollo:
Link al git:

https://github.com/ariana2021/Laboratorio04.git

Departamento de TdG Pág. 15

Aplicaciones Móviles Multiplataforma Layouts

Departamento de TdG Pág. 16

Aplicaciones Móviles Multiplataforma Layouts

Departamento de TdG Pág. 17

Aplicaciones Móviles Multiplataforma Layouts

Departamento de TdG Pág. 18

Aplicaciones Móviles Multiplataforma Layouts

Departamento de TdG Pág. 19