Essayez ! Personnaliser l’indicateur de progression d’un contrôle SimpleProgressBar

Vous pouvez facilement personnaliser l’aspect d’un indicateur de progression dans Microsoft Expression Blend, à l’aide du modèle de contrôle SimpleProgressBar. Le modèle SimpleProgressBar prend uniquement en charge la barre de progression orientée horizontalement.

Pour personnaliser l’indicateur de progression d’un modèle SimpleProgressBar

1. Placez un contrôle SimpleProgressBar sur la planche graphique dans Expression Blend.

   Conseil :
   Les contrôles de styles simples sont disponibles dans la catégorie Styles simples de l’onglet Contrôles dans la Bibliothèque de composants. Une fois que vous avez sélectionné un contrôle de style simple dans la liste, vous pouvez le dessiner sur la planche graphique.

2. Cliquez avec le bouton droit sur la barre de progression sous Objets et chronologie, pointez sur Modifier des parties du contrôle (modèle), puis cliquez sur Modifier le modèle. Si vous ne souhaitez pas changer le dictionnaire de ressources SimpleStyles.xaml, vous pouvez cliquer sur Modifier une copie et non sur Modifier le modèle pour créer un nouveau modèle et l’enregistrer dans le document. Pour plus d’informations sur la création d’une copie, voir Créer une ressource.

   Conseil :

   Pour quitter le mode d’édition de modèle et revenir à l’étendue de votre document, cliquez sur le bouton Étendue supérieure, qui se trouve au-dessus de l’arborescence d’éléments dans le panneau Interaction. Pour revenir au mode d’édition de modèle pour un modèle existant : sous Objets et chronologie, cliquez avec le bouton droit sur l’élément dont vous voulez modifier le modèle, pointez sur Modifier des parties du contrôle (Modèle), puis cliquez sur Modifier le modèle.

3. Sous Objets et chronologie, cliquez avec le bouton droit sur l’élément PART_Indicator, pointez sur Modifier le type de disposition, puis cliquez sur Grille. Utilisez la souris sur la planche graphique ou modifiez la propriété Width sous Disposition dans le panneau Propriétés pour augmenter la largeur de l’élément PART_Indicator.

4. Double-cliquez sur l’élément PART_Indicator sous Objets et chronologie pour l’activer.

   Vous pouvez maintenant ajouter des éléments enfants à l’élément PART_Indicator car il est actif et parce qu’il est un panneau Grille et non une bordure.

5. Dans la boîte à outils, double-cliquez sur l’outil Ellipse pour ajouter un cercle dans l’élément PART_Indicator et le remplir. Vous pouvez voir votre cercle si vous changez sa largeur. Modifiez la couleur du cercle sous Pinceaux dans le panneau Propriétés. Ajustez la taille du cercle à l’aide des propriétés sous Disposition dans le panneau Propriétés. Assurez-vous que la propriété HorizontalAlingment a la valeur Étirer.

6. Si vous souhaitez appliquer un effet bitmap, cliquez sur le bouton Afficher les propriétés avancées pour la catégorie Apparence du panneau Propriétés, cliquez sur la flèche déroulante en regard de la propriété BitmapEffect, puis sélectionnez un effet tel que Éclat extérieur.

7. Pour voir votre barre de progression en action, vous pouvez ajouter un code au fichier code-behind de votre document. Par exemple, si votre document se nomme Window1.xaml, le fichier code-behind est Window1.xaml.cs ou Window1.xaml.vb, selon le langage de programmation que vous avez sélectionné lors de la création de votre projet.

   Sous Objets et chronologie, cliquez sur le bouton Étendue supérieure pour revenir à l’étendue d’édition de votre document et donnez à votre barre de progression un nom tel que « ProgressBar1 » (si le nom est entre crochets, un élément n’a pas été nommé).

8. Ouvrez le fichier code-behind depuis le panneau Projet, et ajoutez le code suivant. Pour plus d’informations sur l’ouverture d’un fichier code-behind, voir Modifier un fichier code-behind.

     // Insert code required on object creation below this point.   
       Duration duration = new Duration(System.TimeSpan.FromSeconds(10));
       DoubleAnimation doubleanimation = new DoubleAnimation(ProgressBar1.Maximum, duration);
       ProgressBar1.BeginAnimation(ProgressBar.ValueProperty, doubleanimation); 
   

   ' Insert code required on object creation below this point.
       Dim duration As New Duration(System.TimeSpan.FromSeconds(10))
       Dim doubleanimation As New DoubleAnimation(ProgressBar1.Maximum, duration)
       ProgressBar1.BeginAnimation(ProgressBar.ValueProperty, doubleanimation)
   

9. Testez votre application (F5) pour voir les effets.

Voir aussi

Concepts

SimpleProgressBar