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:
Markup Copy Code <Gauge:C1RadialGauge Height="189" Margin="102,34,127,26" Name="C1RadialGauge1" Width="189" StartAngle="-160" SweepAngle = "140"> </Gauge:C1RadialGauge>
This will set the C1RadialGauge control's initial properties.
Markup Copy Code <Gauge:C1RadialGauge Height="189" Margin="102,34,127,26" Name="C1RadialGauge1" Width="189" StartAngle="-160" SweepAngle = "140" PointerOrigin="0.8,0.5"> </Gauge:C1RadialGauge>
The C1RadialGauge.PointerOrigin property will set where the C1RadialGauge control's C1GaugePointer originates.
Markup Copy Code <Gauge:C1RadialGauge Height="189" Margin="102,34,127,26" Name="C1RadialGauge1" Width="189" StartAngle="-160" SweepAngle = "140" PointerOrigin="0.8,0.5" Background="Transparent"> </Gauge:C1RadialGauge>The C1RadialGauge control will now appear transparent.
Markup Copy Code <Gauge: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"> </Gauge:C1RadialGauge>
The C1RadialGauge control will now appear without a border.
Markup Copy Code <Gauge: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 --> <Gauge:C1GaugeMark Interval="10" Location="1"/> <Gauge:C1GaugeMark Interval="5" Location="1" /> </Gauge:C1RadialGauge>
This will add C1GaugeMark elements and tick marks to the gauge.
Markup Copy Code <Gauge: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 --> <Gauge:C1GaugeMark Interval="10" Location="1"/> <Gauge:C1GaugeMark Interval="5" Location="1" /> <!-- Add a face with custom shape --> <Gauge: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> </Gauge:C1RadialGauge.Face> </Gauge:C1RadialGauge>
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 C1Gauge.Face of the C1RadialGauge control even further. For example, take a look at the following customized gauges included in the SpeedometersPage.xaml page of the GaugeSamples sample installed with UWP Edition: