locked
How can I create a ProgressBar with a TextBlock in it (UserControl)? RRS feed

  • Question

  • Hello!

    I would like to create a Progressbar with a TextBlock in it, which is in the middle of the Progressbar, but how can I do that? At the moment, I have several controls and not one control for that. So, that I have a Progressbar and place a Textblock-Control over it, but when I shrink the Progressbar, the TextBlock isn't understandably in the middle of my Progressbar anymore.


    Thank you in advance for your answers!

    Best Regards

    DellaRocco

    Wednesday, July 6, 2011 6:33 PM

Answers

All replies

  • Here are the tuturial

    http://asimsajjad.blogspot.com/2010/06/silverlight-progress-bar.html

    here you can find different color and type of progress bar

    Wednesday, July 6, 2011 8:28 PM
  • Hi,

    Put your Textbloxk here inside this Grid:

    <!-- Beginning of Determinate Progress Bar Visuals-->
                              <Grid x:Name="DeterminateRoot" Margin="1" >
    <TextBlock Text="My Text" HorizontalAlignment="Center" width="100" />                             

    <!--Background -->
                                  <Rectangle HorizontalAlignment="Left" x:Name="ProgressBarIndicator" Margin="{TemplateBinding BorderThickness}" StrokeThickness="0.5" RadiusX="1.5" RadiusY="1.5" Fill="{TemplateBinding Foreground}"/>
                              </Grid>

    You will find this code in silverlight progress bar's default Style in msdn. Here's that link:

    http://msdn.microsoft.com/en-us/library/dd334413(v=vs.95).aspx

    Let me know if this one has solved your problem. Actually it will do!! :)

    Friday, July 8, 2011 12:44 AM
  • Hello!

    I put my TextBlock inside the Grid "DetermineRoot" now! But I must set the or update the Text in Csharp-code later. How can I get an access to my TextBlock-Control "txtbStatusText" in code, so that I can change the Text-Property of that control?

    Here is my snippet of my Style:

    <Grid x:Name="DeterminateRoot" Margin="1">
    	<Rectangle x:Name="ProgressBarIndicator" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Left" Margin="{TemplateBinding BorderThickness}" RadiusY="1.5" RadiusX="1.5" StrokeThickness="0.5"/>
    	<TextBlock x:Name="txtbStatusText" Text="5 of 20" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Black" FontWeight="Bold" FontFamily="Arial" FontSize="11"/>
    </Grid>



    Best Regards

    DellaRocco

    Friday, July 8, 2011 8:58 AM
  • You can use dependency property or attached property to bind the text of the progress bar, dependency property/attached properties can be from C# or from xaml end and bind that dependency / attached property to text property of the textblock inside the progress bar

    Monday, July 11, 2011 12:56 AM
  • You can see the following links

    http://forums.silverlight.net/forums/p/54784/141252.aspx

    or you can use databinding to bind the text property inside progress bar see the link below

    http://forums.silverlight.net/forums/p/163280/368266.aspx

    Monday, July 11, 2011 12:58 AM
  • Thank you for your answer!

    I get the TextBlock-Control in codebehind with the code from the following link:

    http://forums.silverlight.net/forums/p/167123/376935.aspx


    But I have one more question: How can I change the Foregroundcolor of the TextBlock-Text to black, without changing the standardcolor of the progressbar? Because, when I delete the Fill-Property of the Rectangle (ProgressBarIndicator), then I can change the ForegroundColor of my TextBlock, but I want to keep the standardlook of the Progressbar!

    Here is the snippet from my style:

    <Grid x:Name="DeterminateRoot" Margin="1">
            <Rectangle x:Name="ProgressBarIndicator" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Left" Margin="{TemplateBinding BorderThickness}" RadiusY="1.5" RadiusX="1.5" StrokeThickness="0.5"/>
            <TextBlock x:Name="txtbStatusText" Text="5 of 20" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Black" FontWeight="Bold" FontFamily="Arial" FontSize="11"/>
    </Grid>




    Thank you!

    Best Regards

    DellaRocco



    Monday, July 11, 2011 8:38 AM
  • But I have one more question: How can I change the Foregroundcolor of the TextBlock-Text to black, without changing the standardcolor of the progressbar? Because, when I delete the Fill-Property of the Rectangle (ProgressBarIndicator), then I can change the ForegroundColor of my TextBlock, but I want to keep the standardlook of the Progressbar!

    you can change the color of the found textBlock in code behind it will only change color of that instance

    Monday, July 11, 2011 8:50 AM
  • Hello!

    I have set the Foreground of the Textblock to black in codebehind, but the foreground doesn't change to black. It has still the same foreground as before.

    private void button1_Click(object sender, RoutedEventArgs e)
            {
                var ctrl = MyVisualTreeHelper.SearchFrameworkElement(prbStatus, "txtbStatusText");
    
                ((TextBlock)ctrl).Text = "New Status";
                ((TextBlock)ctrl).Foreground = new SolidColorBrush(Colors.Black);
                ((TextBlock)ctrl).FontSize = 16;
            }




    Have you any other idea?


    Thank you for your answer!


    Best Regards

    DellaRocco

    Monday, July 11, 2011 7:30 PM
  • Hi,

    I would like to create a Progressbar with a TextBlock in it

    I would like to suggest you to check the links below for some similar threads which provide some solutions for the same issue.

    how to show text(like 50%) on progress bar

    Customize Progress Bar with Percentage Text

    But I have one more question: How can I change the Foregroundcolor of the TextBlock-Text to black, without changing the standardcolor of the progressbar?

    Here is an article which describes about text formatting with the TextBlock control. Please check it and see whether it helps.

    http://blogs.silverlight.net/blogs/msnow/archive/2008/09/24/silverlight-tip-of-the-day-45-text-formatting-with-the-textblock-control.aspx

    Hope it can help you.

    Tuesday, July 12, 2011 2:36 AM