it-swarm-pt.tech

Texto em uma barra de progresso no WPF

Isso pode ser óbvio para os cognoscenti do WPF, mas gostaria de saber se há uma maneira simples de colocar texto na barra de progresso do WPF. Para mim, uma barra de progresso vazia parece nua. Isso é tela real estate que poderia levar 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 me envolvendo nisso, mas como não vejo uma propriedade "Texto" ou "Conteúdo", estou pensando em adicionar algo para o contêiner que é minha barra de progresso. Existe uma técnica ou duas por aí que é mais natural do que meus impulsos WinForms originais serão? Qual é a melhor maneira, a maioria natural do WPF para adicionar texto a essa barra de progresso?

49
Jacob Proffitt

Se você precisar ter 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 seqüestrar 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 você quiser, você pode criar um UserControl que expõe ProgressBar e TextBlock como propriedades públicas, portanto, seria menos trabalho do que criar um ControlTemplate personalizado.

28
Abe Heidebrecht

Ambas as respostas anteriores (criando um novo CustomControl ou um Adorner) são melhores práticas, mas se você quer apenas rápido e sujo (ou para entender visualmente como fazê-lo), então este código funcionaria:

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

Apenas tenha em mente que o z-index é tal que o último item listado estará no topo.

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

55
SmartyP

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

Você poderia usar Style para fazer isso ou apenas sobrepor TextBlock e ProgressBar

Eu pessoalmente uso isso para mostrar a porcentagem do progresso ao esperar pela conclusão.

Para simplificar, eu só queria ter one Binding apenas, Então eu anexei o TextBock.Text ao ProgressBar.Value.

Então, basta copiar o código para fazê-lo.

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

Aqui está como isso poderia parecer:

enter image description here

Confira o tutorial WPF para o post completo. 

27
Felix D.

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

Veja artigo do MSDN sobre Adorners

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

5
Bob Wintemberg

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

Em seguida, coloque o TextBlock, conforme mostrado abaixo, logo acima da marca 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>
1
AnjumSKhan

ProgressBar com texto e vinculaçã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>

Rezult:

enter image description here


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>

enter image description here

0
Andrew