ComponentOne LinearGauge for ASP.NET Web Forms
Quick Start / Step 2 of 3: Customizing C1LinearGauge's Appearance
In This Topic
    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:

    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:

    In Code

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

    To write the code in Visual Basic:

    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

    To write the code in C#:

    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;

    What you’ve Accomplished:

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

    See Also