Componente Flyout Navigation Xamarin ES

//Español



Hola chavoz, hoy voy a enseñarles como crear un menu simple usando el componenete Flyot, asi que bueno empecemos con la PROGRAMACION =D,

• Primeramente abramos nuestro Xamarin

• Ahora creemos una nueva solución, Nombrenla como ustedes deseen, para este ejemplo la nombre FlyoutComponent y elijan iOS->iPhone->Single View Application

• Ahora doble click en Components

• Como pueden ver, una vez que hayan hecho eso una nueva pestaña les aparecerá, Yo ya uso este componente pero para encontrarlo click en Get More Components

• Cuando hayan apretado el botón una nueva ventana aparecerá, esta nueva ventana es la ventana de los componentes para todas las opciones: Android, iOS, Windows Phone. En esta ventana van a poder encontrar buenas opciones que aplicar a sus aplicaciones, pero no todas son gratis

• Ahora en la opcion de búsqueda, escriban "Flyout" y el componente aparecerá

• Click en el componente y aparecerán todas las características del componente, para instalarlo, solo denle click en Add to App

• Ahora verán en la carpeta de Componentes un nuevo elemento, eso significa que el componente esta listo para usarse

• Ahora a usarlos, los pueden usar desde código o instanciando componentes, nosotros usaremos las dos; den click derecho en en nombre de su aplicación->Añadir->Nuevo archivo

• Click en iOS->iPhone View Controller y nombrenlo como ustedes deseen, yo lo nombrare Controller 1

• Creare otros 2 elementos controller

• Ahora editare los View Controllers como lo siguiente

Controller 1	Controller 2	Controller 3

• Ahora que ya tenemos las interfaces, cinculemos los objetos con sus respectivas variables, para el Controller 1 es un boton, para el Controller 2 es un Image view y para el Controller 3 es un Text Field y un botón

Controller 1
Controller 2
Controller 3

• Ahora ya que estan las interfaces, empecemos a programarlas para hacerlas trabajar, para esto necesitamos ubicar los archivos designer.cs, para esto click en los archivos .cs

• En estos archivos vas a encontrar las variables (los objetos vinculados), asi que ahora agreguemos el siguiente código a su respectivo Controller

Controller 1
Bueno antes de empezar la programacion del boton, importemos una nueva referencia using MonoTouch.UIKit; Ahora programemos el botón: partial void btnClick1 (MonoTouch.Foundation.NSObject sender){ new UIAlertView("You Have Clicked me!!!", "Please share this post to your friends", null, "ok", null).Show(); }
Controller 2
Para este controlador, necesitaremos una imagen, para añadirla click derecho en el nombre de la aplicación->Añadir->Añadir archivos... Ahora escojan la imagen que quieran, cuando la hayan elegido van a ver el siguiente mensaje, yo decidi copiar la imagen Ahora programemos el Image view, pero solo por esta vez lo haremos en el Controller2.cs en la función ViewDidLoad y agreguemos el siguiente código: imgController2.Image = UIImage.FromFile ("Logo2.0.png");
Controller 3
Ahora como en el primer controlador agreguemos la primer referencia: using MonoTouch.UIKit; Ahora para el botón, añadan el siguiente código: partial void btnClick (MonoTouch.Foundation.NSObject sender){ new UIAlertView("You Have Clicked me!!!", txtField1.Text , null, "ok", null).Show(); }

Ahora programemos el Flyout Component, hagan esto en el archivo FlyoutComponentViewController.cs y añadan las siguientes referencias:

using FlyoutNavigation;
using MonoTouch.Dialog;

Ahora para añadir la referencia MonoTouch.Dialog necesitamos añadir la referencia al proyecto, asi que den le click derecho en Referencias->Editar Referencias y elijan la referencia MonoTouch.Dialog-1

y en la función ViewDidLoad añadan el siguiente código:

var LateralBar = new FlyoutNavigationController {
NavigationRoot = new RootElement("Menu"){
new Section("Seccion 1"){
new StringElement("Header"),
new StringElement("Controller 1"),
new StringElement("Controller 2"),
},
new Section("Seccion 2"){
new StringElement("Controller 3"),
},
},
ViewControllers = new [] {
new UIViewController{View=new UILabel{
Text = "This is the header"
}},
new Controller1(),
new Controller2(),
new Controller3(),
}
};

LateralBar.ToggleMenu();
View.AddSubview (LateralBar.View);

Ahora una vez que hayan hecho todo solo queda correrlo y ver el resultado

Bueno Chavoz eso es todo por ahora, espero les haya servido y pues estare subiendo un poco de cosas mas de Xamarin, ya que lo considero un potente framework para desarrollo de móviles y pues cualquier duda o comentario dejenlo en la zona correspondiente, adiós ^_^/

Y bueno les dejo mi proyecto en GitHub, solo hagan click aquí para verlo