汉堡包菜单Xamarin表单（MasterDetailPage）

我对使用Xamarin已经足够陌生了，在我的Xamarin表单项目中，我创建了一个母版详细信息页面，并在ListView中表示我想要放置标题和图标的菜单，对于图标图像，我必须在所有设备项目中插入每个图标

我还有一个小问题，当我点击菜单项并导航到所选的详细信息页面时，汉堡菜单消失了

MainPageMaster.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XXX"
             Title="Master">
  <StackLayout>
    <ListView x:Name="MenuItemsListView"
              SeparatorVisibility="None"
              HasUnevenRows="true"
              ItemsSource="{Binding MenuItems}">
      <ListView.Header>
        <Grid BackgroundColor="#03A9F4">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="6"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="6"/>
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
            <RowDefinition Height="15"/>
            <RowDefinition Height="30"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="10"/>
          </Grid.RowDefinitions>
          <Label
              Grid.Column="1"
              Grid.Row="1"
              Text="B1 Term"
              HorizontalTextAlignment="Center"
              Style="{DynamicResource SubtitleStyle}"/>
        </Grid>
      </ListView.Header>
      <ListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
              <StackLayout VerticalOptions="FillAndExpand"
                             Orientation="Horizontal"
                             Padding="20,10,0,10"
                             Spacing="20">
                            <Image Source="{Binding Icon}"
                         WidthRequest="40"
                         HeightRequest="40"
                         VerticalOptions="Center" />
                            <Label Text="{Binding Title}"
                         FontSize="Medium"
                         VerticalOptions="Center"
                         TextColor="Black"/>
            </StackLayout>
          </ViewCell>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>
  </StackLayout>
</ContentPage>

文件.cs

[XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class MainPageMaster : ContentPage
    {
        public ListView ListView;

        public MainPageMaster()
        {
            InitializeComponent();

            BindingContext = new MainPageMasterViewModel();
            ListView = MenuItemsListView;
        }

        class MainPageMasterViewModel : INotifyPropertyChanged
        {
            public ObservableCollection<MainPageMenuItem> MenuItems { get; set; }

            public MainPageMasterViewModel()
            {
                MenuItems = new ObservableCollection<MainPageMenuItem>(new[]
                {
                    new MainPageMenuItem { Id = 0, Icon="ic_menu_home.png",Title = "Home", TargetType = typeof(MainPageDetail) },
                    new MainPageMenuItem { Id = 1, Title = "Elenco Clienti", TargetType = typeof(ElencoClientiPage) },
                    new MainPageMenuItem { Id = 2, Title = "Logout", TargetType = typeof(LogOut) }
                });
            }

            #region INotifyPropertyChanged Implementation
            public event PropertyChangedEventHandler PropertyChanged;
            void OnPropertyChanged([CallerMemberName] string propertyName = "")
            {
                if (PropertyChanged == null)
                    return;

                PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
            }
            #endregion
        }
    }

[XamlCompilation（XamlCompilationOptions.Compile）]
公共部分类MainPageMaster:ContentPage
{
公共列表视图列表视图；
公共主页面主机（）
{
初始化组件（）；
BindingContext=新的MainPageMasterViewModel（）；
ListView=MenuItemsListView；
}
类MainPageMasterViewModel:INotifyPropertyChanged
{
公共ObservableCollection菜单项{get；set；}
公共MainPageMasterViewModel（）
{
MenuItems=新的ObservableCollection（新[]
{
新的MainPageMenuItem{Id=0，Icon=“ic_menu_home.png”，Title=“home”，TargetType=typeof（MainPageDetail）}，
新建MainPageMenuItem{Id=1，Title=“Elenco Clienti”，TargetType=typeof（ElencoClientPage）}，
新建MainPageMenuItem{Id=2，Title=“注销”，TargetType=typeof（注销）}
});
}
#区域INotifyPropertyChanged实现
公共事件属性更改事件处理程序属性更改；
void OnPropertyChanged（[CallerMemberName]字符串propertyName=”“）
{
if（PropertyChanged==null）
返回；
调用（这是新的PropertyChangedEventArgs（propertyName））；
}
#端区
}
}

屏幕

在此图像中，我的图标不可见，但我在Android project中添加了一个图像

创建母版详细信息页：

添加内容页并更改代码，如下所示：

RootPage.xaml

<?xml version="1.0" encoding="utf-8"?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms" 
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:local="clr-namespace: your_NameSpace"
              x:Class="your_NameSpace.RootPage">
</MasterDetailPage>

<?xml version="1.0" encoding="utf-8" ?>
<resources>
<style name="MyTheme" parent="MyTheme.Base">
</style>

<style name="DrawerArrowStyle" 
parent="@style/Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
 <item name="color">#FFFFFF</item>
</style>

<style name="MyTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="colorPrimary">#003399</item>
<item name="colorPrimaryDark">#003399</item>
<item name="colorControlHighlight">#003399</item>
<item name="colorAccent">#012348</item>
<item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>

</resources>

• 创建其菜单页：

