Gauge Controls

Gauge controls are data-bound controls that allow you to view quantitative information in a visual format.

Round-faced gauges can be used to simulate odometers, speedometers, water level, or water pressure gauges. Square-faced gauges can be used to simulate voltage or amperage levels. Linear gauges indicate a graduated numerical value in a visual presentation. A typical linear gauge representation is a thermometer, but can also be used to represent the readout on a tire pressure gauge. Gauges typically have a Maximum, Minimum, and default Value property.

Note: In the Silverlight forms designer, the Horizontal and Vertical Linear gauges are located in the Linear Gauges group.

When a gauge control receives a value outside of the specified range (that is , above the Maximum property value or below the Minimum property value) or the value is Null, the control sets its Opacity property to 0.2. The control appears disabled until the value is back within the specified range or is not Null.

The dual gauge also has an InnerValue property. Therefore, when it receives an inner value outside of the specified range (above the InnerMaximum property value or below the InnerMinimum property value) or the value is Null, the control sets its Opacity property to 0.2. The control appears disabled until the value is back within the specified range or is not Null.

Gauge Controls Property Usage

The following table shows the properties used by each control:


Property	Dual Gauge	Dynamic Gauge	Horizontal Linear Gauge	Parabolic Gauge	Racing Gauge	Radial Gauge	Simple Gauge	Variable Gauge	Vertical Linear Gauge
AllowDrop	X	X	X	X	X	X	X	X	X
Background	X	X	X	X	X	X	X	X	X
BorderBrush	X	X	X	X	X	X	X	X	X
BorderThickness	X	X	X	X	X	X	X	X	X
Caption	X			X	X		X	X
CaptionBrush	X		X	X	X		X	X	X
CaptionFontFamily	X			X	X		X	X
CaptionFontSize	X			X	X		X	X
CaptionFontStretch	X			X	X		X	X
CaptionFontStyle	X			X	X		X	X
CaptionFontWeight	X			X	X		X	X
CenterCapBorderBrush	X			X	X		X	X
CenterCapBrush	X			X	X		X	X
ClipToBounds	X	X	X	X	X	X	X	X	X
ColorThreshold1	X
ColorThreshold2	X
ColorThresholdPercentage						X
Column	X	X	X	X	X	X	X	X	X
ColumnSpan	X	X	X	X	X	X	X	X	X
CornerRadius	X		X	X	X		X	X	X
Effect	X	X	X	X	X	X	X	X	X
FillDirection		X
FillLevel		X
FlowDirection	X	X	X	X	X	X	X	X	X
FluidBorderBrush			X						X
FluidBrush			X						X
FluidCornerRadius			X						X
FluidOpacityBrush			X						X
Focusable	X	X	X	X	X	X	X	X	X
FocusVisualStyle	X	X	X	X	X	X	X	X	X
FontFamily	X	X	X	X	X	X	X	X	X
FontSize	X	X	X	X	X	X	X	X	X
FontStretch	X	X	X	X	X	X	X	X	X
FontStyle	X	X	X	X	X	X	X	X	X
FontWeight	X	X	X	X	X	X	X	X	X
ForceCursor	X	X	X	X	X	X	X	X	X
Foreground	X	X	X	X	X	X	X	X	X
GlareBrush	X		X	X	X		X	X	X
Height	X	X	X	X	X	X	X	X	X
HighColorThreshold1		X
HighColorThreshold2		X
HighFill		X				X
HighRangeBrush								X
HorizontalAlignment	X		X	X	X	X	X	X	X
HorizontalContentAlignment	X		X	X	X	X	X	X	X
InnerBackground			X						X
InnerBorderBrush	X		X	X	X	X	X	X	X
InnerBorderThickness	X		X	X	X		X	X	X
InnerCaption	X
InnerCaptionBrush	X
InnerCaptionFontFamily	X
InnerCaptionFontSize	X
InnerCaptionFontStretch	X
InnerCaptionFontWeight	X
InnerCornerRadius	X		X	X	X		X	X	X
InnerFontFamily	X
InnerFontSize	X
InnerFontStretch	X
InnerFontStyle	X
InnerFontWeight	X
InnerForeground	X
InnerMaximum	X
InnerMinimum	X
InnerNeedleBrush	X
InnerNeedleTlhickness	X
InnerTickBrush	X
InnerTicks	X
InnerValue	X
IsEnabled	X	X	X	X	X	X	X	X	X
IsFillReversed						X
IsHitTestVisible	X	X	X	X	X	X	X	X	X
IsManipulationEnabled	X	X	X	X	X	X	X	X	X
IsNumbersVisible			X						X
IsRunning		X				X
IsSharedSizeScope	X	X	X	X	X	X	X	X	X
IsTabStop	X	X	X	X	X	X	X	X	X
Localization	X	X	X	X	X	X	X	X	X
LowColorThreshold1		X
LowColorThreshold2		X
LowFill		X				X
LowRangeBrush								X
Margin	X	X	X	X	X	X	X	X	X
MaxHeight	X	X	X	X	X	X	X	X	X
Maximum	X	X	X	X	X	X	X	X	X
MaxWidth	X	X	X	X	X	X	X	X	X
MediumFill		X				X
MeterBackgroundBrush					X
MeterBorderBrush					X
MeterFontFamily					X
MeterFontSize					X
MeterFontStretch					X
MeterFontStyle					X
MeterFontWeight					X
MeterForeground					X
MidRangeBrush								X	X
MinHeight	X	X	X	X	X	X	X	X	X
Minimum	X	X	X	X	X	X	X	X	X
MinWidth	X	X	X	X	X	X	X	X	X
Name	X	X	X	X	X	X	X	X	X
NeedleBrush	X			X	X		X	X	X
NeedleThickness	X			X	X		X	X
Opacity	X	X	X	X	X	X	X	X	X
OpacityMask	X	X	X	X	X	X	X	X	X
OverridesDefaultStyle	X	X	X	X	X	X	X	X	X
Padding	X	X	X	X	X	X	X	X	X
RenderTransformOrigin	X	X	X	X	X	X	X	X	X
Row	X			X	X	X	X	X	X
RowSpan	X			X	X	X	X	X	X
SnapsToDevicePixels	X	X	X	X	X	X	X	X	X
StrokeThickness	X	X		X	X		X	X	X
Style	X	X	X	X	X	X	X	X	X
TabIndex	X	X	X	X	X	X	X	X	X
Tag	X	X	X	X	X	X	X	X	X
Template	X	X	X	X	X	X	X	X	X
TickBrush	X		X	X	X		X	X	X
TickFrequency			X
TickPlacement			X
TickRingBrush	X			X	X		X
Ticks	X		X	X	X		X	X	X
TitleFontSize						X
TitleText						X
TitleTextColor						X
ToolTip	X	X	X	X	X	X	X	X	X
Uid	X	X	X	X	X	X	X	X	X
UnitFontSize						X
UnitText						X
UnitTextColor						X
UseLayoutRounding	X	X	X	X	X	X	X	X	X
Value	X	X	X	X	X	X	X	X	X
ValueBackgroundColor		X
ValueFontSize						X
ValueFormat		X
ValueStringFormat						X
VerticalAlignment	X	X	X	X	X	X	X	X	X
VerticalContentAlignment	X	X	X	X	X	X	X	X	X
Visibility	X	X	X	X	X	X	X	X	X
Width	X	X	X	X	X	X	X	X	X

Gauge Controls Property Descriptions

The following table shows the properties descriptions used by all control:

Property	Description
AllowDrop	Select this check box to indicate that the control can accept data that is dragged onto it.
Background	Expand this field to select the background color of the selected control.
BorderBrush	Expand this field to select the border color of the selected control.
BorderThickness	Specifies the border thickness of a control, in pixels.
Caption	Specifies the caption for the main control.
CaptionBrush	Expand this field to select the color for the main gauge caption.
CaptionFontFamily	Specifies the font family for the control's caption.
CaptionFontSize	Specifies the font size for the control's caption.
CaptionFontStretch	Specifies the degree to which a caption's font is condensed or expanded on the screen.
CaptionFontStyle	Specifies the font style for the control's caption.
CaptionFontWeight	Specifies the font weight for the control's caption.
CenterCapBorderBrush	Expand this field to select a color for the outside edge of the center cap.
CenterCapBrush	Expand this field to select a color for the center cap.
ClipToBounds	Select this check box to clip the content of this control (or content coming from the child elements of this control) to fit into the size of the containing control.
ColorThreshold1	Specifies the percentage between the minimum and maximum where the control will change to the medium fill.
ColorThreshold2	Specifies the percentage between the minimum and maximum were the control will change o the high fill.
ColorThresholdPercentage	Specifies the percentage between the minimum and maximum where the control will change to the medium fill.
Column	Specifies the column within the grid where the control is located.
ColumnSpan	Specifies the total number of columns that child content spans within a grid.
CornerRadius	Specifies the degree to which the corners of a control are rounded.
Effect	Click the arrow to expand the property, select the effect you want to apply to the control, and then configure the specific values for the effect. Valid values to select are: Blur Kernel Type Radius Drop Shadow Color Direction Opactiy Shadow Depth
FillDirection	Specifies the direction of the fill. Selections are: From Left From Right From Center
FillLevel	Specifies the level of fill based on the values of the Maximum, MidValue, and Minimum properties.
FlowDirection	Specifies the direction that text and other user interface (UI) elements flow within any parent control. Selections are: Left to Right Right to Left
FluidBorderBrush	Expand this field to select the border color for the fluid content of the selected control.
FluidBrush	Expand this field to select the color for the fluid portion of the selected control.
FluidCornerRadius	Specifies the degree to which the corners of the fluid content a control are rounded.
FluidOpacityBrush	Expand this field to select the color for the opacity level of the fluid.
Focusable	Select this check box to indicate that the control can receive focus.
FocusVisualStyle	Specifies a property that enables customization of appearance, effects, or other style characteristics that apply to this control when it has focus.
FontFamily	Specifies the font family for the control.
FontSize	Specifies the font size for the control.
FontStretch	Specifies the degree to which a font is condensed or expanded on the screen.
FontStyle	Specifies the font style for the control.
FontWeight	Specifies the weight or thickness of the specified font.
ForceCursor	Select this check box to indicate that the user interface (UI) renders the cursor as declared by the Cursor property.
Foreground	Expand this field to select the foreground color.
GlareBrush	Expand this field to specify the glare effect for the control.
Height	Specifies the height of the control, in pixels.
HighColorThreshold1	Specifies the percentage of the maximum where the control will change to the medium fill.
HighColorThreshold2	Specifies the percentage of the maximum where the control will chane to the high fill.
HighFill	Specifies the brush that describes the high fill of the control.
HighRangeBrush	Expand this field to select the color for the high range display.
HorizontalAlignment	Specifies the horizontal alignment characteristics applied to this control. Selections are: Left Center Right Stretch
HorizontalContentAlignment	Specifies the horizontal alignment of the control's content. Selections are: Left Center Right Stretch
ImageStretch	Specifies how the image should be stretched to fill the destination rectangle. Selections are: Fill None Uniform UniformToFill
InnerBackground	Expand this field to select the background color for the fluid indicator; that is, the non-fluid portion of the control.
InnerBorderBrush	Expand this field to select the color for the inner border.
InnerBorderThickness	Expand this field to select the color for the inner border.
InnerCaption	Specifies the caption for the inner gauge.
InnerCaptionBrush	Expand this field to select the color for the caption for the inner gauge.
InnerCaptionFontFamily	Specifies the font family for the caption for the inner gauge.
InnerCaptionFontSize	Specifies the font size for the caption for the inner gauge.
InnerCaptionFontStretch	Specifies the degree to which the font for caption for the inner gauge is condensed or expanded on the screen.
InnerCaptionFontWeight	Specifies the font weight or thickness for the caption for the inner gauge.
InnerCornerRadius	Specifies the degree to which the corners of the inner border are rounded.
InnerFontFamily	Specifies the font family for the inner gauge.
InnerFontSize	Specifies the font size for the inner gauge.
InnerFontStretch	Specifies the degree to which the font for the inner gauge is condensed or expanded on the screen.
InnerFontStyle	Specifies the font style for the inner gauge.
InnerFontWeight	Specifies the weight or thickness of the font for the inner gauge.
InnerForeground	Expand this field to select the foreground color for the inner gauge.
InnerMaximum	Specifies the maximum value of the range for the inner gauge.
InnerMinimum	Specifies the minimum value of the range for the inner gauge.
InnerNeedleBrush	Expand this field to select the color for the needle on the inner gauge.
InnerNeedleThickness	Specifies the thickness of the outside edge of the needle on the inner gauge.
InnerTickBrush	Expand this field to select the color for the tick marks on the inner gauge.
InnerTickRingBrush	Expand this field to select the color for the tick ring of the inner gauge.
InnerTicks	Specifies the values to display.
InnerValue	Specifies the current magnitude of the range control for the inner gauge.
IsEnabled	Select this check box to indicate that this control is enabled in the user interface (UI).
IsFillReversed	Specifies whether the gauge fills from left or right. Select this check box to indicate that the gauge will fill from right to left. Clear this check box to indicate that the gauge will fill from let to right.
IsHitTestVisible	Select this check box to indicate that the control can possibly be returned as a hit test result from some portion of its rendered content.
IsManipulationEnabled	Select this check box to indicate that the manipulation events for the control are enabled.
IsNumbersVisible	Select this check box to indicate that the numbers corresponding to the tick marks are visible.
IsRunning	Specifies whether the stopwatch timer is running on the control.
IsSharedSizeScope	Select this check box to indicate that controls are sharing size information.
IsTabStop	Select this check box to indicate that a control is included in tab navigation.
Localization	Click the ellipsis button to open the Localization Configuration dialog box where you can configure the property to localize, the language to use for localization, and the text to localize.
LowColorThreshold1	Specifies the percentage of the minimum where the control will change to the medium fill.
LowColorThreshold2	Specifies the percentage of the minimum where the control will chane to the low fill.
LowFill	Specifies the brush that describes the low fill of the control.
LowRangeBrush	Expand this field to select the color for the low range display.
Margin	Specifies the outer margin of a control.
MaxHeight	Specifies the maximum height of a control.
Maximum	Specifies the maximum value of the range of the control.
MaxWidth	Specifies the maximum width of a control.
MediumFill	Specifies the brush that describes the medium fill of the control.
MeterBackgroundBrush	Expand this field to select a color for the meter background.
MeterBorderBrush	Expand this field to select a color for the meter border.
MeterFontFamily	Specifies the font family for the meter value.
MeterFontSize	Specifies the font size for the meter value.
MeterFontStretch	Specifies the degree to which the meter value font is condensed or expanded on the screen.
MeterFontStyle	Specifies the font style for the meter value.
MeterFontWeight	Specifies the weight or thickness of the specified font for the meter value.
MeterForeground	Expand this field to select the color for the value that appears in the meter area.
MidRangeBrush	Expand this field to select the color for the mid range display.
MinHeight	Specifies the minimum height of a control.
Minimum	Specifies the minimum value of the range of the control.
MinWidth	Specifies the minimum width of a control.
Name	Specifies the identifying name of the control. The name provides a reference so that code behind, such as event handler code, can refer to a markup element during processing by a XAML processor.
NeedleBrush	Expand this field to select the color for the needle on the outer gauge.
NeedleThickness	Specifies the thickness of the outside edge of the needle on the outer gauge.
Opacity	Specifies the opacity factor applied to the entire control. Valid values are 0 through 1, with up to 15 decimal places.
OpacityMask	Expand this field to select a color for the opacity mask, which is applied to any alpha-channel masking for the rendered content of this control.
OverridesDefaultStyle	Select this check box to indicate that this control incorporates style properties from theme styles.
Padding	Specifies the amount of padding to apply to the inside edge of each side of a control.
RenderTransformOrigin	Specifies the center point of any possible render transform, relative to the bounds of the element. X is the horizontal origin factor, given as a value between 0 and 1. Y is the vertical origin factor, given as a value between 0 and 1.
Row	RowBackground
RowSpan	Specifies the total number of rows that child content spans within a grid.
SnapsToDevicePixels	Select this check box to indicate that rendering for this control uses device-specific pixel settings.
StrokeThickness	Specifies the width of the control's outline.
Style	Specifies the style used by this control when it is rendered.
TabIndex	Specifies the order in which controls receive focus when the Tab key is pressed.
Tag	Specifies an arbitrary object value that can be used to store custom information about this control.
Template	Click the ellipsis button to open the Open dialog box to select a template to use.
TickBrush	Expand this field to select the color for the incremental tick marks.
TickFrequency	Specifies the interval between tick marks.
TickPlacement	Specifies the position of tick marks with respect to the track of the Slider. Selections are: None Both TopLeft BottomRight
TickRingBrush	Expand this field to select the color for the tick ring of the outer gauge.
Ticks	For linear gauges and sliders, click the ellipsis button to open the Tick Property Editor dialog box to enter the marks to display for a Slider.
TitleFontSize	Specifies the font size for the title.
TitleText	Specifies the title of the control.
TitleTextColor	Specifies the brush that colors the title of the control.
ToolTip	Specifies the tool-tip that displays for this control in the user interface (UI).
Uid	Specifies the unique identifier (for localization) for this control.
UnitFontSize	Specifies the font size for the units display values.
UnitText	Specifies the unit text for the control.
UnitTextColor	Specifies the brush that colors the unit text of the control.
UseLayoutRounding	Specifies a value that determines whether rendering for the object and its visual subtree should use rounding behavior that aligns rendering to whole pixels.
Value	Specifies the current magnitude of the range control.
ValueBackgroundColor	Expand this field to select the background color of the values for the selected control.
ValueFontSize	Specifies the font size of the value for the control.
ValueFormat	Specifies the format the value displays in.
ValueStringFormat	Specifies the format string to use when converting the Value property to a string.
VerticalAlignment	Specifies the vertical alignment characteristics applied to this control. Selections are: Bottom Center Top Stretch
VerticalContentAlignment	Specifies the vertical alignment of the control's content. Selections are: Bottom Center Top Stretch
Visiblility	Specifies the visibility of this control. Selections are: Collapsed Hidden Visible
Width	Specifies the width of the control, in pixels.