Découvrez comment utiliser la LazyView du .NET MAUI Community Toolkit pour différer le chargement des vues et optimiser les performances de votre application.
Introduction
Dans le développement d'applications modernes, il est essentiel de gérer efficacement les ressources pour offrir une expérience utilisateur réactive et fluide. Le contrôle LazyView, proposé par le .NET MAUI Community Toolkit, permet de différer le chargement de certaines vues jusqu'à ce qu'elles soient explicitement demandées par l'utilisateur (ou la logique de l'application). Cette fonctionnalité est particulièrement utile pour les vues coûteuses en termes de temps de rendu ou de mémoire et rend d'immenses services à ce titre pour les vues affichées dans des Tabs par exemple. Dans cet article, je vais vous montrer comment utiliser la LazyView avec XAML et vous présenter un exemple complet d'implémentation.
Utilisation de LazyView
La LazyView est un conteneur qui permet de différer le chargement de son contenu jusqu'à ce que l'utilisateur déclenche explicitement ce chargement (via une action, ou par décision de la logique de l'application). Cette approche permet d'améliorer les performances de l'application, surtout lorsqu'il s'agit de vues qui ne sont pas immédiatement visibles. La LazyView n'accèpte que des View ou descendants de cette classe, les Pages sont exclues. Il s'agit donc de charger des parties d'une page à la demande et non des pages elles-mêmes (bien qu'une page puisse être totalement définies dans un ContentView qui sera alors chargé par une LazyView).
Propriétés et Méthodes Principales :
HasLazyViewLoaded : Propriété booléenne qui indique si la vue contenue dans la LazyView a déjà été chargée.LoadViewAsync() : Méthode asynchrone qui déclenche le chargement de la vue contenue dans la LazyView.
Exemple Pratique : Implémentation d'une LazyView
Je vais maintenant vous présenter un exemple pratique pour illustrer l'utilisation de LazyView dans une application MAUI. Cet exemple inclut une page principale qui utilise XAML pour définir une interface utilisateur, et une vue différée également définie en XAML qui sera chargée dynamiquement.
Fichier MainPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
xmlns:lazyDemo="using:LazyDemo"
x:Class="LazyDemo.MainPage">
<Grid RowDefinitions="300, *">
<Button Text="Charger la Vue"
Grid.Row="0" HeightRequest="40" WidthRequest="180"
Clicked="ButtonLazy_Clicked"/>
<toolkit:LazyView x:TypeArguments="lazyDemo:DelayedView" x:Name="LazyViewContainer"
Grid.Row="1"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"/>
</Grid>
</ContentPage>
Commentaires :
- La grille est divisée en deux rangées : la première pour le bouton, la seconde pour la LazyView.
- Le bouton permet de déclencher le chargement de la vue différée.
- x:TypeArguments spécifie le type de vue à charger, ici DelayedView.
Fichier MainPage.xaml.cs
namespace LazyDemo
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}
private async void ButtonLazy_Clicked(object sender, EventArgs e)
{
if (!LazyViewContainer.HasLazyViewLoaded)
{
await LazyViewContainer.LoadViewAsync();
}
}
}
}
Commentaires :
- La méthode ButtonLazy_Clicked est déclenchée lorsque vous appuyez sur le bouton.
- Elle vérifie si la vue a déjà été chargée à l'aide de HasLazyViewLoaded. Si ce n’est pas le cas, elle utilise LoadViewAsync pour charger la vue différée.
Fichier DelayedView.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="LazyDemo.DelayedView">
<Grid BackgroundColor="#DEDEDE">
<VerticalStackLayout VerticalOptions="Center">
<Label
Text="Vue Différée"
VerticalOptions="Center" TextColor="#036EFF"
HorizontalOptions="Center" FontSize="Large"/>
<Label
Text="Vue à chargement différé" FontAttributes="Italic"
VerticalOptions="Center"
HorizontalOptions="Center" FontSize="Medium"/>
</VerticalStackLayout>
</Grid>
</ContentView>
Commentaires :
- Le ContentView est centré dans la grille avec un fond gris clair.
- Le premier label affiche 'Vue Différée' en texte bleu avec une police de grande taille.
- Le second label affiche 'Vue à chargement différé' en italique.
Fichier DelayedView.xaml.cs
namespace LazyDemo;
public partial class DelayedView : ContentView
{
public DelayedView()
{
InitializeComponent();
}
}
Commentaires :
- Ce fichier se contente d'initialiser la vue DelayedView en appelant InitializeComponent. C'est un code-behind classique "vierge".
Conclusion
La LazyView est un outil utile pour optimiser les performances de votre application MAUI en retardant le chargement de certaines vues. L'objectif principal est d'améliorer l'expérience utilisateur plutôt que la vitesse de chargement, qui reste inchangée. Cependant, retarder le chargement allège la page, ce qui crée une impression de réactivité accrue. L'exemple illustre l'utilisation de LazyView pour concevoir une interface utilisateur intuitive et réactive. En chargeant les vues seulement quand c'est nécessaire, vous diminuez la consommation de ressources et améliorez l'expérience utilisateur. Pour en savoir plus, consultez la documentation officielle de LazyView.
Stay Tuned !