👉 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:
Vous montrer la structure du projet;
Intégrer les 3 UI principales conçues précédemment dans un
TabbedPage
;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 mail.
Commentaires