it-swarm-fr.com

Texte sur une barre de progression dans WPF

Cela peut sembler une évidence pour le cognoscenti de WPF, mais j'aimerais savoir s'il existe un moyen simple de mettre un texte sur le WPF ProgressBar. Pour moi, une barre de progression vide est nue. C'est un écran immobilier qui pourrait porter un message sur ce qui est en cours, ou même simplement ajouter des chiffres à la représentation. Maintenant, WPF est entièrement consacré aux conteneurs et aux extensions et je réfléchis lentement à cela, mais comme je ne vois pas de propriété "Text" ou "Content", je pense que je vais devoir ajouter quelque chose au conteneur qui est ma barre de progression. Existe-t-il une technique ou deux plus naturelle que mes impulsions WinForms d'origine? Quel est le moyen le plus naturel et le plus naturel pour WPF d’ajouter du texte à cette barre de progression?

49
Jacob Proffitt

Si vous avez besoin d'une méthode réutilisable pour ajouter du texte, vous pouvez créer un nouveau Style/ControlTemplate doté d'un TextBlock supplémentaire pour afficher le texte. Vous pouvez pirater la propriété jointe TextSearch.Text pour définir le texte dans une barre de progression. 

S'il n'a pas besoin d'être réutilisable, il suffit de placer la barre de progression dans une grille et d'ajouter un TextBlock à la grille. Puisque WPF peut composer des éléments ensemble, cela fonctionnera bien.

Si vous le souhaitez, vous pouvez créer un contrôle UserControl qui expose ProgressBar et TextBlock en tant que propriétés publiques. Il serait donc moins fastidieux de créer un ControlTemplate personnalisé.

28
Abe Heidebrecht

Les deux réponses précédentes (création d'une nouvelle CustomControl ou d'une Adorner) sont de meilleures pratiques, mais si vous voulez juste faire vite et bien (ou comprendre visuellement comment le faire), alors ce code fonctionnera:

<Grid Width="300" Height="50">  
   <ProgressBar Value="50" />
   <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
      My Text
   </TextBlock>
</Grid>

N'oubliez pas que l'indice z est tel que le dernier élément de la liste sera au premier plan.

De plus, si vous n’avez pas encore Kaxaml , assurez-vous de le récupérer. C’est formidable de jouer avec XAML lorsque vous essayez de comprendre.

55
SmartyP

Cela peut être très simple (sauf s’il existe de nombreux moyens de le faire fonctionner).

Vous pouvez utiliser Style pour le faire ou simplement superposer une TextBlock et une ProgressBar

Personnellement, je l'utilise pour montrer le pourcentage d'avancement lorsque nous attendons l'achèvement.

Pour rester très simple, je voulais seulement avoir unBinding seulement, j'ai donc attaché le TextBock.Text au ProgressBar.Value.

Ensuite, copiez simplement le code pour le faire.

<Grid>
   <ProgressBar Minimum="0" 
                Maximum="100" 
                Value="{Binding InsertBindingHere}" 
                Name="pbStatus" />
   <TextBlock Text="{Binding ElementName=pbStatus, Path=Value, StringFormat={}{0:0}%}" 
           HorizontalAlignment="Center" 
           VerticalAlignment="Center" />
</Grid>

Voici à quoi cela pourrait ressembler:

 enter image description here

Consultez Tutoriel WPF pour le post complet. 

27
Felix D.

Vous pouvez utiliser un Adorner pour afficher du texte par-dessus.

Voir Article de MSDN sur les ornements

Vous créez une classe qui hérite de la classe Adorner. Remplacez la méthode OnRender pour dessiner le texte souhaité. Si vous le souhaitez, vous pouvez créer une propriété de dépendance pour votre Adorner personnalisé, contenant le texte que vous souhaitez afficher. Utilisez ensuite l'exemple du lien que j'ai mentionné pour ajouter cet Adorner à la couche adorner de votre barre de progression.

5
Bob Wintemberg

Cliquez avec le bouton droit sur ProgressBar, puis cliquez sur Modifier le modèle> Modifier une copie.

Ensuite, placez TextBlock comme indiqué ci-dessous juste au-dessus de la balise de fermeture de Grid dans le style généré par VS.

   <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
   <TextBlock Background="Transparent" Text="work in progress" Foreground="Black" TextAlignment="Center"/>
 </Grid>
 <ControlTemplate.Triggers>
1
AnjumSKhan

ProgressBar avec du texte et une liaison à partir de 2 propriétés (valeur/valeur maximale):

<Grid>
    <ProgressBar Name="pbUsrLvl"
                 Minimum="1" 
                 Maximum="99" 
                 Value="59" 
                 Margin="5"  
                 Height="24"  Foreground="#FF62FF7F"/>
    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock.Text>
            <MultiBinding StringFormat="{}UserLvl:{0}/{1}">
                <Binding Path="Value" ElementName="pbUsrLvl" />
                <Binding Path="Maximum" ElementName="pbUsrLvl" />
            </MultiBinding>
        </TextBlock.Text>
    </TextBlock>
</Grid>

Rezult:

 enter image description here


Le même mais avec% de progrès:

<Grid>
    <ProgressBar Name="pbLifePassed"
                 Minimum="0" 
                 Value="59" 
                 Maximum="100"
                 Margin="5" Height="24" Foreground="#FF62FF7F"/>
    <TextBlock Text="{Binding ElementName=pbLifePassed, Path=Value, StringFormat={}{0:0}%}" 
           HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>

 enter image description here

0
Andrew