By default, the progress indicator will fill the track starting from the left side of the control. The fill direction can be changed to fill from the right, bottom, or top by setting one property: FillDirection. In this topic, you will set the FillDirection property in Design view, in Source view, and in code.

Changing the Fill Direction in Design View

Complete the following steps:

1. Click the Design button to enter Design view.
2. Right-click the C1ProgressBar control to open its context menu and select Properties. The Properties window opens with the C1ProgressBar control's properties in focus.
3. In the Properties window, set the FillDirection property. For this example, set the property to West.

Changing the Fill Direction in Source View

Complete the following steps:

1. Click the Source button to enter Source view.
2. Add FillDirection="West" to C1ProgressBar's tag so that the markup resembles the following:
   <cc1:C1ProgressBar ID="C1ProgressBar1" runat="server" FillDirection = "West" Value="100" AnimationDuration="6000"/>

Changing the Fill Direction in Code

Complete the following steps:

1. On the Visual Studio toolbar, click View | Code to enter code view.
2. Import the following namespace into your project:

   Visual Basic

   Visual Basic	Copy Code
   Imports C1.Web.Wijmo.Controls.C1ProgressBar

   C#

   C#	Copy Code
   using C1.Web.Wijmo.Controls.C1ProgressBar;

3. Add the following code to the Page_Load event:

   Visual Basic

   Visual Basic	Copy Code
   'Set the FillDirection property to FromRightOrBottom C1ProgressBar1.FillDirection = FillDirection.West

   C#

   C#	Copy Code
   // Set the FillDirection property to FromRightOrBottom C1ProgressBar1.FillDirection = FillDirection.West;