Texto en una barra de progreso en WPF

Question

Esto puede ser una obviedad para los conocedores de WPF, pero me gustaría saber si hay una manera sencilla de poner texto en WPF ProgressBar.Para mí, una barra de progreso vacía parece desnuda.Ese es el espacio en pantalla que podría transmitir un mensaje sobre qué está en progreso, o incluso simplemente agregar números a la representación.Ahora, WPF tiene que ver con contenedores y extensiones y poco a poco estoy entendiendo eso, pero como no veo una propiedad "Texto" o "Contenido", estoy pensando que tendré que agregar algo. al contenedor que es mi barra de progreso.¿Existe alguna técnica o dos que sean más naturales que mis impulsos originales de WinForms?¿Cuál es la forma mejor y más natural de WPF de agregar texto a esa barra de progreso?

Answer 1

Si necesita tener un método reutilizable para agregar texto, puede crear un nuevo Estilo/Plantilla de control que tenga un TextBlock adicional para mostrar el texto.Puede secuestrar la propiedad adjunta TextSearch.Text para configurar el texto en una barra de progreso.

Si no es necesario que sea reutilizable, simplemente coloque la barra de progreso en una cuadrícula y agregue un bloque de texto a la cuadrícula.Dado que WPF puede componer elementos juntos, esto funcionará bien.

Si lo desea, puede crear un UserControl que exponga ProgressBar y TextBlock como propiedades públicas, por lo que sería menos trabajo que crear un ControlTemplate personalizado.

Answer 2

Ambas respuestas anteriores (crear una nueva CustomControl o un Adorner) son mejores prácticas, pero si solo quieres algo rápido y sencillo (o entender visualmente cómo hacerlo), entonces este código funcionaría:

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

Sólo tenga en cuenta que el índice z es tal que el último elemento enumerado estará en la parte superior.

Además, si no tienes Kaxaml aún así, asegúrate de utilizarlo: es excelente para jugar con XAML cuando intentas resolver cosas.

Answer 3

Esto puede ser muy simple (a menos que haya muchas maneras de hacer que esto funcione).

Podrías usar Style para hacer esto o simplemente superponer un TextBlock y un ProgressBar.

Yo personalmente uso esto para mostrar el porcentaje de progreso cuando espero que se complete.

Para hacerlo muy simple sólo quería tener uno Binding Solo, así que adjunté el TextBock.Text hacia ProgressBar.Value.

                                           Luego simplemente copie el Código para hacerlo.

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

                                                Así es como podría verse esto:

                                   

Verificar Tutorial de WPF para la publicación completa.

Answer 4

Podrías usar un Adorner para mostrar texto encima.

Ver Artículo de MSDN sobre adornos

Crearía una clase que hereda de la clase Adorner.Anule el método OnRender para dibujar el texto que desee.Si lo desea, puede crear una propiedad de dependencia para su Adorner personalizado que contenga el texto que desea mostrar.Luego use el ejemplo en el enlace que mencioné para agregar este Adorno a la capa de adorno de su barra de progreso.

Answer 5

Botón derecho del ratón ProgressBar, y haga clic en Editar plantilla > Editar una copia.

Luego pon el TextBlock como se muestra a continuación, justo encima de la etiqueta de cierre de Grid en el Estilo generado por 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 texto y enlace de 2 propiedades ( Valor/Valor máximo ):

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

Resultado:

---

lo mismo pero con % de avance :

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