Xamarin 表单制作简单菜单

Question

我的 Xamarin 应用程序上有一个菜单，它是一个包含 3 个消耗性对象的简单圆圈。

Se here

我想做的是：

1. 将它们与一个矩形组合在一起，使其看起来更像一个弹出菜单。
2. 添加扩展菜单项的功能

预期结果：Here

我试图通过将网格放在我的主网格中来将菜单项组合在一起，但没有收到预期的输出..

这是我的 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>

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.

       
    }

欢迎任何想法！谢谢。

Answer 1

您可以使用MasterDetailPage 来执行此操作。

1.创建弹出菜单项：

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

2.将所有页面添加到列表中：MainPage，Page1，Page2，Page3和Page4是当您单击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.为菜单创建列表视图：

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.创建菜单页面：

 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.将RootPage创建为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;
    }
}

输出：