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:

1. 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.

2. 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...)

3. 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.

Answer 1

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

Answer 2

Can you use the Forms MasterDetail page? https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/navigation/master-detail-page/