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

Complete the following steps to customize the C1RadialGauge control:

1. In Source view, edit the <cc1:C1RadialGauge></cc1:C1RadialGauge> tag so it looks like the following:     

   <cc1:C1RadialGauge ID="C1RadialGauge1" runat="server" Value="50" Max="100" StartAngle="-45" SweepAngle="270">
       
   

   This sets the Value and Max value of the control, as well as the gauge's StartAngle and SweepAngle.
   
2. Place your mouse between the <cc1:C1RadialGauge></cc1:C1RadialGauge> tags, and add the following markup to style various aspects of the C1RadialGauge control:

   <Animation Duration="2000" Easing="EaseOutBack"></Animation>
           <Labels Offset="30"></Labels>
           <TickMajor Position="Inside" Factor="2" Visible="True" Offset="27" Interval="25"></TickMajor>
           <TickMinor Position="Inside" Visible="True" Offset="30" Interval="5"></TickMinor>
           <Pointer Length="0.8" Width="4" Offset="0.15"></Pointer>
   
           
   

   <Ranges>
            <cc1:GaugelRange EndDistance="0.58" EndValue="10" EndWidth="5" StartDistance="0.6" StartValue="0" StartWidth="2">
             <RangeStyle Stroke="#7BA0CC" StrokeWidth="0">
              <Fill Color="#7BA0CC"></Fill>
             </RangeStyle>
            </cc1:GaugelRange>
            <cc1:GaugelRange EndDistance="0.54" EndValue="75" EndWidth="20" StartDistance="0.58" StartValue="10" StartWidth="5">
             <RangeStyle Stroke="White" StrokeWidth="0">
              <Fill ColorBegin="#B4D5F0" ColorEnd="#B4D5F0" Type="LinearGradient"></Fill>
             </RangeStyle>
            </cc1:GaugelRange>
            <cc1:GaugelRange EndDistance="0.5" EndValue="100" EndWidth="25" StartDistance="0.54" StartValue="175" StartWidth="20">
             <RangeStyle Stroke="#7BA0CC" StrokeWidth="0">
              <Fill Color="#7BA0CC"></Fill>
             </RangeStyle>
            </cc1:GaugelRange>
           </Ranges>
   

   Note that you set styles for the following items:

   • Animation: Sets the animation options. Here you set the Duration and Easing of the animation.
     
   • Labels: Sets options and the style of the gauge labels. Here you set the Offset of the labels.
     
   • TickMajor: Sets options and the style of the major tick lines. Here you set the Position, Offset, Interval, and Factor of the major tick lines, as well as the visibility.
     
   • TickMinor: Sets options and the style of the minor tick lines. Here you set the Position, Offset, and visibility of the minor tick lines.
     
   • Pointer: Sets options and the style of the gauge pointer. Here you set the Style of the pointer, including the color and stroke.
     
   • GaugelRange: Sets options and the style of the gauge range. Here you set the positioning and style of the ranges.
     
3. Run your application, and observe that the gauge now looks similar to the following image:

Notice the style changes that you made are reflected in the control.

In this step you customized the appearance of the C1RadialGauge control. In the next step you'll customize the behavior of the control.