Two ProgressBar Tricks


Here’s a couple of handy ProgressBar tricks …


 


The first trick is to use a negative Minimum value, so that as soon as a ProgressBar starts, you give the user the visual feel that the progress has already begun.  This is especially useful if, in your scenario, it takes a couple of seconds to get the Value moving.  So simply:


 


<ProgressBar Minimum=-10 />


 


 


The second trick allows you to get text or other content overlaid on top of a ProgressBar, which is a look you see a lot of nowadays.  All you need to do is put the ProgressBar and text in the same cell of a Grid, causing them to render on top of each other.  And if you put the text in a ViewBox to stretch it as necessary, everyone will size appropriately to whatever size the Grid is.


 


For example, this markup:


 


<Page xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation


    xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml >


 


  <Grid Height=100 Width=500>


   


    <!– Hard-code the Value to 50 for demonstration –>


    <ProgressBar Value=50 />


   


    <Viewbox>


      <TextBlock Text=Loading …/>


    </Viewbox>


  </Grid>


 


</Page>


 


… produces this look:


 


[ImageAttachment]


 


 


With a little more work, you can modify this so that the text changes itself when progress is complete.  E.g., make the ProgressBar show “Loading …” until it’s finished, then change the text to “Complete”.  Here’s an example.  (For convenience of trying this out, I also added a Loaded animation on the ProgressBar.Value, so that you can simply load it into IE or XamlPad and see it run.):


 


<Page xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation


    xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml >


 


  <!– For demonstration purposes, animate ProgressBar.Value –>


  <Page.Triggers>


    <EventTrigger RoutedEvent=Page.Loaded>


      <BeginStoryboard>


        <Storyboard TargetName=ProgressBar TargetProperty=Value>


          <DoubleAnimation From=0 To=100 Duration=0:0:1 />


        </Storyboard>


      </BeginStoryboard>


    </EventTrigger>


  </Page.Triggers>


 


  <Grid >


    <ProgressBar Name=ProgressBar />


 


    <Viewbox>


      <TextBlock>


        <TextBlock.Style>


          <Style TargetType=TextBlock>


 


            <!– Make the text “Loading …” by default–>


            <Setter Property=Text Value=Loading … />


           


            <!– But when ProgressBar.Value is 100, change the text to “Complete” –>


            <Style.Triggers>


              <DataTrigger Binding={Binding Value, ElementName=ProgressBar} Value=100>


                <Setter Property=Text Value=Complete />


              </DataTrigger>


            </Style.Triggers>


          </Style>


        </TextBlock.Style>


      </TextBlock>



    </Viewbox>


  </Grid>


 


</Page>


 

Loading.jpg

Comments (4)

  1. Jivemasta says:

    I used a similar method to recreate the progressbar under a textbox or combobox, like in the explorer windows and beta IE7.

  2. eddnerd says:

    Thanks, that did the trick for me.

  3. Ruben Hakopian says:

    Hi Mike,

    This is a nice trick. However, I think it will be preferable if label is the part of ProgressBar control instead of having it overlayed. In a complex application it will be hard to maintain the design. ControlTemplate might be a nice place to hold your label.

    Cheers,

    Ruben

  4. Jürgen says:

    Great article!

    Here you find another nice article about how to implement a WPF progress dialog:

    http://www.parago.de/…/how-to-implement-a-modern-progress-dialog-for-wpf-applications