Custom Content

Updated on Sep 23, 2026

RadCircularProgressBar supports setting a complex structure of elements to the ContentTemplate property to represent the value set for the Content property. The Content property is of type object and can hold a value of any type.

Setting the Content and ContentTemplate properties

XAML

<telerik:RadCircularProgressBar Name="circularProgressBar" 
                                Value="75"
                                Maximum="100"
                                Content="{Binding ElementName=circularProgressBar, Path=Value}">
    <telerik:RadCircularProgressBar.ContentTemplate>
        <DataTemplate>
            <StackPanel Orientation="Vertical">
                <TextBlock Text="{Binding Path=., StringFormat={}{0}%}"
                   TextAlignment="Center"
                   FontSize="16"
                   FontWeight="SemiBold" 
                   Foreground="{Binding ElementName=circularProgressBar, Path=IndicatorFill}"/>
                <TextBlock Text="Completed" 
                   FontSize="16"
                   FontWeight="SemiBold" 
                   Foreground="{Binding ElementName=circularProgressBar, Path=IndicatorFill}"/>
            </StackPanel>
        </DataTemplate>
    </telerik:RadCircularProgressBar.ContentTemplate>
</telerik:RadCircularProgressBar>

Custom content with indeterminate state

XAML

<telerik:RadCircularProgressBar Value="75"
                                Maximum="100"
                                IsIndeterminate="True"
                                Content="In Progress">
    <telerik:RadCircularProgressBar.ContentTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}"
                       FontSize="16" 
                       FontWeight="SemiBold"
                       Foreground="{Binding ElementName=circularProgressBar, Path=IndicatorFill}"/>
        </DataTemplate>
    </telerik:RadCircularProgressBar.ContentTemplate>
</telerik:RadCircularProgressBar>

ContentStringFormat

RadCircularProgressBar allows you to set a string format to the ContentStringFormat property. This format will be applied to the Content property.

Custom ContentStringFormat

XAML

<telerik:RadCircularProgressBar Value="0.75"
                                Content="{Binding ElementName=circularProgressBar, Path=Value}" 
                                ContentStringFormat="p2"/>

Check this article for more information on the supported formats.

See Also

• Indeterminate State Animation Customization