ComponentOne Gauges for WPF and Silverlight
Gauges for WPF and Silverlight Task-Based Help / Customizing the Pointer's Appearance
In This Topic
    Customizing the Pointer's Appearance
    In This Topic

    By default, the C1Gauge.Pointer appears as a tapered brown rectangle and the pointer cap appears as a gray circle with a gradient. You can customize the appearance of both. In the following steps, you'll customize the appearance of the C1RadialGauge control's Pointer and C1RadialGauge.PointerCap.

    Complete the following steps:

    1. Click once on the C1RadialGauge control to select it.
    2. Switch to XAML view and add PointerFill="SkyBlue" PointerStroke="CornflowerBlue" to the <c1:C1RadialGauge> tag so that it appears similar to the following:
      XAML
      Copy Code
      <c1:C1RadialGauge Height="226" Margin="22,24,0,12" Name="C1RadialGauge1" Width="256" PointerFill="SkyBlue" PointerStroke="CornflowerBlue">
      </c1:C1RadialGauge>
      

       

      This will set customize the color of the Pointer.

    3. In XAML view add PointerCapStroke="CornflowerBlue" to the <c1:C1RadialGauge> tag so that it appears similar to the following:
      XAML
      Copy Code
      <c1:C1RadialGauge Height="226" Margin="22,24,0,12" Name="C1RadialGauge1" Width="256" PointerFill="SkyBlue" PointerCapStroke="CornflowerBlue" PointerStroke="CornflowerBlue">
      </c1:C1RadialGauge>
      

      This will customize the color that the PointerCap is outlined in.

    4. In XAML view add the following <c1:C1RadialGauge.PointerCapFill> markup to the <c1:C1RadialGauge> tag so that it appears similar to the following:

      XAML
      Copy Code
      <c1:C1RadialGauge Height="226" Margin="22,24,0,12" Name="C1RadialGauge1" Width="256" PointerFill="SkyBlue" PointerCapStroke="CornflowerBlue" PointerStroke="CornflowerBlue" >
          <c1:C1RadialGauge.PointerCapFill>
              <RadialGradientBrush>
                  <GradientStop Color="CornflowerBlue" Offset="0"/>
                  <GradientStop Color="SkyBlue" Offset="1"/>
              </RadialGradientBrush>
          </c1:C1RadialGauge.PointerCapFill>
      </c1:C1RadialGauge>
      

       

      This will add a radial gradient to the C1RadialGauge control's PointerCap.

    Run your project and observe:

    The C1RadialGauge control appears with a customized Pointer and PointerCap: