Displaying Progress Text in UWP Progress Bar (SfProgressBar)

18 Feb 20252 minutes to read

SfProgressBar can display either Value or Percentage or Custom Text as display content using the property DisplayContentMode. The values of DisplayContentMode are

  • None
  • Value
  • Percentage
  • Custom

Showing Value as Display Text

SfProgressBar can display Value as display content by set the property DisplayContentMode to Value.

<notification:SfProgressBar x:Name="progressBar" DisplayContentMode="Value"  />
progressBar.DisplayContentMode = DisplayContentMode.Value;

Displaying-Progress-Text-img1

The above code displays the Value as display content.

Showing Percentage as Display Text

SfProgressBar can display Percentage as display content by set the property DisplayContentMode to Percentage.

<notification:SfProgressBar x:Name="progressBar" DisplayContentMode="Percentage"  />
progressBar.DisplayContentMode = DisplayContentMode.Percentage;

Displaying-Progress-Text-img2

The above code displays the computed Percentage value as display content.

Showing Custom Content as Display Text

SfProgressBar can display Custom Text as display content by set the property DisplayContentMode to Custom.

<notification:SfProgressBar x:Name="progressBar" DisplayContentMode="Custom" CustomContent="Loading.." />
progressBar.DisplayContentMode = DisplayContentMode.Custom;

Displaying-Progress-Text-img3

The above code displays the custom content as display content.

Disabling the Display Text

SfProgressBar display content can be disabled by set the property DisplayContentMode to None.

<notification:SfProgressBar x:Name="progressBar" DisplayContentMode="None"  />
progressBar.DisplayContentMode = DisplayContentMode.None;

Displaying-Progress-Text-img4

The above code displays nothing in display content.

Customizing the Display Content

DisplayContentStyle property is used to customize the display content. It can be set as follows:

<notification:SfProgressBar Value="50" DisplayContentMode="Percentage">

<notification:SfProgressBar.DisplayContentStyle>

<Style TargetType="ContentControl">

<Setter Property="Foreground" Value="Red"/>

</Style>

</notification:SfProgressBar.DisplayContentStyle>

</notification:SfProgressBar>

Displaying-Progress-Text-img5