Try it: Customize the progress indicator of a SimpleProgressBar

It is easy to customize the appearance of a progress indicator in Microsoft Expression Blend, by using the SimpleProgressBar control template. Note that the SimpleProgressBar only supports a horizontally orientated progress bar.

To customize the progress indicator of a SimpleProgressBar

1. Draw a SimpleProgressBar on the artboard in Expression Blend.

   Tip

   The simple style controls are available from the Simple Styles category of the Controls tab in the Asset Library. After you select a simple style control from the list, you can draw it on the artboard.

2. Right-click the progress bar under Objects and Timeline, point to Edit Control Parts (Template), and then click Edit Template. If you do not want to change the SimpleStyles.xaml resource dictionary, you can click Edit a Copy instead of Edit Template to create a new template and save it in the document. For more information about creating a copy, see Create a resource.

   Tip

   To exit the template-editing mode and return to the scope of your document: click the Scope up button , which is above the element tree in the Interaction panel. To return to template editing mode for an existing template: under Objects and Timeline, right-click the element whose template you want to edit, point to Edit Control Parts (Template), and then click Edit Template.

3. Under Objects and Timeline, right-click the PART_Indicator element, point to Change Layout Type, and then click Grid. Use your mouse on the artboard, or modify the Width property under Layout in the Properties panel, to increase the width of the PART_Indicator.

4. Double-click the PART_Indicator element under Objects and Timeline to make it active.

   You can now add child elements to the PART_Indicator element because it is active and because it is a Grid panel instead of a Border.

5. In the Toolbox, double-click the Ellipse tool to add a circle into the PART_Indicator element and fill it. You can see your circle if you change its width. Modify the color of the circle under Brushes in the Properties panel. Adjust the size of the circle by using the properties under Layout in the Properties panel. Make sure that the HorizontalAlignment property is set to Stretch.

6. If you want to apply a bitmap effect, click the Show Advanced Properties button for the Appearance category of the Properties panel, click the drop-down arrow next to the BitmapEffect property, and then select an effect such as Outer Glow.

7. In order to see your progress bar in action, you can add code to the code-behind file for your document. For example, if your document is named Window1.xaml, the code-behind file is Window1.xaml.cs or Window1.xaml.vb, depending on the programming language you selected when you created your project.

   Under Objects and Timeline, click the Scope Up button to return to the editing scope of your document, and then give your progress bar a name such as "ProgressBar1" (square brackets around the name indicate that an element has not been named).

8. Open the code-behind file from the Project panel, and add the following code. For information about how to open a code-behind file, see Edit a code-behind file.

     // Insert code required on object creation below this point.   
       Duration duration = new Duration(System.TimeSpan.FromSeconds(10));
       DoubleAnimation doubleanimation = new DoubleAnimation(ProgressBar1.Maximum, duration);
       ProgressBar1.BeginAnimation(ProgressBar.ValueProperty, doubleanimation); 
   

   ' Insert code required on object creation below this point.
       Dim duration As New Duration(System.TimeSpan.FromSeconds(10))
       Dim doubleanimation As New DoubleAnimation(ProgressBar1.Maximum, duration)
       ProgressBar1.BeginAnimation(ProgressBar.ValueProperty, doubleanimation)
   

9. Test your application (F5) to see the effects.

See also

Concepts

SimpleProgressBar