Xamarin.Forms TabbedPage

Objectifs

Connaitre la classe Xamarin.Forms TabbedPage

Utilisation d’une page à onglets

Les sujets suivants sont abordés dans cet article.

• Qu’est-ce qu’une page à onglets?
• Utilisations d’une page à onglets.
• Exemple pratique d’une page à onglets

Introduction

• La classe TabbedPage permet de représenter deux ou plusieurs pages dans un tableau d’onglets affiché en bas de l’écran (iOS) ou en haut de l’écran (Android).
• La TabbedPage consiste en une liste de différents onglets contenant des informations.
• Nous avons de l’expérience avec des onglets dans différentes applications, comme Play Store, Music App Facebook, Instagram, etc., qui contient différents onglets et nous pouvons naviguer d’un onglet à l’autre en un simple clic.
• Le Xamarin.Forms TabbedPage se compose d’une liste des onglets et une plus grande zone de détails, chaque onglet du chargement du contenu dans la zone de détails.

Utilisations d’une TabbedPage (page à onglets)

• Accéder à plusieurs pages par une seule page
• La navigation entre les pages devient plus facile
• Plus d’informations sont affichées sur une page.
• Facile à utiliser
• L’une des applications de pages à onglets les plus utilisées est « Instagram ».

Créer la TabbedPage (page à onglets):

• Ici, j’utilise Visual Studio 2017 pour Windows OS avec la charge de travail Xamarin installée dedans. Maintenant, nous allons faire une application de page à onglets. Suivez simplement les étapes suivantes.
• La première page ajoutée à une Page de navigation est appelée la page racine de l’application.
• Pour créer une page racine , suivez les étapes suivantes:
1. Dans Visual Studio, cliquez sur Créer un nouveau projet…



2. Dans la boîte de dialogue Nouveau projet, cliquez sur Cross-Platform, sélectionnez le modèle Application mobile (Xamarin.Forms), définissez le Nom Les_TabbedPage, choisissez l’emplacement du projet et cliquez sur le bouton OK :



3. Dans la boîte de dialogue Nouvelle application Cross-Platform, cliquez sur Application vide,choisissez Android ,iOS et UWP comme plate forme de développement,Xamarin.Forms pour le IU Technologie, sélectionnez .NET Standard comme stratégie de partage de code, et cliquez sur le bouton OK :



Une page à onglet est une page parente qui contient plusieurs pages. Vous pouvez ajouter des pages enfants de deux manières.

• En ajoutant l’onglet de la page de contenu dans votre page à onglets parent. Vous pouvez coder plusieurs pages de contenu dans votre page parent.
• Utilisez la référence d’une autre page en tant qu’enfant d’une page à onglets.

4. Ouvrez votre fichier MainPage.XAML pour construire la TabbedPage en la remplissant avec une collection de la page Contenu que nous avons créée ci-dessous.

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

5. Changez le fichier MainPage.XAML.CS comme suit


Maintenant

6. Maintenant, faites un clic droit sur votre projet portable -> Ajouter -> Nouvel élément.



7. Ensuite, allez à Multi-plateforme -> ContentPage Xaml (le renommer) -> cliquez sur Ajouter.
8. Ajoutez le contenue suivant à votre nouvelle page 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="Les_TabbedPage.Page1"
             Title="Le contentPage" Icon="content.png">
    <ContentPage.Content>
        <StackLayout Padding="10,5,5,5">
            <Label Text="Définition"
                VerticalTextAlignment="Start"
                FontSize="Large"
                TextColor="#184757"
                Font="bold, 20"></Label>
            <Label FontSize="Medium" Text="Le ContentPage est l'élément racine , 
                   qui est la classe dérivée de CodePlusXamlPage.
                   Cette balise commence par deux déclarations d'espace 
                   de noms XML, les deux étant des URL.."></Label>
            <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
                <Image Aspect="AspectFit" Source="ContentPage.png"
                   WidthRequest="256" HeightRequest="256" >
                </Image>
            </StackLayout>
          </StackLayout>
    </ContentPage.Content>
</ContentPage>

9. N’oubliez pas d’enregistrer les icônes et les images
10. Ce code ajoutera une autre page de contenu avec un titre ,icone et contenue.
11. Maintenant il nous reste qu’appeler la nouvelle page dans le premier onglet

Tutoriels recommandés

Les types de pages Xamarin.Forms

Xamarin.Forms ContentPage

Xamarin.Forms MasterDetailPage

Xamarin.Forms NavigationPage

Xamarin.Forms TabbedPage

Xamarin.Forms TemplatedPage

Xamarin.Forms CarouselPage

Découvrez comment procéder