#1,160 – Adding a Text Label to the Circular Progress Control
September 17, 2014 3 Comments
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.
<StackPanel> <Grid> <loc:CircularProgress x:Name="circProg" Value="{Binding PctComplete}" Height="100" Width="100" Margin="5" HorizontalAlignment="Center"/> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="36" Foreground="DarkGray" Text="{Binding ElementName=circProg, Path=Value}" /> </Grid> <ProgressBar x:Name="prog2" Maximum="100" Value="{Binding PctComplete}" Height="25" Margin="10"/> <Button Content="Start Timer" Click="Button_Click" HorizontalAlignment="Center" Padding="12,7"/> </StackPanel>