L’interface utilisateur Telerik pour Xamarin ProgressBar est conçue pour afficher des informations de progression aux utilisateurs lors d’une opération de longue durée. Le contrôle a un mode indéterminé et un support de segments. De plus, vous pouvez le personnaliser à l’aide de l’API Flexible Styling.
Interface utilisateur Telerik pour Xamarin R2 2022 est là avec un tout nouveau contrôle – le Barre de progression Xamarin. Ce contrôle vous donne la possibilité d’ajouter un indicateur de progression à vos applications mobiles et UWP. Une barre de progression peut être utilisée dans divers scénarios – pour informer les utilisateurs qu’un processus est en cours ou pour informer les utilisateurs de l’état de la progression en cours, comme le chargement d’une application et d’images, le téléchargement de fichiers, l’enregistrement de mises à jour, la soumission d’une demande de formulaire, etc 👌
Fonctionnalités de Telerik ProgressBar pour Xamarin
Passons en revue les fonctionnalités Interface utilisateur Telerik pour Xamarin ProgressBar fournit. 🧐
✔ Deux états représentant le progrès : déterminé et indéterminé
L’état déterminé représente la durée de la progression, tandis que l’état indéterminé exprime un temps d’attente indéterminé (dans les cas où la progression ne peut pas être détectée ou qu’il n’est pas nécessaire d’indiquer la durée de l’activité). Bien sûr, vous pouvez basculer entre les deux modes à l’aide de la EstIndéterminé (boo) propriété. Par défaut, l’état Xamarin ProgressBar est déterminé.
<telerikPrimitives:RadLinearProgressBar Value="25"
IsIndeterminate="True"/>
✔ Options pour définir la valeur et la plage de progression
Utilisez le Évaluer et Progrès propriétés à définir et à signaler, respectivement, pour afficher la progression d’une tâche dans le contrôle Xamarin ProgressBar.
<telerikPrimitives:RadLinearProgressBar x:Name="progressBar"/>
<StackLayout Orientation="Horizontal" Spacing="10">
<Button Text="Update" Clicked="ProgressBarUpdateClicked"/>
<Label Text="Progress: " VerticalOptions="Center"/>
<Label Text="{Binding Progress, Source={x:Reference progressBar}}" VerticalOptions="Center"/>
</StackLayout>Et implémentez la mise à jour de la valeur de progression en cliquant sur le bouton avec :
private void ProgressBarUpdateClicked(object sender, EventArgs e)
{
this.progressBar.Value = 75;
}
Utilisez le Le minimum et Maximum properties pour ajouter une plage à ProgressBar.
✔ Choisissez d’afficher ou non la valeur de progression
Vous pouvez décider d’afficher ou non la valeur de progression dans Xamarin ProgressBar. La ValueDisplayMode propriété vous donne la possibilité d’afficher la progression comme Pour cent (plage du minimum au maximum), Évaluer (valeur de progression) ou un texte personnalisé via le Texte option, et, bien sûr, si vous ne voulez pas afficher le texte du tout — l’option Aucun option.
✔ Alignez horizontalement l’étiquette indiquant la progression
Alignez horizontalement l’étiquette à l’aide de la LabelHorizontalOptions(Xamarin.Forms.LayoutOptions) propriété.
<telerikPrimitives:RadLinearProgressBar Value="55"
LabelHorizontalOptions="Center"/>
✔ Prise en charge des segments
Divisez la barre de progression en segments à l’aide de la SegmentCount(entier) propriété. De plus, vous pouvez styliser les segments à l’aide de la SegmentSeparatorFill(Brush) et SegmentSeparatorThickness(double).
<telerikPrimitives:RadLinearProgressBar Value="25"
SegmentCount="10"
SegmentSeparatorFill="Black"
SegmentSeparatorThickness="2"/>
✔ Options de personnalisation à l’aide de l’API de style flexible🤩
Bénéficiez de l’API de style flexible fournie par le contrôle ProgressBar. Personnalisez le remplissage progressif, le remplissage indéterminé, la couleur du texte de l’étiquette, la taille de la police, etc.
Styliser la barre de progression pour le mode déterminé
- Appliquer TrackFill (pinceau) et ProgressFill (pinceau) Propriétés.
<telerikPrimitives:RadLinearProgressBar Value="20"
TrackFill="LightBlue"
ProgressFill="Blue"/>
- Personnalisez le texte affiché dans la barre de progression.
<telerikPrimitives:RadLinearProgressBar Value="90"
AlternateTextColor="Black"
TextColor="#019688"
FontSize="20"
HeightRequest="30"/>
Style pour le mode indéterminé
Utilisez le Remplissage indéterminé (pinceau) propriété pour styliser l’indicateur indéterminé.
<telerikPrimitives:RadLinearProgressBar Value="25"
IsIndeterminate="True"
IndeterminateFill="Yellow"/>
✔ Définir l’accélération de l’animation et la durée de l’animation pendant le changement de progression
Personnalisez la durée de l’animation et la fluidité ProgressAnimationDuration et ProgrèsAnimationAssouplissement Propriétés.
<StackLayout>
<Label Text="Progress AnimationDuration and AnimationEasing can be viewed when the Value of the ProgressBar changes"/>
<StackLayout Orientation="Horizontal">
<Label Text="{Binding Value, Source={x:Reference progressBar}}"/>
<Stepper Minimum="0"
Maximum="180"
Increment="20"
Value="{Binding Value, Source={x:Reference progressBar}}"/>
</StackLayout>
<StackLayout>
<Label Text="ProgressAnimationDuration = 1000 and ProgressAnimationEasing = CubicIn"/>
<telerikPrimitives:RadLinearProgressBar x:Name="progressBar"
Minimum="0"
Maximum="180"
Value="20"
ProgressAnimationDuration="1000"
ProgressAnimationEasing="CubicIn"/>
</StackLayout>
</StackLayout>
Qu’en est-il d’un état indéterminé ? Nous y avons pensé et fournissons des propriétés pour personnaliser l’accélération et la durée de l’animation lorsque le contrôle est dans un état indéterminé (DuréeAnimationIndéterminée et IndéterminéAnimationAssouplissement Propriétés).
<telerikPrimitives:RadLinearProgressBar Value="25"
IndeterminateAnimationDuration="1000"
IndeterminateAnimationEasing="CubicIn"
IsIndeterminate="True"/>
Exemples avec Telerik ProgressBar pour Xamarin😍
Il existe divers exemples avec le contrôle ProgresBar dans l’interface utilisateur Telerik pour l’exemple d’application Xamarin et l’application de navigateur SDK.
L’exemple d’application Telerik pour Xamarin se trouve dans l’App Store, le Google Play Store et le Windows Store :
Vos commentaires sont importants—Dites-nous ce que vous en pensez
Nous espérons que le nouveau contrôle Xamarin ProgressBar aura sa place dans vos applications mobiles et UWP.
Comme toujours, nous vous encourageons à partager vos idées ou opinions sur les contrôles et à jouer un rôle dans l’élaboration de notre feuille de route. Vous pouvez écrire dans le Interface utilisateur Telerik pour le portail de commentaires Xamarin ou lever un ticket.
Si vous n’avez pas encore essayé la suite Telerik UI pour Xamarin, essayez-la avec un Essai gratuit de 30 joursoffrant toutes les fonctionnalités et commandes à votre disposition à un coût nul.
Bon codage avec nos contrôles ! ❤
Source link