By default, the progress indicator will fill the track starting from the left (if horizontal) or the top (if vertical) of the control. The fill direction can be set 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
To change the fill direction, 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, complete the following:
• Set the FillDirection property to FromRightOrBottom.
• Set the Value property to “100”. This will cause the progress indicator to fill the control at run time.
• Set the AnimationDuration property to “6000”. This will lengthen the progress indicator’s fill effect so that you won’t miss it at run time.
4. Press F5 to run the project and observe that the progress indicator starts to fill in the control from the right. If you want it to fill from the bottom, you can change the control’s Orientation property (see Changing the C1ProgressBar Orientation).
Changing the Fill Direction in Source View
To change the fill direction, complete the following steps:
1. Click the Source button to enter Source view.
2. Add FillDirection=“FromRightOrBottom”, Value=“100”, and AnimationDuration=”6000” to the <cc1:C1ProgressBar> tag so that the markup resembles the following:
<cc1:C1ProgressBar ID="C1ProgressBar2" runat="server"
FillDirection = “FromRightOrBottom" Value="100" AnimationDuration="6000"/>
The other two properties, Value and AnimationDuration, are being set so that you can see the effect of the orientation change at run time. Setting the Value property to 100 will cause the progress indicator to fill, and setting the AnimationDuration property to 6000 will lengthen the animation so that you don’t miss the fill effect.
3. Press F5 to run the project and observe that the progress indicator starts to fill in the control from the right. If you want it to fill from the bottom, you can change the control’s Orientation property (see Changing the C1ProgressBar Orientation).
Changing the Fill Direction in Code
To change the fill direction, 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:
Imports C1.Web.UI.Controls.C1ProgressBar
• C#
using C1.Web.UI.Controls.C1ProgressBar;
3. Add the following code to the Page_Load event:
‘Set the FillDirection property to FromRightOrBottom
C1ProgressBar1.FillDirection = ProgressBarFillDirection.FromRightOrBottom
‘Lengthen the fill effect duration for run-time observance
C1ProgressBar1.AnimationDuration = 6000
‘Specify value so progress indicator will fill at run time
C1ProgressBar1.Value = 100
• C#
// Set the FillDirection property to FromRightOrBottom
C1ProgressBar1.FillDirection = ProgressBarFillDirection.FromRightOrBottom;
//Lengthen the fill effect duration for run-time observance
C1ProgressBar1.AnimationDuration = 6000;
//Specify value so progress indicator will fill at run time
C1ProgressBar1.Value = 100;
4. Press F5 to run the project and observe that the progress indicator starts to fill in the control from the right. If you want it to fill from the bottom, you can change the control’s Orientation property (see Changing the C1ProgressBar Orientation).
|
