The bar charts on the front page of the Dashboard just were not cutting it so I installed the latest updates of the Infragistics controls (2008.1) and started playing with the Gauge control. I wanted to come up with a gauge that could show at a glance sales this year, this period, this week versus the same timespan last year. I also wanted something that looked classy.

Did a little rummaging around the Internet and found some nice photos at the Mercedes Benz web site of instrument panels. So I came up with a gauge that mimics the speedometer of an E350. Since I’ve never found much in the way of community sharing on Infragistics presets I decided to make it available to anyone that wanted it. Save this as an XML file.

<?xml version="1.0" encoding="utf-8"?>
<!--<PresetInfo PresetName="E350Speedo.xml" PresetDescription="Custom Preset Created 4/14/2008 2:29:39 PM" PresetType="All" />-->
<igGauge:UltraGauge>
<Annotations>
<igGaugeProp:BoxAnnotation CornerExtent="40" Bounds="110, 255, 145, 30" Key="gaugeLegend">
<Label FormatString="gaugeLegend" Font="Arial, 13pt">
<BrushElements>
<igGaugeProp:SolidFillBrushElement Color="DarkGray" />
</BrushElements>
</Label>
<BrushElements>
<igGaugeProp:SolidFillBrushElement Color="Black" />
</BrushElements>
</igGaugeProp:BoxAnnotation>
<igGaugeProp:BoxAnnotation Bounds="129, 83, 112, 136" Key="gaugeContent">
<Label FormatString="gaugeContent" Font="Arial, 12pt">
<BrushElements>
<igGaugeProp:SolidFillBrushElement Color="WhiteSmoke" />
</BrushElements>
</Label>
<BrushElements>
<igGaugeProp:SolidFillBrushElement Color="Transparent" />
</BrushElements>
</igGaugeProp:BoxAnnotation>
</Annotations>
<Gauges>
<igGaugeProp:RadialGauge Bounds="0, 0, 100, 100" BoundsMeasure="Percent" Margin="2, 2, 0, 0, Percent">
<Dial Bounds="0, 0, 100, 100" BoundsMeasure="Percent" InnerExtent="0">
<BrushElements>
<igGaugeProp:SolidFillBrushElement Color="LightGray" />
</BrushElements>
<StrokeElement Thickness="5">
<BrushElements>
<igGaugeProp:SolidFillBrushElement Color="White" />
</BrushElements>
</StrokeElement>
</Dial>
<Scales>
<igGaugeProp:RadialGaugeScale StartAngle="150" EndAngle="390">
<MajorTickmarks StartWidth="2" StartExtent="94">
<StrokeElement Color="Black" />
<BrushElements>
<igGaugeProp:SolidFillBrushElement Color="Black" />
</BrushElements>
</MajorTickmarks>
<MinorTickmarks StartWidth="2" Frequency="0.25" StartExtent="96">
<BrushElements>
<igGaugeProp:SolidFillBrushElement Color="Black" />
</BrushElements>
</MinorTickmarks>
<Labels Orientation="Horizontal" Extent="82" Font="Arial, 12pt, style=Bold, Italic">
<Shadow Depth="14" Angle="68" />
<BrushElements>
<igGaugeProp:SolidFillBrushElement Color="Black" />
</BrushElements>
</Labels>
<Markers>
<igGaugeProp:RadialGaugeNeedle EndExtent="95" Value="20" Precision="0">
<Anchor Radius="65" RadiusMeasure="Percent">
<BrushElements>
<igGaugeProp:SimpleGradientBrushElement StartColor="DarkGray" EndColor="Black" />
</BrushElements>
<StrokeElement Thickness="2">
<BrushElements>
<igGaugeProp:SolidFillBrushElement Color="Black" />
</BrushElements>
</StrokeElement>
</Anchor>
<Response />
<StrokeElement Thickness="2">
<BrushElements>
<igGaugeProp:SolidFillBrushElement Color="Black" />
</BrushElements>
</StrokeElement>
<BrushElements>
<igGaugeProp:SolidFillBrushElement Color="Silver" />
</BrushElements>
</igGaugeProp:RadialGaugeNeedle>
</Markers>
<Ranges>
<igGaugeProp:RadialGaugeRange InnerExtentStart="93" InnerExtentEnd="93" StartValue="0" EndValue="160">
<BrushElements>
<igGaugeProp:SimpleGradientBrushElement GradientStyle="BackwardDiagonal" StartColor="SteelBlue" EndColor="Gainsboro" />
</BrushElements>
</igGaugeProp:RadialGaugeRange>
</Ranges>
<Axes>
<igGaugeProp:NumericAxis EndValue="160" TickmarkInterval="20" />
</Axes>
</igGaugeProp:RadialGaugeScale>
</Scales>
</igGaugeProp:RadialGauge>
</Gauges>
</igGauge:UltraGauge>

I added a gradient blue range but you can remove that it you like. Use this code to manipulate the annotation box at the bottom of the gauge (I think it’s either a trip odometer or a gear selector display on the real car) and to manipulate the annotation box at the center of the gauge:

BoxAnnotation ga = theGauge.Annotations.FromKey("gaugeLegend") as BoxAnnotation;
if (ga != null)
ga.Label.FormatString = "Text here";

ga = theGauge.Annotations.FromKey("gaugeContent") as BoxAnnotation;
if (ga != null)
ga.Label.FormatString = String.Format("First Line:\r\n{0}\r\n\r\nSecond Line:\r\n{1}", firstValue, secondValue);

For my use I put ‘YTD Sales’ in the legend and ‘Last Year:\r\n{0:c}\r\n\r\nThis Year:{1:c}’, lastSales, thisSales.

No tags

1 comment

<< Microsoft Office Outlook Team Blog : A Safety Net for the Send Button

ASP.NET 3.5 Extensions Videos : The Official Microsoft ASP.NET Site >>