Data See, Data Do

Mike Hillberg's Blog on Wpf and Silverlight

Two ProgressBar Tricks

Two ProgressBar Tricks

Rate This
  • Comments 4

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:

 

Attachment: Loading.jpg (8857 bytes)

 

 

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>

 

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

  • Thanks, that did the trick for me.

  • 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

  • Great article!

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

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

Page 1 of 1 (4 items)
Leave a Comment
  • Please add 4 and 4 and type the answer here:
  • Post