# Display Text

## Content



The ProgressBar allows to show a text representation of the progress in the progress bar. This can be accomplished by using the ProgressBar control and the TextBlock within the same Grid, without specifying a row or column. This can render the TextBlock control on top of ProgressBar, as the TextBlock has a transparent background by default.

![Progressbar showing 70% completed status.](https://cdn.mescius.io/document-site-files/images/0fd6e12b-d324-40d6-9d0f-d56e7bea0ba7/images/progressbar-textblock.png)

The code snippet below depicts how a user can show text over the ProgressBar indicator by binding the **Text** property of the TextBlock with the ProgressBar element and its Value property.

```xml
<Grid>
   <c1:C1ProgressBar Minimum="0" Maximum="100" Value="70" Name="pbStatus" />
        <TextBlock Text="{Binding ElementName=pbStatus, Path=Value, StringFormat={}{0:0}% completed}" Foreground="White" FontWeight="Bold" FontSize="14" HorizontalAlignment="Left" VerticalAlignment="Top" />
</Grid>
```

The user can change the background of the TextBlock control and customize the look of the ProgressBar:

![Progressbar showing 70% completed status with white background textblock](https://cdn.mescius.io/document-site-files/images/0fd6e12b-d324-40d6-9d0f-d56e7bea0ba7/images/progressbar-displaytext.png)

```xml
<Grid>          
   <c1:C1ProgressBar Minimum="0" Maximum="100" Value="70" Name="pbStatus"/>
        <TextBlock Text="{Binding ElementName=pbStatus, Path=Value, StringFormat={}{0:0}% completed}" Foreground="Black" FontWeight="Bold" FontSize="14" Background="White" HorizontalAlignment="Left" VerticalAlignment="Center"/>
    </Grid>
```