L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Commencez avec la StepProgressBar dans l'interface utilisateur Telerik pour WPF
Vous recherchez un moyen simple et pratique de suivre les processus en plusieurs étapes dans vos applications WPF ? Inutile de chercher ailleurs, vous êtes au bon endroit ! 🎯 Le dernierVersion R1 2022de Telerik UI pour WPF a apporté un nouveau composant RadStepProgressBar.
Si vous avez des doutes quant à savoir si c'est le meilleur outil pour suivre les progrès, laissez-moi vous aider à décider. À quoi s'attendre de ce billet de blog – tous les détails épicés des principales fonctionnalités de RadStepProgressBar et de leur utilisation. Alors, commençons le voyage avec les raisons du choix d'une barre de progression d'étape.
Raisons d'utiliser une StepProgressBar
Il n'y a rien de plus ennuyeux que de remplir un long formulaire. Et si vous me disiez que cela ne vous est jamais arrivé, ce serait un mensonge. Un mensonge encore plus grand – ne pas sauter un tel formulaire. 🤥
Voici la nécessité d'une barre de progression étape. Il vous permet de configurer un élément visuel qui affiche un processus en plusieurs étapes via un certain nombre d'étapes différentes et une barre de progression entre chaque étape, afin de rendre un formulaire autrement long moins intimidant pour les utilisateurs.
La liste de ce à quoi cela s'applique est plus longue qu'une lettre au Père Noël. Qu'il s'agisse d'inscriptions, de prises de rendez-vous, de suivi de l'état des colis, de quiz, d'enquêtes plus longues, etc.
Continuons avec un tutoriel de démarrage rapide, puis nous nous dirigerons vers le pôle "Fonctionnalités clés" maintenant.
Mettez-le en action
Pour cette section, vous aurez besoin des prérequis suivants : une nouvelle application WPF, une référence auTelerik.Windows.Controls Assemblée. Le reste est comme une promenade dans le parc :
<telerik:RadStepProgressBarItem Contenu="Commandé" Contenu additionnel="10/01/2020"/>
<telerik:RadStepProgressBarItem Contenu="Emballé" Contenu additionnel="10/10/2020" />
<telerik:RadStepProgressBarItem Contenu="Expédié" Contenu additionnel="02/01/2021" />
<telerik:RadStepProgressBarItem Contenu="Livré" Contenu additionnel="02/05/2021" />
</telerik:RadStepProgressBar>
Allons-nous voir à quoi cela ressemble?
Comme promis, c'était le moyen le plus simple de démarrer avec RadStepProgressBar. Si vous souhaitez passer au niveau supérieur, vous pouvez utiliser le contrôle dans un scénario de liaison de données. Inutile de dire que cela peut être fait avec la propriété ItemsSource, n'est-ce pas ? Et qu'un RadStepProgressBarItem sera également généré automatiquement pour chaque membre de votre collection de données ?
Examen des principales caractéristiques
Vous attendiez-vous à un résultat différent de ce qui précède ? Continuez avec cette section pour apprendre toutes les spécificités et explorer les capacités de personnalisation flexibles.
Orientation et mise en page
Si vous vous attendiez à ce que la barre de progression de l'étape soit orientée différemment, ne vous inquiétez pas, vous pouvez modifier cela via la propriété Orientation. Horizontal ou vertical, tout dépend de vous. Pas assez? Le sens du flux peut également être inversé, de droite à gauche ou de bas en haut.
Accordez le pas
Les petits pas comptent. Mais si l'espacement entre les étapes de la barre de progression est trop petit ou trop grand, ne vous inquiétez pas. C'est couvert. leEspacement des pas propriété pourrait être utile. 😉
La forme de la marche compte également. Pour chaque StepProgressBarItem, vous pouvez choisir parmi lestélérik:Géométrie types prédéfinis ou créez-en un personnalisé. Une fois que vous avez trouvé le parfait, il suffit de l'attribuer à n'importe quel article.ShapeGeometrybiens.
<telerik:RadStepProgressBar>
<telerik:RadStepProgressBarItem
ShapeGeometry="{telerik :Type de géométrie=Ellipse}"
Contexte="Violet moyen" Premier plan="#FFFFFFFF"
FormeLargeur="30" FormeHauteur="30"/>
<telerik:RadStepProgressBarItem
ShapeGeometry="{telerik :Type de géométrie=Carré}"
Contexte="Vert citron" Premier plan="#FFFFFFFF"
FormeLargeur="30" FormeHauteur="30"/>
<telerik:RadStepProgressBarItem
ShapeGeometry="{telerik :Type de géométrie=Nuage}"
Contexte="Bleu ciel profond" Premier plan="#FFFFFFFF"
FormeLargeur="40" FormeHauteur="30"/>
</telerik:RadStepProgressBar>
Bien sûr, chaque étape peut être sélectionnée. Pour suivre son statut, la RadStepProgressBar expose trois états pratiques—Pas commencé,IndéterminéetComplété . La sélection d'une étape fait passer son statut à Terminé.
Comme vous l'avez peut-être déjà deviné, chaque état affiche un indicateur différent à l'intérieur de la forme de l'étape.
Ajustez le contenu
Et chaque indicateur a un contenu entièrement personnalisable. Il existe un ensemble de propriétés Content et ContentTemplate basées sur l'état de l'étape :
- NotStartedIndicatorContent
- NotStartedIndicatorContentTemplateNotStartedIndicatorContentTemplate
- IndeterminateIndicatorContent
- IndeterminateIndicatorContentTemplate
- TerminéIndicateurContenu
- CompletedIndicatorContentTemplate
<telerik:RadStepProgressBar Largeur="300" État de l'élément sélectionné="Indéterminé">
<telerik:RadStepProgressBar.Resources>
<Modèle de données x : Clé="Modèle de contenu d'indicateur">
<Bloc de texte Texte="{Obligatoire}" Premier plan="#1fd6fc" />
</Modèle de données>
</telerik:RadStepProgressBar.Resources>
<telerik:RadStepProgressBarItem
NotStartedIndicatorContent="N / A"
TerminéIndicateurContenu="Oui"
IndeterminateIndicatorContent="..."
CompletedIndicatorContentTemplate="{StaticResource IndicatorContentTemplate}"
IndeterminateIndicatorContentTemplate="{StaticResource IndicatorContentTemplate}" />
<telerik:RadStepProgressBarItem
NotStartedIndicatorContent="N / A"
TerminéIndicateurContenu="Oui"
IndeterminateIndicatorContent="..."
CompletedIndicatorContentTemplate="{StaticResource IndicatorContentTemplate}"
IndeterminateIndicatorContentTemplate="{StaticResource IndicatorContentTemplate}"/>
<telerik:RadStepProgressBarItem
NotStartedIndicatorContent="N / A"
TerminéIndicateurContenu="Oui"
IndeterminateIndicatorContent="?"
CompletedIndicatorContentTemplate="{StaticResource IndicatorContentTemplate}"
IndeterminateIndicatorContentTemplate="{StaticResource IndicatorContentTemplate}"/>
</telerik:RadStepProgressBar>
Pour une information détaillée sur chaque étape, assurez-vous de bénéficier de laContenuetContenu additionnelPropriétés.
Personnalisation de l'apparence
La personnalisation de l'apparence de RadStepProgressBar est simple car un riche ensemble de fonctionnalités est fourni et peut être facilement utilisé.
À titre d'exemple, voici quelques scénarios qui illustrent la liberté dont vous disposez pour personnaliser l'apparence de StepProgressBar.
Aimez-vous ce que vous voyez? Vous pouvez trouver comment les atteindre tous dans notreapplication démos.
Essayez-le et partagez vos commentaires
J'espère que j'ai tout couvert. Au cas où j'aurais raté quelque chose, assurez-vous de vérifier leDocumentationaussi.
Je pense que RadStepProgressBar répondra parfaitement à vos besoins, alors n'attendez pas une minute de plus pour vous procurer un essai gratuit de Telerik UI pour WPF aujourd'hui et essayez-le.
Comme toujours, vos réflexions et suggestions sont grandement appréciées, alors assurez-vous de les déposer dans la section des commentaires ci-dessous ou utilisez le bien connuPortail de commentaires.
Merci d'avoir lu!
Source link