Xamarin表单制作简单菜单

Question

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

Se here

我想做的是：

用一个矩形将它们组合在一起，这样它看起来更像一个弹出菜单。
添加扩展菜单项的功能

预期结果：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.Create 弹出菜单项：

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

2.Add所有的页面都在一个列表中：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.Create 菜单的列表视图：

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

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

输出：

Xamarin表单制作简单菜单

Xamarin forms making simple menu

javascript

menuitem

visual-studio

xamarin

asp.net-core