As most people reading these blogs are aware by now, the recently released Web.UI 2009.3, introduces a powerful Silverlight Gauges control.  One of the features that makes this control really powerful is the ability to insert additional Silverlight controls within a gauge.

The idea is for these controls to be fitted on top of the background but below the pointers and the cover layers of the gauge, making it appear as they were part of the inner content of the gauge.  When fitted inside the gauge, the additional controls can be positioned relatively to the gauge by percentage from top or bottom, or absolutely, by specifying the number of pixels from the top or the bottom of the gauge.  The advantage of the relative positioning mechanism is that it makes it easy to re-size the entire gauge without affecting the relative positioning of its internal components.  Let's see this concept in action.

Example

Every Silverlight gauge (RadialGauge, NumericGauge or LinearGauge) has an InnerContent property.  This is a collection of FrameworkElements (of which a Silverlight Control is a subclass) of additional elements to be added to the gauge.  So to add a label to a gauge, we simply need to insert it a TextBlock to this collection and position it appropriately.  The code below does just that:

<z:RadialGauge x:Name="CPUgauge" Type="Circular" Width="230" Height="230" Grid.Row="0" Grid.Column="0" Value="44" >
    <z:RadialGauge.Scales>
	<z:RadialScale StartAngle="210" RotationAngle="240" MinValue="0" MaxValue="100" />
    </z:RadialGauge.Scales>
    
    <z:RadialGauge.InnerContent>
	<TextBlock Text="CPU USAGE (%)" z:Gauge.InnerContentMappingMode="RelativeToGaugeSize" z:Gauge.Top="0.41"  z:Gauge.Left="0.5" 
			HorizontalAlignment="Center" VerticalAlignment="Bottom" FontFamily="Arial" FontSize="11" Foreground="DarkGray"/>
    </z:RadialGauge.InnerContent>
</z:RadialGauge>

Here we have positioned our TextBlock relatively, so that the bottom, center of the TextBlock is 41% from the top of the gauge and in the middle horizontally.  This will produce the following gauge:

Similarly, we can add any Silverlight control to the InnerContent of the gauge.  For example, to create a sub-gauge, on the bottom part of our gauge, we'll simply instantiate another Gauge Control, and Add it to the InnerContent:

    <z:RadialGauge.InnerContent>
	<TextBlock Text="CPU USAGE (%)" z:Gauge.InnerContentMappingMode="RelativeToGaugeSize" z:Gauge.Top="0.41"  z:Gauge.Left="0.5" 
				HorizontalAlignment="Center" VerticalAlignment="Bottom" FontFamily="Arial" FontSize="11" Foreground="DarkGray"/> 
	<z:RadialGauge x:Name="MemGauge" Type="SemiCircleNorth" Width="90" Height="60" Value="0.82" 
		       HorizontalAlignment="Center" VerticalAlignment="Top" z:Gauge.Top="0.63"  z:Gauge.Left="0.5" z:Gauge.InnerContentMappingMode="RelativeToGaugeSize" 
		       FrameVisibility="Collapsed" CoverVisibility="Collapsed" BackgroundVisibility="Collapsed" >
	    <z:RadialGauge.Scales>
		<z:RadialScale MinValue="0" MaxValue="8">
		    <z:RadialScale.Ranges>
			<z:RadialRange MajorTickMarkStep="1" MinorTickMarkStep="0.2" MinorTickMarkSize="2" AnnotationPosition="Outside" AnnotationOffset="1" />                                    
		    </z:RadialScale.Ranges>
		</z:RadialScale>
	    </z:RadialGauge.Scales>
	</z:RadialGauge>                
	<TextBlock Text="Mem Usage (GB)" z:Gauge.InnerContentMappingMode="RelativeToGaugeSize" z:Gauge.Top="0.90"  z:Gauge.Left="0.5" 
		   HorizontalAlignment="Center" VerticalAlignment="Bottom" FontFamily="Arial" FontSize="9" Foreground="DarkGray"/>
    </z:RadialGauge.InnerContent>

Now our gauge contains a sub-gauge and appropriate labels:

Now, if we want to access this sub-gauge from our code behind, we can do that by accessing its x:Name attribute as a variable.  However this is not available until the gauge is added to the Silverlight visual tree.  We can always access the gauge in the following way:

(CPUgauge.InnerContent[1] as Gauge).Value = 20;