web-dev-qa-db-fra.com

Comment puis-je créer un menu tiroir / curseur avec Xamarin.Forms?

Comment créer un menu curseur à l'aide de Xamarin.Forms? Est-ce cuit ou quelque chose de personnalisé?

xamarinxamarin.forms
30
Jamey McElveen

Vous créez une nouvelle classe qui contient toutes les définitions à la fois du maître - c'est-à-dire men - et du détail - c'est-à-dire principal page. Je sais, ça sonne à l'envers, mais par exemple ..

using System;
using Xamarin.Forms;

namespace testXamForms
 {
   public class HomePage : MasterDetailPage
   {
   public HomePage()
   {
     // Set up the Master, i.e. the Menu

     Label header = new Label
     {
       Text = "MENU",
       Font = Font.BoldSystemFontOfSize(20),
       HorizontalOptions = LayoutOptions.Center
     };
    // create an array of the Page names
     string[] myPageNames = {
       “Main”,
       “Page 2”,
       “Page 3”,
     };

     // Create ListView for the Master page.
     ListView listView = new ListView
     {
       ItemsSource = myPageNames,
     };

     // The Master page is actually the Menu page for us
    this.Master = new ContentPage
     {
       Title = "The Title is required.",
       Content = new StackLayout
       {
         Children = 
         {
           header, 
           listView
         },
       }
     };

     // Define a selected handler for the ListView contained in the Master (ie Menu) Page.

     listView.ItemSelected += (sender, args) =>
     {
       // Set the BindingContext of the detail page.
       this.Detail.BindingContext = args.SelectedItem;
        Console.WriteLine("The args.SelectedItem is
       {0}",args.SelectedItem);


     // This is where you would put your “go to one of the selected pages” 

       // Show the detail page.
       this.IsPresented = false;
     };
    // Set up the Detail, i.e the Home or Main page.
     Label myHomeHeader = new Label
     {
       Text = "Home Page",
       HorizontalOptions = LayoutOptions.Center
     };

     string[] homePageItems = { “Alpha”, “Beta”, “Gamma” };
     ListView myHomeView = new ListView {
       ItemsSource = homePageItems,
     };

     var myHomePage = new ContentPage();
     myHomePage.Content = new StackLayout
     {
       Children = 
       {
         myHomeHeader, 
         myHomeView
       } ,
     };
     this.Detail = myHomePage;
   }  
   }
 }
31
Phil Ryan

Il est intégré dans: MasterDetailPage. Vous devez définir ses propriétés Detail et Master sur les types de pages que vous souhaitez. J'ai trouvé Hansleman.Forms très instructif.

16
joe

Mon exemple minimum (tel que publié ici ) est le suivant:

public class App
{
    static MasterDetailPage MDPage;

    public static Page GetMainPage()
    {
        return MDPage = new MasterDetailPage {
            Master = new ContentPage {
                Title = "Master",
                BackgroundColor = Color.Silver,
                Icon = Device.OS == TargetPlatform.iOS ? "menu.png" : null,
                Content = new StackLayout {
                    Padding = new Thickness(5, 50),
                    Children = { Link("A"), Link("B"), Link("C") }
                },
            },
            Detail = new NavigationPage(new ContentPage {
                Title = "A",
                Content = new Label { Text = "A" }
            }),
        };
    }

    static Button Link(string name)
    {
        var button = new Button {
            Text = name,
            BackgroundColor = Color.FromRgb(0.9, 0.9, 0.9)
        };
        button.Clicked += delegate {
            MDPage.Detail = new NavigationPage(new ContentPage {
                Title = name,
                Content = new Label { Text = name }
            });
            MDPage.IsPresented = false;
        };
        return button;
    }
}

Un exemple de solution est hébergé sur GitHub .

Sur iOS le résultat ressemble à ceci (gauche: menu ouvert, droite: après avoir cliqué sur "B"):

Notez que vous devez ajouter l'icône de menu en tant que ressource dans votre projet iOS.

13
Falko

Si vous cherchez un exemple simple de MasterDetailPage veuillez consulter mon exemple de dépôt à GitHub . Un très bel exemple est également présenté ici

5
Tomasz Kowalczyk

Slideoverkit est un excellent plugin disponible pour Xamarin Forms. Il y a un github pour voir des échantillons gratuits et vous pouvez trouver de la documentation à ce sujet ici .

2
Nicolas Bodin-Ripert