Flyout Navigation Component Xamarin EN

//English

Hi Guys, today I'm going to show you hot to create a simple menu using the Flyout component, well let's start CODING =D:

• First of All we need to open our Xamarin

• Then Create a new Solution, Name it as you want, for this example I'm going to name it: FlyoutComponent and choose iOS->iPhone->Single View Application

• Now double click on Components

• As you can see, once you have done this a new tab will appear, I've already use this component but to find it click on Get More Components

• Once you have clicked a new window will appear, this is a window for components for all the mobile options: Andriod, iOS and Windows Phone. In this window you can find good options to apply to your apps but not all are free.

• Now In the option to Search Components, type "Flyout" and the component will appear

• Click on the component and the Window will display all the characteristics of this component. To install it just click on Add to App.

• Now you will si the the Components Folder a new item, this means that now FlyoutComponenet is ready for use it

• Now let's use it, you can use this Component programmatically or with links, we are going to use both; right click on your application name->Add->New File

• Click on iOS->iPhone View Controller and name it, I'm going to call it Controller1, but you can name as you want.

• I'm going to add another 2 controller

• Now, I'm going to edit this View Controllers, as following:

Controller 1	Controller 2	Controller 3

• Now once we have the 3 interfaces, let's link the objects to their variables, for the Controller 1 we need to link the Button, for the Controller 2 we need to link the Image view and for the Controller 3 we need to link the Text Field and the Button

Controller 1
Controller 2
Controller 3

• Now once we have the interfaces let's start to coding, to make the controllers works, we need code the objects, to do that click on each Controller.cs to display the file designer.cs

• In these files you will find all the variables(the objects linked), so now add the following code to their respective Controller

Controller 1
Well before to start coding the button, let's import a new reference: using MonoTouch.UIKit; Now let's coding the button: 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
For this controller, we need a image, to add a new image just right click on your app name->Add->Add Files... And choose the the picture that you want, when you have choose your photo you will see a message like this, I've decided to copy the file Now let's start to coding the Image View, just in this case we are going to code in the Controller2.cs in the function ViewDidLoad and add the following code: imgController2.Image = UIImage.FromFile ("Logo2.0.png");
Controller 3
Now as in the first controller 1 let's add the same reference: using MonoTouch.UIKit; Now for the button, just add the following code: partial void btnClick (MonoTouch.Foundation.NSObject sender){             new UIAlertView("You Have Clicked me!!!", txtField1.Text                             , null, "ok", null).Show(); }

Now let's codify the Flyout Component, to do this go to the file FlyoutComponentViewController.cs and add the following reference:

using FlyoutNavigation;
using MonoTouch.Dialog;

To add the reference MonoTouch.Dialog we ned to add the reference to the project, just right click on References->Edit References and the choose the reference MonoTouch.Dialog-1

And on the function ViewDidLoad and add the following code:

            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);

Now once we have done this just click on run and see the result:

Well chavoz, that's it for today, I hope this will help you a little bit, I'm going to add some things for Xamarin, because I thinks this is a powerful framework, so if you have some questions or comments, please leave them on the respective section, see you ^_^/

And If you want to see my project, just click here to see it on GitHub