Step 2 of 3: Customizing C1LinearGauge's Appearance

In This Topic

In this step you'll customize the appearance of the C1LinearGauge control. The following steps assume you've completed Step 1 of 3: Adding C1LinearGauge to the Page topic and added a C1LinearGauge control to the page.

In Design View

Complete the following steps to customize the C1LinearGauge control in the Design View:

To set the Width and Height of the control:
1. Right click on the control and select Properties.
2. In the Property Window, expand the Options property.
3. Set the Width and Height of the control as per your choice.
To set the initial Value of the control:
1. Right click on the control and select Properties.
2. Expand the Behavior property.
3. Set the desired Value.
To change the appearance of the Face of the control:
1. Right-click the control and select Properties.
2. In the Properties Window, expand the Appearance Property.
3. Expand the Face Property.
4. Expand the FaceStyle property.
5. Expand the Fill Property.
6. Set the Color, ColorBegin, ColorEnd, Type and other such properties as desired to change the appearance of your gauge.

Note: You can set several other properties as desired to customize the appearance of your C1LinearGauge control under the FaceStyle property.

In Source View

Complete the following steps to customize the C1LinearGauge control in the Source View:

To set the Width and Height of the control, as well as the gauge's initial Value at run time, edit the <cc1:C1LinearGauge></cc1:C1LinearGauge> tag so it looks like the following:
To write code in Source View
```
<cc1:C1LinearGauge ID="C1LinearGauge1" runat="server" Width="400" Height="100" Value="50">
```

To change the appearance of the Face of the control, place your mouse between the <cc1:C1LinearGauge></cc1:C1LinearGauge> tags, and add the following markup:

    <Face>
       <FaceStyle Fill-LinearGradientAngle="270" Fill-ColorBegin="pink" Fill-ColorEnd="purple
       Fill-Type="LinearGradient" StrokeWidth="4"></FaceStyle>
    </Face>

Set the LinearGradientAngle, ColorBegin, ColorEnd, Type and StrokeWidth as desired, to customize the appearance of the C1LinearGauge control.

In Code

To set the Width, Height, Max, Min values and to customize the appearance of the C1LinearGauge control, add the following code to the Page_Load event:

Visual Basic	Copy Code
'Setting the minimum value for C1LinearGauge. C1LinearGauge1.Min = 10 'Setting the maximum value for C1LinearGauge. C1LinearGauge1.Max = 90 'Setting the height of C1LinearGauge. C1LinearGauge1.Height = 100 'Setting the width of C1LinearGauge. C1LinearGauge1.Width = 800 'Setting the begin color of C1LinearGauge fill. C1LinearGauge1.Face.FaceStyle.Fill.ColorBegin = System.Drawing.Color.Pink 'Setting the end color of C1LinearGauge fill. C1LinearGauge1.Face.FaceStyle.Fill.ColorEnd = System.Drawing.Color.Purple 'Setting the type of gradient for C1LinearGauge. C1LinearGauge1.Face.FaceStyle.Fill.Type = C1.Web.Wijmo.Controls.C1Chart.ChartStyleFillType.LinearGradient

Visual Basic

Copy Code

'Setting the minimum value for C1LinearGauge.
C1LinearGauge1.Min = 10
'Setting the maximum value for C1LinearGauge.
C1LinearGauge1.Max = 90
'Setting the height of C1LinearGauge.
C1LinearGauge1.Height = 100
'Setting the width of C1LinearGauge.
C1LinearGauge1.Width = 800
'Setting the begin color of C1LinearGauge fill.
C1LinearGauge1.Face.FaceStyle.Fill.ColorBegin = System.Drawing.Color.Pink
'Setting the end color of C1LinearGauge fill.
C1LinearGauge1.Face.FaceStyle.Fill.ColorEnd = System.Drawing.Color.Purple
'Setting the type of gradient for C1LinearGauge.
C1LinearGauge1.Face.FaceStyle.Fill.Type = C1.Web.Wijmo.Controls.C1Chart.ChartStyleFillType.LinearGradient

C#	Copy Code
//Setting the minimum value for C1LinearGauge. C1LinearGauge1.Min = 10; //Setting the maximum value for C1LinearGauge. C1LinearGauge1.Max = 90; //Setting the height of C1LinearGauge. C1LinearGauge1.Height = 100 //Setting the width of C1LinearGauge. C1LinearGauge1.Width = 800; //Setting the begin color of C1LinearGauge fill. C1LinearGauge1.Face.FaceStyle.Fill.ColorBegin = System.Drawing.Color.Pink; //Setting the end color of C1LinearGauge fill. C1LinearGauge1.Face.FaceStyle.Fill.ColorEnd = System.Drawing.Color.Purple; //Setting the type of gradient for C1LinearGauge. C1LinearGauge1.Face.FaceStyle.Fill.Type = C1.Web.Wijmo.Controls.C1Chart.ChartStyleFillType.LinearGradient;

Copy Code

//Setting the minimum value for C1LinearGauge.
C1LinearGauge1.Min = 10;

//Setting the maximum value for C1LinearGauge.
C1LinearGauge1.Max = 90;

//Setting the height of C1LinearGauge.
C1LinearGauge1.Height = 100

//Setting the width of C1LinearGauge.
C1LinearGauge1.Width = 800;

//Setting the begin color of C1LinearGauge fill.
C1LinearGauge1.Face.FaceStyle.Fill.ColorBegin = System.Drawing.Color.Pink;

//Setting the end color of C1LinearGauge fill.
C1LinearGauge1.Face.FaceStyle.Fill.ColorEnd = System.Drawing.Color.Purple;

//Setting the type of gradient for C1LinearGauge.
C1LinearGauge1.Face.FaceStyle.Fill.Type = C1.Web.Wijmo.Controls.C1Chart.ChartStyleFillType.LinearGradient;

What you’ve Accomplished:

When you run your application, observe that your gauge appears as shown in the following image: