Découvrez comment utiliser le BusyIndicator pour indiquer le chargement dans votre application .net Maui.
Je l’admets – quand j’utilise une application et que je n’ai aucune idée de ce qui se passe, je commence à devenir un peu anxieux.
En tant qu’utilisateurs, nous apprécions vraiment quand une application nous tient informés, surtout lorsqu’elle effectue une action sensible.
Prenons un exemple simple: imaginez que vous utilisez une application Crypto et que vous venez d’envoyer une transaction importante. À ce moment-là, chaque seconde sans rétroaction peut créer de l’incertitude ou même de la méfiance.
C’est pourquoi, même si vous ne pouvez pas éviter le moment où un processus prend, vous pouvez certainement améliorer l’expérience utilisateur en montrant un indice visuel clair que quelque chose se passe. Rien n’est pire que de supposer que l’application a gelé ou échoué sans aucun avertissement.
Ces types de situations sont plus courants que vous ne le pensez, c’est pourquoi il est si important d’informer l’utilisateur chaque fois qu’un processus de fond se produit dans l’interface utilisateur. Parfois, un simple indicateur de chargement peut faire toute la différence.
C’est exactement pourquoi aujourd’hui je vais vous montrer comment utiliser le Composant .net Maui BusyIndicator de Progress Telerik pour gérer ces scénarios dans votre Applications .net Maui. Amélilons ensemble cette expérience utilisateur!
Qu’est-ce que l’interface utilisateur de Telerik pour .net Maui BlantIndicator?
Le Telerik BuskedIdicator est un composant d’interface utilisateur qui informe les utilisateurs lorsque l’application effectue une opération d’arrière-plan. Considérez-le comme un chargeur personnalisable qui reste visible jusqu’à ce que le processus en cours soit terminé.
Il propose diverses animations intégrées pour rendre votre application plus dynamique. De plus, vous pouvez facilement personnaliser ces animations pour correspondre à la marque et au style de votre application.
Voici un exemple de la façon dont le contrôle par défaut peut apparaître dans votre application:
Ce contrôle fait partie de l’interface utilisateur Telerik pour la bibliothèque .net Maui, qui comprend plus de 60 composants d’interface utilisateur conçus par des professionnels pour vous aider à créer des applications multiplateformes puissantes et modernes.
Implémentons l’indicateur occupé
Maintenant que vous avez une meilleure compréhension de l’Ont BarredIdicator, permettez-moi de vous guider à travers quelques étapes simples pour la mettre en œuvre en utilisant le Téléré gratuit.
Tout d’abord, assurez-vous d’avoir les conditions préalables suivantes prêtes:
Une fois que toutes les conditions préalables sont définies, vous êtes prêt à commencer! 😎
Étape 1: Ajouter l’espace de noms Telerik
Accédez à votre fichier XAML et ajoutez l’espace de noms suivant:
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
Étape 2: Ajoutez le busydicator au xaml
Après avoir configuré l’alias «Telerik» dans votre espace de noms XAML, vous êtes prêt à ajouter le Radbusyindicateur Comme vous pouvez le voir dans l’exemple suivant:
<telerik:RadBusyIndicator x:Name="BusyIndicator"
AnimationContentHeightRequest="100"
AnimationContentWidthRequest="100"
AnimationContentColor="#674bb2"
AutomationId="busyIndicator"
IsBusy="True">
<telerik:RadBusyIndicator.Content>
<Label Text="This is the content of the RadBusyIndicator control displayed when the indicator is not busy." TextColor="Black" />
</telerik:RadBusyIndicator.Content>
</telerik:RadBusyIndicator>
Étape 3: Enregistrez Telerik dans Mauiprogram.cs
Dirigez-vous vers votre Mauprogram.cs fichier et, à l’intérieur du Createmauiapp Méthode, ajouter .UseTelerik() Pour permettre les commandes de Telerik. Placez-le juste au-dessus .UseMauiApp<App>()comme ça:
using Telerik.Maui.Controls.Compatibility;
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseTelerik()
.UseMauiApp<App>()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
});
return builder.Build();
}
}
Définition de l’animation sur le buskindicator
Le contrôle est livré avec 10 styles d’animation différentset c’est génial! En règle générale, nous sommes coincés avec un seul, mais ici vous avez des options pour correspondre à la personnalité de votre application.
Pour changer le type d’animation, utilisez simplement le AnimationType propriété. Cette propriété accepte une enum avec des valeurs allant de Animation1, animation2 … jusqu’à Animation10.
Maintenant, vous vous demandez peut-être: Comment savoir à quoi ressemble chaque animation?
Pas de soucis! Découvrez simplement le tableau ci-dessous pour tous les prévisualiser et choisir votre favori. 😎
🔍 choses à garder à l’esprit:
- L’animation par défaut est Animation1.
- Pour afficher le contrôle, le Isbusie la propriété doit être définie sur vrai.
Changer la couleur de l’animation
Vous pouvez également personnaliser la couleur d’animation en utilisant le AnimationColor propriété. Notez que cela ne s’applique qu’aux animations intégrées mentionnées ci-dessus et ne s’applique pas aux animations personnalisées.
Régler la taille
Vous pouvez animer la taille en utilisant le AnimationContentWidthRequest et AnimationContentHeightRequest Propriétés pour la largeur et la hauteur, respectivement. Par défaut, la taille de l’animation est de 25×25.
⚠️ ces propriétés de dimensionnement, comme AnimationColorappliquez uniquement aux animations intégrées du contrôle et non à celles personnalisées.
Traduire notre explication en code, cela ressemblerait à l’exemple suivant:
<telerik:RadBusyIndicator x:Name="BusyIndicator"
AnimationType="Animation2"
AnimationContentColor="#2374FF"
AnimationContentHeightRequest="150"
AnimationContentWidthRequest="150"
IsBusy="True">
<telerik:RadBusyIndicator.Content>
<Label Text="This is displayed when the indicator is not busy."
TextColor="Black" />
</telerik:RadBusyIndicator.Content>
</telerik:RadBusyIndicator>
Animations personnalisées
Vous pouvez également créer une animation personnalisée en suivant ces étapes simples:
- Définissez la propriété AnimationType sur Coutume.
- À l’intérieur du BusyContent, ajoutez le contenu que vous souhaitez animer.
- Ajoutez l’animation personnalisée à la collection d’animations du BusyIndicator.
Vous pouvez appliquer ces étapes dans votre code comme indiqué ci-dessous:
<telerik:RadBusyIndicator x:Name="radBusyIndicator"
AnimationType="Custom"
IsBusy="True">
<telerik:RadBusyIndicator.Content>
<Label Text="Welcome! The content is fully loaded and ready to use." />
</telerik:RadBusyIndicator.Content>
<telerik:RadBusyIndicator.BusyContent>
<Label HorizontalOptions="Center"
Text="Loading..."
VerticalOptions="Center" />
</telerik:RadBusyIndicator.BusyContent>
</telerik:RadBusyIndicator>
Contenu de l’agence-indicateur
En utilisant le BusyContent propriété, vous pouvez afficher du contenu supplémentaire avec les animations intégrées lorsque le composant IsBusy la propriété est définie sur true.
Par exemple, dans l’extrait de code suivant, le Animation6 sera affiché avec un message ci-dessous qui dit: « Travailler dessus, juste un instant, s’il vous plaît … »
<telerik:RadBusyIndicator x:Name="BusyIndicator"
AnimationContentHeightRequest="100"
AnimationContentWidthRequest="100"
AnimationType="Animation6"
IsBusy="True">
<telerik:RadBusyIndicator.BusyContent>
<Label Text="Working on it, just a moment, please..." />
</telerik:RadBusyIndicator.BusyContent>
<telerik:RadBusyIndicator.BusyContentTemplate>
<ControlTemplate>
<Grid RowDefinition=”Auto,Auto >
<ContentPresenter Grid.Row="0"
Content="{TemplateBinding Path=AnimationContent}" />
<ContentPresenter Grid.Row="1"
Content="{TemplateBinding Path=BusyContent}"
HorizontalOptions="Center" />
</Grid>
</ControlTemplate>
</telerik:RadBusyIndicator.BusyContentTemplate>
</telerik:RadBusyIndicator>
Votre résultat ressemblera à l’image suivante:
Ajout de l’Ont BarredIdicator à une collection View
Nous savons qu’en raison de sa nature, le Collection View Peut prendre quelques millisecondes à charger. La bonne nouvelle est que nous pouvons facilement l’intégrer avec le BusyIndicator pour informer les utilisateurs que les données sont toujours en charge.
Vous trouverez ci-dessous un exemple de la façon de l’utiliser aux côtés d’un plan de collection:
<Grid RowDefinitions="40, *"
RowSpacing="10">
<telerik:RadButton Text="Load Data"
Command="{Binding LoadDataCommand}" />
<telerik:RadBusyIndicator x:Name="busyIndicator"
ContentUnderOpacity="0.4"
AnimationContentHeightRequest="100"
AnimationContentWidthRequest="100"
IsBusy="{Binding IsLoading}"
Grid.Row="1">
<telerik:RadCollectionView ItemsSource="{Binding Source}"
DisplayMemberPath="Title" />
</telerik:RadBusyIndicator>
</Grid>
Conclusion
Et fait !! Vous voyez comment, dans quelques minutes, vous avez appris des choses vraiment intéressantes sur l’interface utilisateur de Telerik pour .net Maui Blantdidicator? D’après ce que c’est aux différents types d’animations, comment le personnaliser, changer sa couleur et bien plus encore!
✨ J’espère que cela vous aidera à tenir vos utilisateurs informés de ce qui se passe dans votre application en l’intégrant dans vos projets à partir de maintenant.
Essayez-le gratuitement: Télécharger Telerik UI pour .net Maui
Si vous avez des questions, n’hésitez pas à les laisser dans les commentaires. 💚💕
Rendez-vous la prochaine fois! 🙋♀️
Références
Source link