The C1LinearGaugeExtender control includes several properties that allow you to style every aspect of the gauge, including the face, pointer, tick marks, and labels. In this topic you'll style the gauge.

Complete the following steps:

1. Create a new ASP.NET Web application.
2. In the Solution Explorer, right-click the project and choose Add Reference. Locate and add a reference to the C1.Web.Wijmo.Extenders assembly.
3. Switch to Source view, and add the following markup at the top of the page to register the assembly:

<%@ Register Assembly="C1.Web.Wijmo.Extenders.4" Namespace="C1.Web.Wijmo.Extenders.C1Gauge" TagPrefix="Gauge" %>

Note that you may need to edit the above depending on the assembly you are using.

4. Add the following markup within the main <div> tag to add a Panel with content and set the linear gauge extender:

<asp:Panel ID="linearGauge" runat="server"></asp:Panel>

<Gauge:C1LinearGaugeExtender runat="server" ID="LinearGaugeExtender1" Height="75" Width="400" TargetControlID="linearGauge" Value="50">

    <TickMajor Position="Center" Factor="3">

        <TickStyle>

            <Fill Color="White"></Fill>

        </TickStyle>

    </TickMajor>

    <TickMinor Position="Center" Visible="true">

        <TickStyle>

            <Fill Color="White"></Fill>

        </TickStyle>

    </TickMinor>

    <Labels>

    <LabelStyle FontSize="14">

    <Fill Color="White"></Fill>

    </LabelStyle>

    </Labels>

    <Pointer Length="1" Width="20" Shape="Tri">

        <PointerStyle Stroke="#FB7800" Opacity="0.8">

            <Fill LinearGradientAngle="180" ColorBegin="#FB7800" ColorEnd="#C00100" Type="LinearGradient"></Fill>

        </PointerStyle>

    </Pointer>

    <Animation Duration="2000" Easing="EaseOutBack"></Animation>

    <Face>

        <FaceStyle StrokeWidth="0" Stroke="Gray">

            <Fill ColorBegin="#3333CC" ColorEnd="#0099CC" Type="LinearGradient"></Fill>

        </FaceStyle>

    </Face>

</Gauge:C1LinearGaugeExtender>

This will add a styled gauge to the page.

What You've Accomplished

Press F5 to run your application,  notice how the gauge is styled. Stop the application and edit the style properties to change the appearance of the gauge.