如何解决Xamarin 表单制作简单菜单
我的 Xamarin 应用程序上有一个菜单,它是一个简单的圆圈,其中包含 3 个消耗性对象。
我想做的是:
- 使用矩形将它们组合在一起,使其看起来更像是弹出式菜单。
- 添加扩展菜单项的功能
预期结果: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.
}
欢迎任何想法!谢谢。
解决方法
您可以使用 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",TargetType = typeof(Page2)
});
this.Add(new MenuItem()
{
Title = "Page3",TargetType = typeof(Page3)
});
this.Add(new MenuItem()
{
Title = "Page4",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;
}
}
输出:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。