添加另一个内容页并更改代码，如下所示：

MenuPage.xaml（实际汉堡菜单的设计）

• 其模型类别：

这是绑定菜单页面的按钮单击命令的位置

MenuPageViewModel.cs

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class RootPage : MasterDetailPage
{
    public RootPage()
    {                        
        InitializeComponent();
    }
}

 [XamlCompilation(XamlCompilationOptions.Compile)]
public partial class MenuPage : ContentPage
{
    public MenuPage()
    {
        BindingContext = new MenuPageViewModel();
        this.Icon = "yourHamburgerIcon.png"; //only neeeded for ios
        InitializeComponent();
    }
}

 public class MenuPageViewModel
{
    public ICommand GoHomeCommand { get; set; }
    public ICommand GoSecondCommand { get; set; }
    public ICommand GoThirdCommand { get; set; }
    public MenuPageViewModel()
    {
        GoHomeCommand = new Command(GoHome);
        GoSecondCommand = new Command(GoSecond);
        GoThirdCommand = new Command(GoThird);
    }

    void GoHome(object obj)
    {
        App.NavigationPage.Navigation.PopToRootAsync();
        App.MenuIsPresented = false;
    }

    void GoSecond(object obj)
    {
        App.NavigationPage.Navigation.PushAsync(new Home()); //the content page you wanna load on this click event 
        App.MenuIsPresented = false;
    }

    void GoThird(object obj)
    {
        App.NavigationPage.Navigation.PushAsync(new ClinicInformation());
        App.MenuIsPresented = false;
    }
}

• 在应用程序类中添加以下属性通常，应用程序类的名称为App.xaml和App.xaml.cs

将以下内容添加到App.xaml.cs：

    public static NavigationPage NavigationPage { get; private set; }
    public static RootPage RootPage;
    public static bool MenuIsPresented
    {
        get
        {
            return RootPage.IsPresented;
        }
        set
        {
            RootPage.IsPresented = value;
        }
    }

这里RootPage是母版详细信息页面的静态实例， NavigationPage是您为更改详细信息页而更改的详细信息页， IsMenuPresentend是比true保持菜单打开和false关闭菜单打开时的布尔值

• 完成所有这些之后，在应用程序类中添加此函数，并在App.Xaml.cs的构造函数中调用它

   private void CallMain()
   {
      var menuPage = new MenuPage();
      NavigationPage = new NavigationPage(new Home());
      RootPage = new RootPage();
      RootPage.Master = menuPage;
      RootPage.Detail = NavigationPage;
      MainPage = RootPage;
   }
  

• 在Android项目中添加以下主题：

values/styles.xml

<?xml version="1.0" encoding="utf-8"?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms" 
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:local="clr-namespace: your_NameSpace"
              x:Class="your_NameSpace.RootPage">
</MasterDetailPage>

<?xml version="1.0" encoding="utf-8" ?>
<resources>
<style name="MyTheme" parent="MyTheme.Base">
</style>

<style name="DrawerArrowStyle" 
parent="@style/Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
 <item name="color">#FFFFFF</item>
</style>

<style name="MyTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="colorPrimary">#003399</item>
<item name="colorPrimaryDark">#003399</item>
<item name="colorControlHighlight">#003399</item>
<item name="colorAccent">#012348</item>
<item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>

</resources>

真的
#FFFFFF
真的
假的
#003399
#003399
#003399
#012348
@样式/抽屉箭头样式

• 创建名为values-v21的文件夹，添加名为styles.XML的XML，并向其中添加以下代码：

   <?xml version="1.0" encoding="utf-8" ?>
   <resources>
   <style name="MyTheme" parent="MyTheme.Base">
   <item name="android:windowContentTransitions">true</item>
   <item name="android:windowAllowEnterTransitionOverlap">true</item>
   <item name="android:textAllCaps">false</item>
   <item name="android:windowAllowReturnTransitionOverlap">true</item>
   <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
   <item name="android:windowSharedElementExitTransition">@android:transition/move</item>
   </style>
   </resources>
  

  
  真的
  真的
  假的
  真的
  @android：过渡/移动
  @android：过渡/移动
  

并在所有Android活动中使用myTheme作为应用程序主题

如果您有任何疑问，请随意评论，您的汉堡菜单已经完成

祝你好运

---

愉快的编码。

您也可以尝试此功能以获取详细信息

---

要在Android和iOS应用程序中显示Humberger菜单图标，您可以使用

Title=”☰"特殊字符。这将正确显示菜单图标

<MasterDetailPage.Master>  
    <ContentPage Title = "☰" BackgroundColor="Red">  
        <StackLayout BackgroundColor = "#B2EC5D" >
            < ListView x:Name="navigationDrawerList">                   
            </ListView>  
        </StackLayout>  
    </ContentPage>  
</MasterDetailPage.Master> 



你能展示一下你的代码和当前实现的一些错误截图吗？我已经修改了我的回答，也添加了你的主页代码。问题是你看不到标题旁边菜单中的图标给我一些时间，我会上传我的代码。你可以自己检查一下