Texte sur une barre de progression dans WPF

Question

C’est peut-être une évidence pour le centre de recherches WPF, mais j'aimerais savoir s’il existe un moyen simple de mettre un texte sur la barre de progression WPF. Pour moi, une barre de progression vide est nue. Il s’agit d’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 je ne vois pas de "texte". ou " Contenu " propriété, 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?

Answer 1

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

S'il n'est pas nécessaire qu'il soit réutilisable, placez simplement la barre de progression dans une grille et ajoutez un TextBlock à la grille. WPF pouvant composer des éléments ensemble, cela fonctionnera sans problème.

Si vous le souhaitez, vous pouvez créer un contrôle UserControl qui expose les propriétés ProgressBar et TextBlock en tant que propriétés publiques. La tâche nécessiterait donc moins de travail que la création d'un ControlTemplate personnalisé.

Answer 2

Les deux réponses précédentes (création d'un nouveau CustomControl ou d'un Adorner ) sont de bonnes pratiques, mais si vous voulez simplement faire vite et bien (ou comprendre visuellement comment faites-le) alors ce code fonctionnerait:

<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 répertorié sera au premier plan.

En outre, si vous n'avez pas encore Kaxaml , assurez-vous de le récupérer, il est génial. pour jouer avec XAML lorsque vous essayez de comprendre les choses.

Answer 3

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

Vous pouvez utiliser Style pour cela ou simplement superposer un TextBlock et un ProgressBar .

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

  

Pour que ce soit très simple, je souhaitais uniquement disposer de un Binding ,   j'ai donc attaché le TextBock.Text au ProgressBar.Value .

; nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; ; n ° s terminé.

<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>

; nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; ; nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; strong> Voici à quoi cela pourrait ressembler:

; nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; ; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;

Consultez le didacticiel WPF pour consulter l'intégralité du message.

Answer 4

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

Voir article de MSDN sur Adorners

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. Ensuite, utilisez l’exemple du lien que j’ai mentionné pour ajouter cet Adorner à la couche adorner de votre barre de progression.

Answer 5

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

Placez ensuite le TextBlock comme indiqué ci-dessous, juste au-dessus de la balise de fermeture de la Grille 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>

Answer 6

Barre de progression avec texte et liaison parmi 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:

Identique 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>