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:
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.
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.
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.
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.
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.
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: