Core Library for WPF | ComponentOne
Core Library / ProgressBar / Display Text
In This Topic
    Display Text
    In This Topic

    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.

    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.

    XAML
    Copy Code 
    <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

    XAML
    Copy Code 
    <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>