web-development-kb-es.site

Texto en una barra de progreso en WPF

Esto puede ser una obviedad para WPF cognoscenti, pero me gustaría saber si hay una forma sencilla de poner texto en la barra de progreso de WPF. Para mí, una barra de progreso vacía se ve desnuda. Es un estado de la pantalla que puede transmitir un mensaje sobre qué está en curso, o incluso simplemente agregar números a la representación. Ahora, WPF tiene que ver con los contenedores y las extensiones, y poco a poco estoy pensando en eso, pero como no veo una propiedad de "Texto" o "Contenido", creo que tendré que agregar algo. al contenedor que es mi barra de progreso. ¿Hay una técnica o dos por ahí que sea más natural que mis impulsos originales de WinForms? ¿Cuál es la mejor forma, más natural de WPF, de agregar texto a esa barra de progreso?

.netwpfcontrolsprogress-bar
50
Jacob Proffitt

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

Si no necesita ser reutilizable, simplemente coloque la barra de progreso en una cuadrícula y agregue un TextBlock a la cuadrícula. Como WPF puede componer elementos juntos, esto funcionará bien.

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

28
Abe Heidebrecht

Las dos respuestas anteriores (la creación de un nuevo CustomControl o un Adorner) son mejores prácticas, pero si solo desea rápidas y sucias (o para entender visualmente cómo hacerlo), este código funcionaría:

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

Solo tenga en cuenta que el índice z es tal que el último elemento listado estará en la parte superior.

Además, si no tienes Kaxaml todavía, asegúrate de recogerlo; es genial para jugar con XAML cuando intentas resolver las cosas.

57
SmartyP

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

Puede usar Style para hacer esto o simplemente superponer TextBlock y ProgressBar.

Personalmente, uso esto para mostrar el porcentaje del progreso cuando espero que se complete.

Para hacerlo muy simple, solo quería tener uno Binding solo, así que conecté el TextBock.Text al 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:

enter image description here

Echa un vistazo a WPF Tutorial para la publicación completa.

28
Felix D.

Puedes usar un Adorner para mostrar el texto sobre él.

Ver artículo de MSDN sobre Adorners

Crearía una clase que hereda de la clase Adorner. Reemplace 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 Adornador a la capa de adorno de su barra de progreso.

5
Bob Wintemberg

Haga clic derecho en ProgressBar y haga clic en Editar plantilla> Editar una copia.

Luego, coloque el TextBlock como se muestra abajo justo arriba 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>
1
AnjumSKhan

Barra de progreso 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>

Rezult

enter image description here

Lo mismo pero con% de progreso :

<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