• laurent@lioncoding.com

WhatsApp UI dans Xamarin.Forms (Partie 5 & Fin)


👉 https://github.com/egbakou/WhatsAppUI le lien vers le projet complet sur Github.

Dans cette dernière partie de la série d’articles “Concevoir les UI de WhatsApp dans Xamarin.Forms” il sera question de:

  • [x] Vous montrer la structure du projet;

  • [x] Intégrer les 3 UI principales conçues précédemment dans un TabbedPage;

  • [x] Définir la page de CHATS comme page par défaut au lancement de l’application.

Structure du projet

Notre MainView

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage
    x:Class="WhatsApp.Views.MainView"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:views="clr-namespace:WhatsApp.Views"
    Title="WhatsApp">

    <TabbedPage.Padding>
        <OnPlatform x:TypeArguments="Thickness" iOS="0, 20, 0, 0" />
    </TabbedPage.Padding>
    <TabbedPage.ToolbarItems>
        <ToolbarItem Icon="search.png" />
        <ToolbarItem Icon="menu.png" />
    </TabbedPage.ToolbarItems>

    <views:Camera />
    <views:ChatsView BackgroundColor="Transparent" />
    <views:StatusView BackgroundColor="Transparent" />
    <views:CallsView />

</TabbedPage>

Mettons le focus sur ChatsView

Le code behind de MainView:

using Plugin.Media;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace WhatsApp.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class MainView : TabbedPage
    {
        public MainView ()
        {
            InitializeComponent ();
            MoveToChatsPage();
        }

        private void MoveToChatsPage()
        {
            var pages = Children.GetEnumerator();
            // Camrera View
            pages.MoveNext();
            // ChatsView
            pages.MoveNext();
            CurrentPage = pages.Current;
        }  
    }
}

Ressources

👉 https://github.com/egbakou/WhatsAppUI le lien vers le projet complet sur Github.

N’hésitez pas à me contacter via le formulaire de contact ou par ou par mail.


Commentaires