Geekly articles weekly

Xamarin.Forms Shell

Fin mai, Microsoft a publié la version Xamarin.Forms Shell - un shell visant à simplifier la création d'applications mobiles multiplateformes et comprenant les fonctionnalités suivantes: menu latéral, onglets, navigation, recherche.

Commençons par créer un projet Xamarin.Forms vide dans Visual Studio 2019. Veuillez noter que pour le moment, Shell ne prend officiellement en charge que 2 plateformes: iOS et Android, UWP est toujours en cours de développement. Je recommande de mettre à jour immédiatement tous les packages nuget de la solution.



Ensuite, nous allons créer la classe dérivée du shell AppShell, pour ce faire, ajoutez le fichier XAML au projet général avec le contenu suivant:

AppShell.xaml

<?xml version="1.0" encoding="utf-8" ?> <Shell xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="HelloShell.AppShell"> </Shell>

AppShell.xaml.cs

 namespace HelloShell { [XamlCompilation(XamlCompilationOptions.Compile)] public partial class AppShell : Shell { public AppShell() { InitializeComponent(); } } }

puis dans le fichier App.xaml.cs nous indiquons que AppShell agira comme MainPage:

 public App() { InitializeComponent(); //MainPage = new MainPage(); MainPage = new AppShell(); }

et quelques pages ContentPage: Page1 et Page2. En outre, les images seront utilisées dans notre application de test, nous les ajouterons donc aux projets dépendants de la plate-forme, pour les androïdes dans le dossier ressources => dessinable et pour ios dans le dossier Ressources.



Menu latéral




Le menu latéral (souvent appelé menu hamburger) est un menu contextuel qui peut être appelé en appuyant sur un bouton ou avec un geste spécial et comprend un en-tête (en-tête), une liste de pages (éléments déroulants) et un menu (menu déroulant)

AppShell.xaml

 <?xml version="1.0" encoding="utf-8" ?> <Shell xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:pages="clr-namespace:HelloShell" x:Class="HelloShell.AppShell"> <Shell.FlyoutHeader> <StackLayout BackgroundColor="White" Padding="10"> <Image HeightRequest="100" Source="xamarin.png" /> <Label Text="Header" /> <Label Text=" !"/> </StackLayout> </Shell.FlyoutHeader> <FlyoutItem Title="MainPage" Icon="xamarin.png"> <ShellContent ContentTemplate="{DataTemplate pages:MainPage}"/> </FlyoutItem> <FlyoutItem Title="Page1" Icon="xamarin.png"> <ShellContent ContentTemplate="{DataTemplate pages:Page1}"/> </FlyoutItem> <FlyoutItem Title="Page2" Icon="xamarin.png"> <ShellContent ContentTemplate="{DataTemplate pages:Page2}"/> </FlyoutItem> <MenuItem Clicked="MenuItem_Clicked" Text="" IconImageSource="item.png" /> </Shell>

AppShell.xaml.cs

 namespace HelloShell { [XamlCompilation(XamlCompilationOptions.Compile)] public partial class AppShell : Shell { public AppShell() { InitializeComponent(); } private async void MenuItem_Clicked(object sender, System.EventArgs e) { await DisplayAlert(""," !","OK"); } } }

Onglets




Xamarin.Forms Shell en tant que modèle racine peut prendre en charge les onglets inférieur et supérieur, ainsi que leur combinaison:

AppShell.xaml.cs

 <?xml version="1.0" encoding="utf-8" ?> <Shell xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:pages="clr-namespace:HelloShell" x:Class="HelloShell.AppShell"> <TabBar> <Tab Title="MainPage" Icon="xamarin.png"> <ShellContent ContentTemplate="{DataTemplate pages:MainPage}" /> </Tab> <Tab Title="Page1" Icon="xamarin.png"> <ShellContent Title="Main Page" Icon="xamarin.png" ContentTemplate="{DataTemplate pages:MainPage}" /> <ShellContent Title="Page2" Icon="xamarin.png" ContentTemplate="{DataTemplate pages:Page2}" /> </Tab> <Tab IsEnabled="False" Title="Page2" Icon="xamarin.png"> <ShellContent ContentTemplate="{DataTemplate pages:Page2}" /> </Tab> </TabBar> </Shell>

Comme vous pouvez le voir, c'est assez simple. Un autre avantage est le chargement efficace des pages, qui vous permet d'initialiser la page uniquement lorsque l'utilisateur y accède, ce qui accélère considérablement le lancement de l'application.

La navigation


Xamarin.Forms offre une navigation améliorée basée sur l'URI, vous permettant d'accéder à n'importe quelle page de l'application sans suivre une hiérarchie stricte et de revenir en arrière sans avoir à parcourir toutes les pages de la pile de navigation. Pour que la navigation fonctionne, la page doit être enregistrée, vous pouvez le faire dans le balisage XAML dans FlyoutItem, Tab et ShellContent à l'aide de la propriété Route

 <Shell ...> <FlyoutItem ... Route="page1"> <Tab ... Route="page2"> <ShellContent ... Route="mainpage" /> <ShellContent ... Route="page3" /> </Tab> <ShellContent ... Route="page4" /> <ShellContent ... Route="page5" /> </FlyoutItem> <ShellContent ... Route="about" /> ... </Shell>

ou en code

 Routing.RegisterRoute("page1", typeof(Page1));

la navigation s'effectue à l'aide de la commande

 await Shell.Current.GoToAsync("//page2");

Par exemple, nous apportons des modifications aux fichiers suivants:

AppShell.xaml

  <TabBar> <Tab Route="main" Title="MainPage" Icon="xamarin.png"> <ShellContent ContentTemplate="{DataTemplate pages:MainPage}" /> </Tab> <Tab Title="Page1" Icon="xamarin.png"> <ShellContent Title="Main Page" Icon="xamarin.png" ContentTemplate="{DataTemplate pages:MainPage}" /> <ShellContent Route="page2" Title="Page2" Icon="xamarin.png" ContentTemplate="{DataTemplate pages:Page2}" /> </Tab> <Tab IsEnabled="False" Title="Page2" Icon="xamarin.png"> <ShellContent ContentTemplate="{DataTemplate pages:Page2}" /> </Tab> </TabBar>

MainPage.xaml
  <StackLayout VerticalOptions="CenterAndExpand"> <Button Text="Page2" Clicked="ToPage2" /> </StackLayout>

MainPage.xaml.cs
  public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); } private async void ToPage2(object sender, EventArgs e) { await Shell.Current.GoToAsync("//page2"); } }

