#1,160 – Adding a Text Label to the Circular Progress Control

In an earlier post, we created a custom circular progress control, deriving from a Shape element.  Below, we add a text element in the middle of the progress arc to indicate % complete.  We could have also done this by building the text into the control itself.  But the approach shown below is an example of combining the progress control with a user-defined text label.

                Value="{Binding PctComplete}"
                Height="100" Width="100" Margin="5"
                FontSize="36" Foreground="DarkGray"
                Text="{Binding ElementName=circProg, Path=Value}" />
        <ProgressBar x:Name="prog2" Maximum="100"
                     Value="{Binding PctComplete}"
                     Height="25" Margin="10"/>
        <Button Content="Start Timer" Click="Button_Click"


About Sean
Software developer in the Twin Cities area, passionate about .NET technologies. Equally passionate about my own personal projects related to family history and preservation of family stories and photos.

3 Responses to #1,160 – Adding a Text Label to the Circular Progress Control

  1. Pingback: Dew Drop – September 18, 2014 (#1858) | Morning Dew

  2. srishti says:

    hy, how to i change the colors in this cirprog ? for ex. initially i want the cirprog to indicate yellow then green with progression.

    • Sean says:

      You can probably just set the Stroke property of the underlying Shape. Since you want to do this as progress changes, I’d look at using a data trigger.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: