Texto em um ProgressBar no WPF

Question

Isso pode ser óbvio para os conhecedores do WPF, mas gostaria de saber se existe uma maneira simples de colocar texto no ProgressBar do WPF.Para mim, uma barra de progresso vazia parece nua.Esse é um espaço na tela que pode transmitir uma mensagem sobre o que está em andamento, ou mesmo apenas adicionar números à representação.Agora, o WPF tem tudo a ver com contêineres e extensões e estou lentamente pensando nisso, mas como não vejo uma propriedade "Texto" ou "Conteúdo", estou pensando que terei que adicionar algo para o contêiner que é minha barra de progresso.Existe uma ou duas técnicas por aí que sejam mais naturais do que meus impulsos originais do WinForms?Qual é a maneira melhor e mais natural do WPF de adicionar texto a essa barra de progresso?

Answer 1

Se você precisar de um método reutilizável para adicionar texto, poderá criar um novo Style/ControlTemplate que tenha um TextBlock adicional para exibir o texto.Você pode sequestrar a propriedade anexada TextSearch.Text para definir o texto em uma barra de progresso.

Se não precisar ser reutilizável, basta colocar a barra de progresso em uma Grade e adicionar um TextBlock à grade.Como o WPF pode compor elementos juntos, isso funcionará bem.

Se desejar, você pode criar um UserControl que exponha ProgressBar e TextBlock como propriedades públicas, portanto, seria menos trabalhoso do que criar um ControlTemplate personalizado.

Answer 2

Ambas as respostas anteriores (criando um novo CustomControl ou um Adorner) são práticas recomendadas, mas se você quiser apenas algo rápido e sujo (ou entender visualmente como fazer isso), então este código funcionaria:

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

Lembre-se de que o índice z é tal que o último item listado ficará no topo.

Além disso, se você não tiver Kaxaml ainda assim, certifique-se de pegá-lo - é ótimo para brincar com XAML quando você estiver tentando descobrir as coisas.

Answer 3

Isso pode ser muito simples (a menos que haja muitas maneiras de fazer isso funcionar).

Você poderia usar Style para fazer isso ou você apenas sobrepõe um TextBlock e um ProgressBar.

Eu pessoalmente uso isso para mostrar a porcentagem do progresso enquanto aguardo a conclusão.

Para manter tudo muito simples, eu só queria ter um Binding apenas, então eu anexei o TextBock.Text para o ProgressBar.Value.

                                           Em seguida, basta copiar o código para fazer isso.

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

                                                Veja como isso poderia ser:

                                   

Confira Tutorial WPF para a postagem completa.

Answer 4

Você poderia usar um Adorner para exibir o texto por cima dele.

Ver Artigo do MSDN sobre adornos

Você criaria uma classe que herda da classe Adorner.Substitua o método OnRender para desenhar o texto desejado.Se desejar, você pode criar uma propriedade de dependência para seu adorno personalizado que contenha o texto que deseja exibir.Em seguida, use o exemplo no link que mencionei para adicionar este adorno à camada de adorno da sua barra de progresso.

Answer 5

Clique com o botão direito ProgressBar, e clique em Editar modelo > Editar uma cópia.

Então coloque o TextBlock como mostrado abaixo logo acima da tag de fechamento de Grid no estilo gerado pelo 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 com texto e ligação de 2 propriedades ( 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:

---

O mesmo, mas com % de 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>