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

下面是我预期的输出图像

预期图像输出

标签： xamarinxamarin.forms

解决方案

其实你的问题不是直截了当，但我应该能够回答。你需要处理事情来完成任务。

创建模型
使用模板创建 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,0,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 中设计滑出式菜单

问题描述

解决方案

推荐阅读