ComponentOne Gauges for WPF and Silverlight
Gauges for WPF and Silverlight Task-Based Help / Customizing the Gauge Shape
In This Topic
    Customizing the Gauge Shape
    In This Topic

    Most radial gauges are circular, but you can create gauges with other shapes as well. To customize the shape of a C1RadialGauge, you would need to:

    Complete the following steps to follow the steps above to create a C1RadialGauge with a customized shape:

    1. Switch to XAML view and modify the <c1:C1RadialGauge> tag so that it appears similar to the following:
      XAML
      Copy Code
      <c1:C1RadialGauge Height="189" Margin="102,34,127,26" Name="C1RadialGauge1" Width="189" StartAngle="-160" SweepAngle = "140">
      </c1gauge>
      

       This will set the C1RadialGauge control's initial properties.

    2. In XAML view add PointerOrigin="0.8,0.5" to the <c1:C1RadialGauge> tag so that it appears similar to the following:
      XAML
      Copy Code
      <c1:C1RadialGauge Height="189" Margin="102,34,127,26" Name="C1RadialGauge1" Width="189" StartAngle="-160" SweepAngle = "140" PointerOrigin="0.8,0.5">
      </c1gauge>
      
             

      The C1RadialGauge.PointerOrigin property will set where the C1RadialGauge control's C1Gauge.Pointer originates.

    3. In XAML view add Background="Transparent" to the <c1:C1RadialGauge> tag so that it appears similar to the following:
      XAML
      Copy Code
      <c1:C1RadialGauge Height="189" Margin="102,34,127,26" Name="C1RadialGauge1" Width="189" StartAngle="-160" SweepAngle = "140" PointerOrigin="0.8,0.5" Background="Transparent">
      </c1gauge>
      
             

      The C1RadialGauge control will now appear transparent.

    4. In XAML view add BorderThickness="0" to the <c1:C1RadialGauge> tag so that it appears similar to the following:
      XAML
      Copy Code
      <c1:C1RadialGauge Height="189" Margin="102,34,127,26" Name="C1RadialGauge1" Width="189" StartAngle="-160" SweepAngle = "140" PointerOrigin="0.8,0.5" Background="Transparent" BorderThickness="0">
      </c1gauge>
      
             

      The C1RadialGauge control will now appear without a border.

    5. In XAML view add markup after the <c1:C1RadialGauge> tag so that it appears similar to the following:
      XAML
      Copy Code
      <c1:C1RadialGauge Height="189" Margin="102,34,127,26" Name="C1RadialGauge1" Width="189" StartAngle="-160" SweepAngle = "140" PointerOrigin="0.8,0.5" Background="Transparent" BorderThickness="0">
          <!-- Add tick marks to the gauge -->
          <c1:C1GaugeMark Interval="10" Location="1"/>
          <c1:C1GaugeMark Interval="5" Location="1" />
      </c1gauge>
      
             

      This will add C1GaugeMark elements and tick marks to the gauge.

    6. In XAML view add markup after the <c1:C1RadialGauge> tag so that it appears similar to the following:
      XAML
      Copy Code
      <c1:C1RadialGauge Height="189" Margin="102,34,127,26" Name="C1RadialGauge1" Width="189" StartAngle="-160" SweepAngle = "140" PointerOrigin="0.8,0.5" Background="Transparent" BorderThickness="0">
          <!-- Add tick marks to the gauge -->
          <c1:C1GaugeMark Interval="10" Location="1"/>
          <c1:C1GaugeMark Interval="5" Location="1" />
          <!-- Add a face with custom shape -->
          <c1:C1RadialGauge.Face>
              <Grid>
                  <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="4*" />
                      <ColumnDefinition Width="10*" />
                      <ColumnDefinition Width="1*" />
                  </Grid.ColumnDefinitions>
                  <Border Grid.Column="1" Background="Black" BorderBrush="LightGray" BorderThickness="4" CornerRadius="140,60,60,140"/>
              </Grid>
          </c1:C1RadialGauge.Face>
      </c1gauge>
      
             

      This will add a customized C1Gauge.Face to the gauge.

    Run your project and observe:

    The C1RadialGauge control appears with a customized face:

     

     

    You can customize the Face of the C1RadialGauge control even further. For example, take a look at the following customized gauges included on the SpeedometersPage.xaml page of the GaugeSamples sample installed with WPF and Silverlight Edition: