Testo su una ProgressBar in WPF

Question

Questo potrebbe essere un gioco da ragazzi per gli esperti di WPF, ma mi piacerebbe sapere se esiste un modo semplice per inserire testo nella ProgressBar di WPF.Per me, una barra di avanzamento vuota sembra nuda.Questo è lo spazio sullo schermo che potrebbe portare un messaggio Che cosa è in corso, o anche solo aggiungere numeri alla rappresentazione.Ora, WPF è incentrato su contenitori ed estensioni e ci sto lentamente pensando, ma poiché non vedo una proprietà "Testo" o "Contenuto", penso che dovrò aggiungere qualcosa al contenitore che è la mia barra di avanzamento.Esistono una o due tecniche là fuori che sono più naturali dei miei impulsi originali di WinForms?Qual è il modo migliore e più naturale per WPF per aggiungere testo alla barra di avanzamento?

Answer 1

Se è necessario disporre di un metodo riutilizzabile per aggiungere testo, è possibile creare un nuovo Style/ControlTemplate con un TextBlock aggiuntivo per visualizzare il testo.Puoi dirottare la proprietà associata TextSearch.Text per impostare il testo su una barra di avanzamento.

Se non è necessario che sia riutilizzabile, inserisci semplicemente la barra di avanzamento in una griglia e aggiungi un TextBlock alla griglia.Poiché WPF può comporre elementi insieme, funzionerà bene.

Se lo desideri, puoi creare un UserControl che esponga ProgressBar e TextBlock come proprietà pubbliche, quindi sarebbe meno lavoro rispetto alla creazione di un ControlTemplate personalizzato.

Answer 2

Entrambe le risposte precedenti (creazione di un nuovo CustomControl o un Adorner) sono pratiche migliori, ma se vuoi semplicemente essere veloce e sporco (o capire visivamente come farlo), allora questo codice funzionerebbe:

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

Tieni presente che lo z-index è tale che l'ultimo elemento elencato sarà in primo piano.

Inoltre, se non ne hai Kaxaml tuttavia, assicurati di prenderlo in mano: è fantastico per giocare con XAML quando stai cercando di capire le cose.

Answer 3

Questo può essere molto semplice (a meno che non ci siano molti modi per farlo funzionare).

Potresti usare Style per farlo o semplicemente sovrapponi a TextBlock e un ProgressBar.

Personalmente lo uso per mostrare la percentuale di progresso in attesa del completamento.

Per mantenerlo molto semplice, volevo solo averlo uno Binding Solo, quindi ho allegato il TextBock.Text al ProgressBar.Value.

                                           Quindi copia semplicemente il codice per farlo.

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

                                                Ecco come potrebbe apparire:

                                   

Guardare Esercitazione WPF per il post completo.

Answer 4

Potresti usare un Adorner per visualizzare il testo sopra di esso.

Vedere Articolo MSDN sugli Adorner

Creeresti una classe che eredita dalla classe Adorner.Sostituisci il metodo OnRender per disegnare il testo che desideri.Se lo desideri, puoi creare una proprietà di dipendenza per il tuo Adorner personalizzato che contenga il testo che desideri visualizzare.Quindi utilizza l'esempio nel collegamento che ho citato per aggiungere questo Adorner al livello Adorner della barra di avanzamento.

Answer 5

Fare clic con il tasto destro ProgressBar, e fare clic su Modifica modello > Modifica una copia.

Quindi metti il TextBlock come mostrato di seguito appena sopra il tag di chiusura di Grid nello stile generato da 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

ProgressBar con testo e rilegatura da 2 proprietà ( Valore/Valore massimo ):

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

Risultato:

---

Lo stesso ma con% di progresso :

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