Xamarin forms making simple menu

Issue

I have a menu on my Xamarin app, it is a simple circle which has 3 expendable objects.

Se here

What I want to do is:

1. to group them together with a Rectangle so it looks more like a flyout menu.
2. Add function to extend the menu items

Expected result: Here

I have tried to group menu items together through putting Grids inside my main grid, but did not recive expected output..

Here is my code for MenuView.xaml:

 <?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:models="clr-namespace:MenuApp.Models;assembly=MenuApp"
             xmlns:MenuApp="clr-namespace:MenuApp;assembly=MenuApp"
             x:Class="MenuApp.Views.MenuView">
  <ContentView.Content>
      <ScrollView>
          <StackLayout x:Name="menuLayout" >
                <ImageButton Source="{MenuApp:ImageResource MenuApp.Images.circle.png}" BackgroundColor="Transparent" x:Name="MainMenu"
                             Clicked="TapGestureRecognizer_OnTapped" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" 
                             Margin="10" WidthRequest="50" HeightRequest="50" ></ImageButton>
          </StackLayout>
        </ScrollView>
  </ContentView.Content>
</ContentView>

Code for MenuView.cs

  private void InitializeMenu()
    {
        LockLandScape();

        var children = new List<MenuItem>()
        {
            new MenuItem { Type = ButtonType.Home},
            new MenuItem { Type = ButtonType.Settings},
            new MenuItem { Type = ButtonType.Rotate},
        }; // get list from Settings.

       
    }

Any ideas are welcome! Thanks.

Solution

You could use MasterDetailPage to do that.

1.Create the item of the flyout menu:

 public class MenuItem
{
    public string Title { get; set; }
    public string Icon { get; set; }
    public Type TargetType { get; set; }
}

2.Add all the pages into a list: The MainPage, Page1, Page2, Page3 and Page4 are the contentpages which would show when you click the item in the msnu.

 public class MenuListData : List<MenuItem>
{
    public MenuListData()
    {
        this.Add(new MenuItem()
        {
            Title = "Home",
            Icon= "diamond_16px.png",
            TargetType = typeof(MainPage)
        });

        this.Add(new MenuItem()
        {
            Title = "Page1",
            Icon = "diamond_16px.png",
            TargetType = typeof(Page1)
        }) ;

        this.Add(new MenuItem()
        {
            Title = "Page2",
            Icon = "diamond_16px.png",
            TargetType = typeof(Page2)
        });
        this.Add(new MenuItem()
        {
            Title = "Page3",
            Icon = "diamond_16px.png",
            TargetType = typeof(Page3)
        });
        this.Add(new MenuItem()
        {
            Title = "Page4",
            Icon = "diamond_16px.png",
            TargetType = typeof(Page4)
        });
    }
}

3.Create the listview for the Menu:

public class MenuListView : ListView
{
    public MenuListView()
    {
        List<MenuItem> data = new MenuListData();

        ItemsSource = data;
        VerticalOptions = LayoutOptions.FillAndExpand;
        BackgroundColor = Color.Transparent;

        var cell = new DataTemplate(typeof(ImageCell));
        cell.SetBinding(ImageCell.TextProperty, "Title");
        cell.SetBinding(ImageCell.ImageSourceProperty, new Binding("Icon"));
        cell.SetValue(ImageCell.TextColorProperty, Color.White);

        SeparatorVisibility = SeparatorVisibility.Default;

        ItemTemplate = cell;

    }
}

4.Create the Menu page:

 public class MenuPage : ContentPage
{
    public ListView Menu { get; set; }

    public MenuPage()
    {
        Title = "Menu";
        BackgroundColor = Color.FromHex("FF8CB9");

        Menu = new MenuListView();

        var layout = new StackLayout
        {
            Spacing = 0,
            VerticalOptions = LayoutOptions.FillAndExpand,
            Padding = 5
        };

        layout.Children.Add(Menu);

        Content = layout;
    }
}

5.Create the RootPage as MasterDetailPage:

  public class RootPage : MasterDetailPage
{
    MenuPage menuPage;

    public RootPage()
    {
        menuPage = new MenuPage();

        menuPage.Menu.ItemSelected +=
            (sender, e) => NavigateTo(e.SelectedItem as MenuItem);

        Master = menuPage;

        Detail = new NavigationPage(new MainPage());

        MasterBehavior = MasterBehavior.Popover;
    }

    void NavigateTo(MenuItem menu)
    {
        if (menu == null)
            return;

        Page displayPage = null;

        switch (menu.TargetType.Name)
        {
            case "Page1":
            case "Page2":
            case "Page3":
            case "Page4":
            default:
                displayPage = (Page)Activator.CreateInstance(menu.TargetType);
                break;
        };

        try
        {
            Detail = new NavigationPage(displayPage);
        }
        catch (Exception ex)
        {
            App.Current.MainPage.DisplayAlert("ERRO", "Erro " + ex.Message, "OK");
        }

        menuPage.Menu.SelectedItem = null;
        IsPresented = false;
    }
}

OutPut:

Answered By - Wendy Zang - MSFT