Implementing FlyoutNavigation in my Xamarin.Forms PCL project

Question

I have been searching everywhere on how to implement this IOS platform specific UI component (https://components.xamarin.com/view/flyoutnavigation) in my Xamarin.Forms PCL project, but I have not been able to understand how this would be possible.

I have come upon multiple "Buzz-Words" which I may be able to use, but I am still too new to fully understand what they mean and how I will be able to use them:

Custom Renderers: With this, I understand that one can customize components available in Xamarin.Forms and create export assemblies in order to "push" platform specific code through to these components from their respective platforms.
Dependency Injection: With this, I understand that one can create classes, and in the constructor method of those classes, pass through objects that will allow us to incorporate platform-specific code. (How? I have no idea...)
Xamarin.Forms DependencyService: With this, I understand that we can somehow integrate platform specific code from the shared code (from the portable library class)

Please, I have so many gaps in my knowledge and I am trying so very hard to understand, but I just can't wrap my head around it!

Thanks in advance for your help.

Xamarin has a pretty good introduction to Dependency-Injection and the Dependency-Service. Try to understand the example on this page. — martinstoeckli
Thanks, but how do I take that FlyoutNavigation component and integrate it into my project? I just don't see how it is possible? (I have read it before, but didn't fully understand it) — Daniel
I think what you are looking for is embedding of native views. Maybe I would 1) try to embed a native iOS control directly in Xamarin.Forms, then 2) try to use the FlyoutNavigation component in an Xamarin.Ios project, and finally 3) try to combine both. — martinstoeckli
Yes, but native embedding is designed only for Shared Projects? I don't know why fully, but the tutorial I was initially following suggested I use PCLs? Is there a way for me to change? — Daniel

Narendra Sharma Narendra Sharma · Accepted Answer · 2018-01-11T14:28:54

First of All create a xaml page with .cs and give the name as "MenuMasterPage" xaml code

<?xml version="1.0" encoding="UTF-8"?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="TestAppForms.Pages.MenuMasterPage">
 <MasterDetailPage.Master>
                <ContentPage Icon="hamburger_menu.png" Title="Daily Expense" BackgroundColor="#000000"> <!-- Menu Title background color -->
               <StackLayout VerticalOptions="FillAndExpand">
                  <ListView x:Name="MenuListView" ItemsSource="{Binding MainMenuItems}" ItemSelected="MainMenuItem_Selected" VerticalOptions="FillAndExpand" SeparatorVisibility="None" BackgroundColor="#f5f5f5"> <!-- Menu background color -->
                <ListView.ItemTemplate>
                <DataTemplate>
                            <ImageCell Text="{Binding Title}" ImageSource="{Binding Icon}" TextColor="Black"/>
                         </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </StackLayout>
            </ContentPage>
        </MasterDetailPage.Master>
 </MasterDetailPage>

MenuMasterPage.cs code

public partial class MenuMasterPage : MasterDetailPage  
    {
        public List<MainMenuItem> MainMenuItems { get; set; }
        public MenuMasterPage()
        {
            // Set the binding context to this code behind.
            BindingContext = this;

            // Build the Menu
            MainMenuItems = new List<MainMenuItem>()
        {
                new MainMenuItem() { Title = "Add Daily Expense", Icon = "menu_inbox.png", TargetType = typeof(Page1) },
                new MainMenuItem() { Title = "My Expenses", Icon = "menu_stock.png", TargetType = typeof(Page2) }
        };

            // Set the default page, this is the "home" page.
            Detail = new NavigationPage(new Page1());

            InitializeComponent();
        }
        // When a MenuItem is selected.
        public void MainMenuItem_Selected(object sender, SelectedItemChangedEventArgs e)
        {
            var item = e.SelectedItem as MainMenuItem;
            if (item != null)
            {
                if (item.Title.Equals("Add Daily"))
                {
                    Detail = new NavigationPage(new AddDailyExpensePage());
                }
                else if (item.Title.Equals("My Expenses"))
                {
                    Detail = new NavigationPage(new MyExpensesPage());
                }

                MenuListView.SelectedItem = null;
                IsPresented = false;
            }
        }
    }
 public class MainMenuItem
    {
        public string Title { get; set; }
        public Type TargetType { get; set; }
        public string Icon { get; set; }
    }

In your App.xaml.cs replace the code with this

public App()
        {
            InitializeComponent();
       {
                MainPage = new MenuMasterPage();
            }
            catch(Exception ex)
            {
                Console.WriteLine(ex.Message);
                }
        }

Implementing FlyoutNavigation in my Xamarin.Forms PCL project

2 Answers