Xamarin / MAUI



            // Point d'entrée de l'application

            MainPage = new NavigationPage(new AnimalListView());

    // La classe d'accès aux données sur les animaux

            // Génération de fausse données

            await Task.Delay(1000);

using Xamarin.Forms;

    // Le modèle Animal avec ses 3 propriétés et accesseurs

        <StackLayout Spacing="30" VerticalOptions="CenterAndExpand">

            <!--  Les infos de l'animal  -->

                FontAttributes="Bold"

                FontSize="25"

                Text="{Binding Animal.AnimalID, StringFormat='Animal n° {0}'}"

                TextColor="DarkCyan" />

            <Label

                FontAttributes="Italic"

                FontSize="20"

                HorizontalOptions="CenterAndExpand"

                Text="{Binding Animal.Elevage, StringFormat='Elevage: {0}'}"

                TextColor="DarkGray" />

            <!--

                L'enchainement &#..; permet d'avoir une chaine de code éxecutable

                dans une chaine de caractère, ici cela permet de créer un retour à la ligne

            -->

            <Label

                FontSize="18"

                HorizontalOptions="CenterAndExpand"

                HorizontalTextAlignment="Center"

                Text="{Binding Animal.DateTraitement, StringFormat='Date du dernier traitement:
 {0:ddd dd MMMM yyyy}'}"

                TextColor="Black" />

using BindableLayoutSample.Model;

using BindableLayoutSample.ViewModel;

        public AnimalDetailsView(Animal animal)

            BindingContext = new AnimalDetailsViewModel(animal);

    xmlns:xe="clr-namespace:XamEffects;assembly=XamEffects"

    Title="BindableLayout Sample App">

        <Grid>

            <StackLayout

                Padding="60,10"

                VerticalOptions="CenterAndExpand">

                <StackLayout>

                    <Label

                        FontSize="Medium"

                        HorizontalTextAlignment="Center"

                        Text="Animal list" />

                    <!--  Une border view de XamEffects est plus sympa qu'un bouton par défault  -->

                    <xe:BorderView

                        xe:Commands.Tap="{Binding LoadAnimalsCommand}"

                        xe:TouchEffect.Color="LightBlue"

                        BackgroundColor="#4b6da6"

                        CornerRadius="20"

                        HorizontalOptions="Center">

                        <Label

                            Margin="15,10"

                            FontAttributes="Bold"

                            Text="Load animals"

                            TextColor="White" />

                    </xe:BorderView>

                </StackLayout>

                <!--  La Frame est visible seulement si les animaux ont été chargés  -->

                <Frame

                    Padding="0,10,0,0"

                    BackgroundColor="Transparent"

                    BorderColor="#4b6da6"

                    CornerRadius="20"

                    HasShadow="False"

                    IsVisible="{Binding IsLoadedAnimals}">

                    <StackLayout Spacing="0">

                        <Grid ColumnDefinitions="*,2*">

                            <Label

                                Grid.Row="0"

                                Grid.Column="0"

                                FontAttributes="Bold"

                                HorizontalOptions="CenterAndExpand"

                                Text="ID"

                                TextColor="DarkCyan"

                                VerticalOptions="CenterAndExpand" />

                            <Label

                                Grid.Row="0"

                                Grid.Column="1"

                                FontSize="Medium"

                                HorizontalOptions="CenterAndExpand"

                                Text="Elevage"

                                TextColor="DarkGray" />

                        </Grid>

                        <BoxView

                            Margin="0,10,0,0"

                            HeightRequest="1"

                            HorizontalOptions="FillAndExpand"

                            Color="#4b6da6" />

                        <!--

                            On utilise une scroll view au cas ou beaucoup d'animaux sont chargés

                            On assure qu'ils soient tous accessible si la taille de la liste venait

                            à dépasser la taille de l'écran

                        -->

                        <ScrollView>

                            <StackLayout Padding="0,5" BindableLayout.ItemsSource="{Binding AnimalList}">

                                <!--

                                    On entre dans une itération sur BindableLayout.ItemSource donc AnimalList

                                -->

                                <BindableLayout.ItemTemplate>

                                    <!--

                                        Dans le dataTemplate, le BindingContext est lié à l'AnimalItemViewModel

                                        de l'itération

                                    -->

                                    <DataTemplate>

                                        <!--

                                            Lors du "tap", on utilise la commande de navigation définie

                                            dans AnimalItemViewModel

                                        -->

                                        <Grid

                                            Padding="5"

                                            xe:Commands.Tap="{Binding NavigateToAnimalCommand}"

                                            xe:TouchEffect.Color="#4b6da6"

                                            ColumnDefinitions="*,2*"

                                            RowDefinitions="Auto, Auto"

                                            RowSpacing="0">

                                            <!--

                                                Les infos qu'on cherche se trouve dans l'objet Animal de

                                                AnimalItemViewModel

                                            -->

                                            <Label

                                                Grid.Row="0"

                                                Grid.Column="0"

                                                FontAttributes="Bold"

                                                HorizontalOptions="CenterAndExpand"

                                                Text="{Binding Animal.AnimalID}"

                                                TextColor="DarkCyan"

                                                VerticalOptions="CenterAndExpand" />

                                            <Label

                                                Grid.Row="0"

                                                Grid.Column="1"

                                                FontSize="Medium"

                                                HorizontalOptions="CenterAndExpand"

                                                Text="{Binding Animal.Elevage}"

                                                TextColor="DarkGray" />

                                        </Grid>

                                    </DataTemplate>

                                </BindableLayout.ItemTemplate>

                            </StackLayout>

                        </ScrollView>

                    </StackLayout>

                </Frame>

            </StackLayout>

            <!--  Indicateur de travail en cours  -->

            <Grid Grid.RowSpan="1" IsVisible="{Binding IsBusy}">

                <BoxView BackgroundColor="White" Opacity="0.4" />

                <ActivityIndicator

                    HorizontalOptions="Center"

                    IsRunning="True"

                    Color="Green" />

            </Grid>

        </Grid>

