如何在Xamarin中设计滑出菜单

如何解决如何在Xamarin中设计滑出菜单

大家早上好我是xamarin.forms的新手，并且我正在使用Visual Studio 2017开发跨平台的移动苹果。

我创建了一个主详细信息页面，以便可以使用幻灯片导航菜单。

幻灯片导航有效，但我需要对其进行增强。

下面是我所做的事情的屏幕截图

下面是我的代码

<MasterDetailPage  xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               Title="first page"
         x:Class="HelloWorld.ContactPage" IsPresented="True">
<MasterDetailPage.Master>
    <ContentPage  Padding="0,20,0" Title="Contact">
        <Image Source="icon.png"/>
        <ListView   x:Name="ListView" ItemSelected="ListView_ItemSelected">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <!--<TextCell  Text="{Binding Name}" Detail="{Binding Status}"  />-->
               
                    <TextCell  Text="{Binding Name}" Detail="{Binding Status}"  />
                </DataTemplate>
            </ListView.ItemTemplate>

        </ListView>
    </ContentPage>
</MasterDetailPage.Master>

<MasterDetailPage.Detail>
    <ContentPage>
        <Image Source="icon.png"/>
    </ContentPage>
</MasterDetailPage.Detail>

  public partial class ContactPage : MasterDetailPage
{
    public ContactPage()
    {
        InitializeComponent();
        ListView.ItemsSource = new List<Contact>
        {
            new Contact{Name = "Home",ImageUrl = "http://lorempixel.com/1920/1080/sports/1"},new Contact{Name = "About",ImageUrl = "http://lorempixel.com/1920/1080/sports/2",Status = "feelgood"}
        };
    }

  //  async void ListView_ItemSelected(object sender,selecteditemchangedEventArgs e)
      void ListView_ItemSelected(object sender,selecteditemchangedEventArgs e)
    {

        var contact = e.SelectedItem as Contact;
        if (contact.Name == "Home")
        {
            Detail = new NavigationPage(new GreetPage());
        }
        else
        {
            Detail = new NavigationPage(new ContactDetailPage(contact));
        }
       
        IsPresented = false;

        // if (e.SelectedItem == null)
        //     return;
        // var contact = e.SelectedItem as Contact;
        //await Navigation.PushAsync(new ContactDetailPage(contact));
        // ListView.SelectedItem = null;
    }
}

下面是我预期的输出图像

Expected Image output

解决方法

实际上，您的问题不是直截了当的，但我应该能够回答。您需要塞东西才能完成任务。

创建模型
使用模板创建Masterdetail

创建幻灯片页面。删除所有随附的页面，例如MasterDetailPageMaster，MasterDetailPageDetail和MasterDetailPageMenuItem。之后，将“ MasterDetailPage”更改为MainPage。

     <MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
                  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                  x:Class="MobileHMO.MainPage"
                  xmlns:pages="clr-namespace:MobileHMO">
         <MasterDetailPage.Master>
             <ContentPage Title="Menu"
                      BackgroundColor="#e8e8e8">

                 <StackLayout Orientation="Vertical">

                     <StackLayout.Children >
                         <Label HorizontalTextAlignment="Center" Text="{Binding Header}" />

                         <Image HeightRequest="150" Source="{Binding Image}" Aspect="Fill" />

                         <Label HorizontalTextAlignment="Center" Text="{Binding Footer}" />
                     </StackLayout.Children>

                     <ListView x:Name="navigationDrawerList"
                       RowHeight="55"
                       SeparatorVisibility="Default"
                       BackgroundColor="#e8e8e8"
                       ItemSelected="OnMenuItemSelected">

                         <ListView.ItemTemplate>
                             <DataTemplate>
                                 <ViewCell>


                                     <StackLayout VerticalOptions="FillAndExpand"
                                  Orientation="Horizontal"
                                  Padding="20,10,10"
                                  Spacing="20">

                                         <Image Source="{Binding Icon}"
                              WidthRequest="40"
                              HeightRequest="40"
                              VerticalOptions="Start" />

                                         <Label Text="{Binding Title}"
                              FontSize="Small"
                              VerticalOptions="End"
                              TextColor="Black"/>
                                     </StackLayout>
                                 </ViewCell>
                             </DataTemplate>
                         </ListView.ItemTemplate>
                     </ListView>

                 </StackLayout>

             </ContentPage>
         </MasterDetailPage.Master>

         <MasterDetailPage.Detail>
             <NavigationPage>

             </NavigationPage>
         </MasterDetailPage.Detail>
     </MasterDetailPage>

公共局部类MainPage：MasterDetailPage { 私有列表menuList;

 public MainPage()
 {
     InitializeComponent();
     menuList = new List<MasterPageItem>();


     var page1 = new MasterPageItem() { Title = "Enrollee Profile",Icon = "enrollee.jpg",TargetType = typeof(view) };
     var page2 = new MasterPageItem() { Title = "Dependants",Icon = "dependant.jpg",TargetType = typeof(view2) };
     var page3 = new MasterPageItem() { Title = "Bill Limit",Icon = "bills.jpg",TargetType = typeof(view3) };
     };

     menuList.Add(page1);
     menuList.Add(page2);
     menuList.Add(page3);
     menuList.Add(page4);
     menuList.Add(page5);
     menuList.Add(page6);
     menuList.Add(page7);
     menuList.Add(page8);
     menuList.Add(page9);

     // Setting our list to be ItemSource for ListView in MainPage.xaml
     navigationDrawerList.ItemsSource = menuList;
     // Initial navigation,this can be used for our home page
     Detail = new NavigationPage((Page)Activator.CreateInstance(typeof(EnrolleeProfile)));
     this.BindingContext = new
     {
         Header = " Mobile",Image = "rina.png",//Footer = "         -------- Welcome   --------           "
         Footer = "Welcome "
     };
 }

}

如何在Xamarin中设计滑出菜单

如何解决如何在Xamarin中设计滑出菜单

解决方法

相关推荐