Page2.xaml

  <ContentPage.Content> <StackLayout VerticalOptions="CenterAndExpand"> <Button Text="" Clicked="Back" /> </StackLayout> </ContentPage.Content>

Page2.xaml.cs

  public partial class Page2 : ContentPage { public Page2() { InitializeComponent(); } private async void Back(object sender, EventArgs e) { await Shell.Current.GoToAsync("//main"); } }

Chercher


Xamarin.Forms Shell possède des fonctions de recherche intégrées fournies par la classe SearchHandler. Pour ajouter une fonction de recherche à la page, nous allons créer une classe PetSearchHandler dérivée de SearchHandler et remplacer les méthodes OnQueryChanged et OnItemSelected. La méthode OnQueryChanged est déclenchée lorsqu'un utilisateur entre du texte dans le champ de recherche et prend deux arguments: oldValue et newValue, qui contiennent respectivement les requêtes de recherche précédente et nouvelle.

La méthode SelectedItem est exécutée lorsque l'utilisateur sélectionne le résultat de la recherche et prend un objet, dans ce cas Animal, comme paramètre.

Par exemple, créez un modèle animal

Modèles / Animal.cs

  public class Animal { public string Name { get; set; } public string ImageUrl { get; set; } }

Classe PetData qui contiendra une collection de nos chats et chiens préférés

Data / PetData.cs

  public static class PetData { public static IList<Animal> Pets { get; private set; } static PetData() { Pets = new List<Animal>(); Pets.Add(new Animal { Name = "Afghan Hound", ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/6/69/Afghane.jpg" }); Pets.Add(new Animal { Name = "Alpine Dachsbracke", ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Alpejski_gończy_krótkonożny_g99.jpg/320px-Alpejski_gończy_krótkonożny_g99.jpg" }); Pets.Add(new Animal { Name = "American Bulldog", ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/5/5e/American_Bulldog_600.jpg" }); Pets.Add(new Animal { Name = "Abyssinian", ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Gustav_chocolate.jpg/168px-Gustav_chocolate.jpg" }); Pets.Add(new Animal { Name = "Arabian Mau", ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/d/d3/Bex_Arabian_Mau.jpg" }); Pets.Add(new Animal { Name = "Bengal", ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Paintedcats_Red_Star_standing.jpg/187px-Paintedcats_Red_Star_standing.jpg" }); Pets.Add(new Animal { Name = "Burmese", ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/0/04/Blissandlucky11.jpg" }); Pets.Add(new Animal { Name = "Cyprus", ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/CyprusShorthair.jpg/320px-CyprusShorthair.jpg" }); Pets.Add(new Animal { Name = "German Rex", ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/c/c7/German_rex_harry_%28cropped%29.jpg" }); } }

PetSearchHandler.cs

  public class PetSearchHandler : SearchHandler { protected override void OnQueryChanged(string oldValue, string newValue) { base.OnQueryChanged(oldValue, newValue); if (string.IsNullOrWhiteSpace(newValue)) { ItemsSource = null; } else { ItemsSource = PetData.Pets .Where(pet => pet.Name.ToLower().Contains(newValue.ToLower())) .ToList<Animal>(); } } protected override async void OnItemSelected(object item) { base.OnItemSelected(item); var pet = item as Animal; if (pet is null) return; await App.Current.MainPage.DisplayAlert(" ",pet.Name,"ok"); } }

Ajouter une page d'animaux de compagnie où nous configurons notre PetSearchHandler

 <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" ... x:Class="HelloShell.Pets"> <Shell.SearchHandler> <controls:PetSearchHandler Placeholder="Enter search term" ShowsResults="true" DisplayMemberName="Name" /> </Shell.SearchHandler> <ContentPage.Content>

En conséquence, nous devrions obtenir une page avec un champ de recherche dans la barre de navigation, lorsque vous entrez une expression de recherche, une simple liste de noms d'animaux s'affiche.



Si vous le souhaitez, nous pouvons facilement personnaliser le contenu de la cellule de liste en y ajoutant une image et plusieurs étiquettes de texte:

  <Shell.SearchHandler> <controls:PetSearchHandler Placeholder="Enter search term" ShowsResults="true"> <controls:PetSearchHandler.ItemTemplate> <DataTemplate> <StackLayout Padding="10" Orientation="Horizontal"> <Image Source="{Binding ImageUrl}" Aspect="AspectFill" HeightRequest="40" WidthRequest="40" /> <Label Text="{Binding Name}" FontAttributes="Bold" /> </StackLayout> </DataTemplate> </controls:PetSearchHandler.ItemTemplate> </controls:PetSearchHandler> </Shell.SearchHandler>



Sources sur github

Source: https://habr.com/ru/post/fr470309/

More articles:


All Articles