using BindableLayoutSample.Model;

using BindableLayoutSample.ViewModel.Base;

    // Le ViewModel de la page d'information sur chaque animal

    // Instancié avec un objet de type Animal passé en argument

    public class AnimalDetailsViewModel : ViewModelBase

        private Animal animal;

        public Animal Animal

        {

            get => animal;

            set => SetProperty(ref animal, value);

        }

        public AnimalDetailsViewModel(Animal _animal)

        {

            Animal = _animal;

        }

using BindableLayoutSample.Model;

using BindableLayoutSample.View;

using BindableLayoutSample.ViewModel.Base;

using System.Threading.Tasks;

using System.Windows.Input;

using Xamarin.Forms;

    public class AnimalItemViewModel : ViewModelBase

        private Animal animal;

        // Les infos de l'animal

        public Animal Animal

        {

            get => animal;

            set => SetProperty(ref animal, value);

        }

        // La commande de navigation est asynchrone,

        // Pour ne pas bloquer le Thread principal en charge de l'affichage

        // pendant l'instanciation de la nouvelle Page

        private async Task NavigateToAnimalDetails()

        {

            // Petite attente pour rendre la transition plus fluide

            await Task.Delay(150);

            // L'utilisation de la navigation page nous permet d'avoir une navigation verticale (push & pop)

            await Application.Current.MainPage.Navigation.PushAsync(new AnimalDetailsView(Animal));

        }

        public ICommand NavigateToAnimalCommand { private set; get; }

        public AnimalItemViewModel(Animal _animal)

        {

            Animal = _animal;

            NavigateToAnimalCommand = new Command(async () => await NavigateToAnimalDetails());

        }

using BindableLayoutSample.DAO;

using BindableLayoutSample.Model;

using BindableLayoutSample.ViewModel.Base;

using System.Collections.ObjectModel;

using System.Threading.Tasks;

using System.Windows.Input;

using Xamarin.Forms;

    // Le ViewModel de la page d'affichage de la liste d'animaux

    public class AnimalListViewModel : ViewModelBase

        #region Attributes

        private bool isBusy;

        private bool isLoadedAnimals;

        #endregion

        #region Properties

        // Indicateur de travail en cours

        public bool IsBusy

        {

            get => isBusy;

            set => SetProperty(ref isBusy, value);

        }

        // Indicateur sur l'état de chargement des données animaux

        public bool IsLoadedAnimals

        {

            get => isLoadedAnimals;

            set => SetProperty(ref isLoadedAnimals, value);

        }

        // La liste d'animaux qui sera alimentée avec les données récupérées par la DAO

        // L'objet ObservableCollection implémente directement INPC

        public ObservableCollection<AnimalItemViewModel> AnimalList { get; set; }

        #endregion

        #region Commands

        // La commande de chargement des données animaux

        // Asynchrone pour ne pas bloquer le thread principal

        // et donc pour ne pas bloquer l'affichage

        private async Task LoadAnimalCommand()

        {

            IsBusy = true;

            IsLoadedAnimals = false;

            AnimalList.Clear();

            AnimalDAO dao = new AnimalDAO();

            List<Animal> result = await dao.GetAllAnimals();

            // On alimente la liste observée par la view (AnimalList)

            foreach (Animal _animal in result)

            {

                AnimalItemViewModel toAddItem = new AnimalItemViewModel(_animal);

                AnimalList.Add(toAddItem);

            }

            IsLoadedAnimals = true;

            IsBusy = false;

        }

        public ICommand LoadAnimalsCommand { private set; get; }

        #endregion 

        // CTOR

        public AnimalListViewModel()

        {

            // Il important d'initialiser les listes d'un ViewModel pour éviter

            // les NullPointerExceptions

            AnimalList = new ObservableCollection<AnimalItemViewModel>();

            LoadAnimalsCommand = new Command(async () => await LoadAnimalCommand());

        }

using System.ComponentModel;

using System.Runtime.CompilerServices;

namespace BindableLayoutSample.ViewModel.Base

{

    public class ViewModelBase : INotifyPropertyChanged

    {

        // Propriété de notification de changement

        public event PropertyChangedEventHandler PropertyChanged;

        // Procédure de changement de valeur

        // Déclenche la fonction de notification

        protected bool SetProperty<T>(ref T storage, T value, [CallerMemberName] string propertyname = null)

        {

            if (Equals(storage, value))

            {

                return false;

            }

            storage = value;

            OnPropertyChanged(propertyname);

            return true;

        }

        // Fonction de notification 

        // Déclenche l'évènement de changement de valeur

        // Avec en argument le nom de la propriété qui a changé

        protected void OnPropertyChanged(string propertyName)

        {

            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

        }

        public ViewModelBase()

        {

        }

    }

}