it-swarm.it

Testo su un ProgressBar in WPF

Questo può essere un gioco da ragazzi per gli esperti di WPF, ma mi piacerebbe sapere se c'è un modo semplice per mettere il testo sulla ProgressBar di WPF. Per me, una barra di progresso vuota sembra nuda. Quello è lo schermo immobiliare che potrebbe portare un messaggio su cosa è in corso, o anche solo aggiungere numeri alla rappresentazione. Ora, WPF è tutto basato su contenitori ed estensioni e sto lentamente avvolgendo la mia mente intorno a questo, ma poiché non vedo una proprietà "Testo" o "Contenuto", penso che dovrò aggiungere qualcosa al contenitore che è la mia barra di avanzamento. C'è una tecnica o due là fuori che è più naturale di quanto lo saranno i miei impulsi WinForms originali? Qual è il modo migliore e più WPF-naturale per aggiungere del testo a quella barra di avanzamento?

49
Jacob Proffitt

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

Se non ha bisogno di essere riutilizzabile, basta mettere la barra di avanzamento in una griglia e aggiungere un TextBlock alla griglia. Dal momento che WPF può comporre insieme elementi, questo funzionerà bene.

Se lo desideri, puoi creare un controllo utente che espone ProgressBar e TextBlock come proprietà pubbliche, quindi sarebbe meno utile rispetto alla creazione di un oggetto personalizzato ControlTemplate.

28
Abe Heidebrecht

Entrambe le risposte precedenti (la creazione di un nuovo CustomControl o Adorner) sono best practice, ma se vuoi solo 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 cima.

Inoltre, se non hai Kaxaml ancora, assicurati di prenderlo - è fantastico giocare con XAML quando stai cercando di capire le cose.

55
SmartyP

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

È possibile utilizzare Style per ottenere questo risultato o semplicemente sovrapporre un TextBlock e un ProgressBar

Io personalmente uso questo per mostrare la percentuale dei progressi in attesa del completamento.

Per mantenere tutto molto semplice, volevo solo oneBinding solo, quindi ho allegato TextBock.Text a ProgressBar.Value.

Quindi basta copiare 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 essere:

enter image description here

Scopri WPF Tutorial per il post completo. 

27
Felix D.

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

Vedi Articolo MSDN su Adorners

Dovresti creare una classe che eredita dalla classe Adorner. Sostituisci il metodo OnRender per disegnare il testo che desideri. Se vuoi, puoi creare una proprietà di dipendenza per il tuo Adorner personalizzato che contiene il testo che desideri visualizzare. Quindi usa l'esempio nel link che ho menzionato per aggiungere questo Adorner al livello di adorner della barra di avanzamento.

5
Bob Wintemberg

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

Quindi inserisci TextBlock come mostrato sotto 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>
1
AnjumSKhan

ProgressBar con Text and Binding di 2 Properties (Value/Maximum value):

<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


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>

 enter image description here

0
Andrew