Try it: Customize the progress indicator of a SimpleProgressBar style

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-oriented progress bar.

To customize the progress indicator of a SimpleProgressBar style

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

   Tip

   The simple style controls are available under Simple Styles in the Styles category of the Assets panel. After you select a simple style control from the list, you can draw it on the artboard.

2. Right-click the progress bar in the Objects and Timeline panel, point to Edit Template, and then click Edit Current. If you do not want to change the SimpleStyles.xaml resource dictionary, you can click Edit a Copy instead of Edit Current 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 Return scope to, which is above the object tree in the Objects and Timeline panel. To return to template editing mode for an existing template, in the Objects and Timeline panel, right-click the object whose template you want to edit, point to Edit Template, and then click Edit Current.

3. In the Objects and Timeline panel, right-click the PART_Indicator object, 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 object.

4. Click the PART_Indicator object in the Objects and Timeline panel to make it active.

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

5. In the Tools panel, double-click Ellipse to add a circle to the PART_Indicator object 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 an effect, click New next to the Effect property in the Appearance category of the Properties panel, and then select an effect.

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.

   In the Objects and Timeline panel, click Return scope to 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 object 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 Modify 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