Interface utilisateur Telerik pour le contrôle de la barre de progression des étapes WinForms

Dans cet article de blog, nous passerons en revue le composant Windows Forms Step Progress Bar pour explorer les cas d’utilisation où il est utile de tirer parti de vos applications WinForms.

Cas d’utilisation

RadStepProgressBar est le contrôle parfait pour indiquer le flux de processus qui peuvent être séparés en différentes étapes. Qu’il s’agisse d’un enregistrement d’utilisateur, d’une billetterie ou d’un système de suivi des bogues, vous l’appelez, RadStepProgressBar vous couvre. Le contrôle dispose d’une API riche et peut être facilement configuré pour gérer n’importe quel scénario impliquant des étapes.

Collecte des étapes

Le composant Step Progress Bar expose la collection Steps avec laquelle il est facile de travailler pour ajouter ou supprimer des éléments d’étape et pour définir leur progression. Les étapes représentent différentes tâches et, comme dans la vraie vie, vous pouvez définir leur progression individuellement.

Imaginez que vous ayez une tâche qui est à moitié terminée – vous pouvez définir sa progression sur 50, ou sur n’importe quelle propriété entière entre 0 et 100 indiquant un pourcentage. L’API est aussi simple que ceci :

var step = new StepProgressItem()
{
    Progress = 50,
    FirstHeader = "Step 2",
    SecondHeader = "InProgress",
    SecondDescription = "Dev"
};

this.radStepProgressBar1.Steps.Add(step);

Au fur et à mesure que chaque étape expose sa propriété Progress, vous pouvez la mettre à jour de manière dynamique et même obtenir une transition en douceur, comme illustré dans le gif ci-dessous :

Mode Progression

Une question importante est de savoir comment les étapes sont liées les unes aux autres. Comment la définition de la progression d’une étape affecte-t-elle les autres étapes ajoutées au contrôle ? Ce comportement dépend de votre scénario réel.

Par exemple, si vous avez un processus linéaire, définir la progression d’une étape terminera également toutes les étapes précédentes. Dans d’autres cas, vous souhaiterez peut-être que les étapes soient indépendantes afin de pouvoir les effectuer individuellement. Ou votre scénario peut exiger le contraire : n’avoir qu’une seule étape à accomplir à un moment donné. Le RadStepProgressBar gère tous ces scénarios via sa propriété ProgressMode.

Voici les options disponibles :

• Linéaire: Le réglage de la progression d’une étape donnée fait passer la progression de tous les éléments avant l’étape à 100. La progression des éléments après l’étape donnée passe à 0.

  

• Seul: Une seule étape peut être toujours active.

  

• Indépendant: La progression des étapes peut être réglée individuellement.

  

Disposition

Le composant WinForms Step Progress Bar prend en charge l’orientation horizontale et verticale. Vous pouvez également modifier facilement le sens du flux des éléments d’étape via la propriété RightToLeft du contrôle. Dans l’orientation horizontale DroiteÀGauche.Oui organisera les éléments de l’étape de droite à gauche et dans l’orientation verticale de bas en haut.

StepProgressBar expose également la puissante propriété LayoutMode déterminant comment les éléments de l’étape seront disposés en fonction des longueurs de connexion et de l’espace disponible. Les marches peuvent s’étirer pour occuper tout l’espace disponible de la commande ou être disposées en fonction de l’espacement global des marches et des longueurs de connexion individuelles. Dans le mode où nous appliquons les longueurs absolues, et si les étapes ne correspondent pas, nous utilisons des boutons spéciaux pour naviguer dans les étapes avec animation.

Paramètres et styles

L’API pour apporter des modifications est simple. Nous avons exposé des propriétés et des méthodes directement sur le contrôle et sur l’élément d’étape. Certains paramètres de contrôle affecteront tous les éléments d’étape, mais vous aurez toujours la possibilité de les remplacer pour certaines étapes. Par exemple, vous pouvez agrandir un certain pas et ainsi indiquer son statut spécial :

this.radStepProgressBar1.StepSpacing = 80;
this.radStepProgressBar1.IndicatorSize = new Size(28, 28);



  


               




this.radStepProgressBar1.ConnectionThickness = 3;
 
var readyForTestStep = this.radStepProgressBar1.Steps[2];
readyForTestStep.IndicatorSize = new Size(42, 42);

En ce qui concerne les thèmes, le contrôle est également bien pris en charge dans chacun d’eux – au moment d’écrire ces lignes, ils sont au nombre de 31. Allez-y et vérifiez le ThèmeViewer outil et choisissez le meilleur thème pour votre application.

Personnalisation

En recherchant et en réfléchissant à la manière de mettre en œuvre ce contrôle, une chose était certaine. Nous voulions être flexibles et l’API simple et facile à utiliser. Les propriétés ProgressMode, LayoutMode, Orientation et RightToLeft déterminent le comportement et la disposition du contrôle.

Mais en dehors de cette API, nous voulions également fournir les moyens de faire des personnalisations afin que vous puissiez complètement changer l’apparence du contrôle en utilisant seulement quelques propriétés. Pouvez-vous reconnaître le même StepProgressBar des exemples précédents ?

C’est le même contrôle, sauf que nous avons appliqué des formes personnalisées, modifié les tailles des indicateurs et supprimé les connexions :

foreach (StepProgressItem item in this.radStepProgressBar1.Steps)
{
    string shapeAsString = "20,20,200,100:20,20,False,0,0,0,0,0:200,20,False,0,0,0,0,0:220,70,False,0,0,0,0,0:200,120,False,0,0,0,0,0:20,120,False,0,0,0,0,0:40,70,False,0,0,0,0,0:";
    if (item.IsFirst)
    {
        shapeAsString = "20,20,200,100:20,20,False,0,0,0,0,0:200,20,False,0,0,0,0,0:220,70,False,0,0,0,0,0:200,120,False,0,0,0,0,0:20,120,False,0,0,0,0,0:";
    }
    else if (item.IsLast)
    {
        shapeAsString = "20,20,200,100:20,20,False,0,0,0,0,0:180,20,True,230,20,230,120,0:180,120,False,0,0,0,0,0:20,120,False,0,0,0,0,0:40,70,False,0,0,0,0,0:";
    }
 
    item.StepIndicator.Shape = new CustomShape() { AsString = shapeAsString };
}
 
this.radStepProgressBar1.StepProgressBarElement.IndicatorSize = new Size(100, 40);
this.radStepProgressBar1.StepProgressBarElement.StepSpacing = 0;

Les formes personnalisées dans l’extrait de code ci-dessus sont créées avec le Éditeur de forme outil et sérialisé plus tard sous forme de chaînes. Si vous ne souhaitez pas créer vos propres formes spéciales, vous pouvez utiliser l’une des formes prédéfinies répertoriées ici : Formes | Cadre de présentation Telerik.

Essaye le

Pour essayer le contrôle WinForms Step Progress Bar ainsi que tous les autres contrôles et thèmes, téléchargez la dernière version de Interface utilisateur Telerik pour WinForms de ton Compte Telerik ou téléchargez une version d’essai sur : https://www.telerik.com/download-trial-file/v2-b/ui-for-winforms.

Nous aimerions savoir comment tout cela fonctionne pour vous, alors n’hésitez pas à nous faire part de vos réflexions en visitant notre Portail de commentaires ou en laissant un commentaire ci-dessous