Le suivi de la progression est devenu plus sophistiqué avec la nouvelle CircularProgressBar pour WPF. Facile à mettre en pratique. Emballé avec beaucoup d’avantages.
Je suis content que tu sois tombé sur ce blog. Mais premier café! Prenez-vous une tasse, et je prendrai la mienne.
Si l’heure à laquelle vous lisez mon article de blog se situe autour de l’heure du vin ou de la bière, ne vous inquiétez pas, assurez-vous simplement d’avoir le bon complément. Prêt?
OK, maintenant nous sommes prêts à nous plonger dans le dernier ajout à l’interface utilisateur pour la suite WPF : la CircularProgressBar. Cela fait partie de la Version R3 2022mais je suis sûr que vous pouvez le trouver dans la fabrication de ma tasse ☕ ci-dessus.
Indiquer le but des indicateurs
Les indicateurs de progression expriment un temps d’attente indéterminé ou affichent la durée d’un processus. Ils informent les utilisateurs de l’état des processus en cours, qu’il s’agisse de charger une application, de soumettre un formulaire ou d’enregistrer des mises à jour.
Les deux types d’indicateurs de progrès les plus populaires sont linéaires et circulaires. Et je suppose que vous avez déjà compris que la circulaire est celle dont nous parlerons aujourd’hui. Non seulement parce qu’il fait plus frais, mais aussi parce que c’est notre nouveau venu.
La RadCircularProgressBar est conçue pour afficher la progression le long d’une piste circulaire dans le sens des aiguilles d’une montre. Mettons-le en pratique, puis passons à ses avantages.
Mettez-le en pratique
Je promets que ce sera bref.
La seule chose dont vous devrez vous occuper à l’avance est une nouvelle application WPF et une référence au Telerik.Windows.Controls Assemblée. Je parie que vous pouvez faire le reste les yeux fermés :
<telerik:RadCircularProgressBar Value="0.27" />Bien sûr, vous pouvez également le faire en code-behind :
RadCircularProgressBar cpb = new RadCircularProgressBar() { Value = 0.27 };Le résultat sera le même:
Progresser avec la CircularProgressBar
Nous avons appris qu’une barre de progression circulaire est utilisée pour visualiser l’avancement d’un travail ou d’une opération, vérifions maintenant les façons de montrer les différents états d’avancement.
Déterminé
Des indicateurs circulaires déterminés remplissent la piste circulaire de couleur, tandis que l’indicateur se déplace de 0 à 360 degrés. Ils affichent la durée d’un processus et il est recommandé de les utiliser lorsque le taux d’achèvement du processus peut être détecté. L’image de la section précédente est un exemple de cet état.
Indéterminé
Des indicateurs circulaires indéterminés tournent le long de la piste. Ils expriment un temps d’attente non spécifié et il est recommandé de les utiliser lorsque la progression n’est pas détectable ou s’il n’est pas nécessaire d’indiquer la durée d’une activité.
Ce mode peut être activé en réglant le EstIndéterminé propriété de RadCircularProgressBar sur True. Il est animé et offre la possibilité de déterminer le rapport de l’indicateur de progression à l’aide du IndeterminateIndicatorRatio propriété, ainsi que pour personnaliser l’animation indéterminée. Apprenez à le faire dans le rubrique suivante de la documentation en ligne. En attendant, je vais vous montrer à quoi ressemble le contrôle par défaut lorsqu’il fonctionne dans ce mode.
Segmenté
RadCircularProgressBar vous permet de diviser la piste de progression en plusieurs segments. Ici le segments propriété détermine le montant. Et vous êtes également habilité à contrôler la densité des segments à travers le Densité de segments propriété. Oh, une autre chose sympa que vous pouvez faire est de les arrondir en réglant le Utiliser les segments arrondis propriété.
Voici l’apparence d’une barre de progression circulaire segmentée—5 segments arrondis avec une densité de 0,75 :
Hm, j’ai déjà abordé les capacités de personnalisation du composant, mais je ne les ai pas entièrement couvertes. Ou peut-être ai-je gardé les trucs encore plus cool pour la prochaine section ? Découvrons-le.
Découvrez plus d’avantages
L’image suivante dit à peu près tout, mais nous allons l’examiner ensemble. Je sais que vous aimez ce que vous voyez, mais pour vous faire gagner du temps et vous demander comment tout cela est fait, assurez-vous de vérifier les exemples CircularProgressBar dans le application démos.
Contenu personnalisable
Le composant de barre de progression circulaire peut devenir suffisamment complexe par son contenu. Observez l’image ci-dessus – un autre indicateur de progression circulaire peut être placé dans la zone de contenu, ou un bouton, ou… eh bien, tout simplement quelque chose de significatif pour vos besoins.
Gammes de couleurs
Des gammes avec différentes couleurs peuvent être définies, et elles peuvent également être un dégradé. Comment? Par ici.
Indicateur de progression secondaire
La CircularProgressBar permet de visualiser un indicateur de progression supplémentaire utile dans les scénarios où l’indicateur principal dépend de la progression de l’indicateur secondaire. L’utilisateur final peut visualiser simultanément la progression des tâches principales et secondaires. Pour activer cet avantage, vous devez définir le Valeursecondaire propriété. Il existe également une couleur distincte pour la progression secondaire, contrôlée par le RemplissageIndicateurSecondaire propriété. Vérifiez la partie inférieure droite de l’image précédente.
Rayons et angles
N’ayez pas peur, vous n’aurez pas besoin de rapporteurs ou de compétences avancées en mathématiques. 🤓
En gardant à l’esprit la structure visuelle de la barre de progression circulaire, sachez simplement que vous pouvez régler les rayons intérieur et extérieur de l’indicateur et des pièces de piste, ainsi que les angles de début et de fin du composant.
J’aime vraiment utiliser la démo Configurator du contrôle. Regarde ce que j’en ai fait :
L’image ci-dessus montre mes expériences avec les rayons de la piste et l’indicateur. Et le suivant – les différentes combinaisons d’angles de départ et d’arrivée.
Atteignez le niveau suivant
Il s’agit d’une section spécialement dédiée pour vous encourager à libérer votre esprit et à expérimenter avec ce composant génial. Je suis certain que la barre de progression circulaire peut aider votre prochaine pièce WPF à devenir un Maîtrepièce. Vous pouvez l’intégrer aux autres types de barres de progression que nous proposons (par exemple, le StepProgressBar) ou tout autre membre de l’interface utilisateur pour WPF Suite.
Parfois, il est difficile de trouver le point de départ, mais voici ce que j’ai fait. J’ai pensé à ce que je fais en ce moment : écrire un article de blog. Qu’est-ce que mon blog présente – le contrôle de la barre de progression circulaire. Et j’ai eu l’idée de créer un tableau de bord super simple (sans un seul graphique ou jauge !) Représentant les deux choses. Regarde ça. 😊
Prenez une minute pour les commentaires
Merci d’avoir pris le temps de lire mon blog ! J’espère que vous l’avez apprécié et que vous avez une minute pour laisser vos pensées et vos impressions dans la section des commentaires ci-dessous ou dirigez-vous vers le Portail de commentaires pour WPF.
Aussi, ne manquez pas l’occasion de vérifier les autres goodies de la Version Telerik Desktop & Mobile R3 2022 et assurez-vous d’essayer la dernière :
Source link