Getting Started with SfLinearGauge
9 Jul 202617 minutes to read
This section explains the steps required to configure the SfLinearGauge control in a real-time scenario and provides a walk-through on its customization features.
Adding gauge references
You can add the gauge reference using one of the following methods:
Method 1: Adding gauge reference from nuget.org
Syncfusion WPF components are available in nuget.org. To add the gauge to your project, open the NuGet package manager in Visual Studio, search for Syncfusion.SfGauge.WPF, and then install it.
Method 2: Adding gauge reference from toolbox
You can drag the linear gauge control from the toolbox and drop it onto the designer. It will add the required assembly references automatically and add the namespace to the page.
Method 3: Adding gauge assemblies manually from the installed location
If you prefer to manually reference the assemblies instead of referencing from NuGet, add the following assemblies in the respective projects.
Location: {Installed location}/{version}/WPF/Assemblies
Refer to this link to know about the assemblies required for adding the gauge to your project.
Initializing the gauge
Import the SfLinearGauge namespace to your respective Window as in the following.
xmlns:gauge="clr-namespace:Syncfusion.UI.Xaml.Gauges;assembly=Syncfusion.SfGauge.Wpf"using Syncfusion.UI.Xaml.Gauges;You can initialize an empty SfLinearGauge control.
<gauge:SfLinearGauge/>SfLinearGauge sfLinearGauge = new SfLinearGauge();
this.Content = sfLinearGauge;Configuring the scale
Scales are a collection of LinearScale which is used to indicate the numeric values. Scale bar, ticks, labels, ranges, and pointers are the sub-elements of a scale.
The Minimum and Maximum properties allow you to set the scale range.
<gauge:SfLinearGauge>
<gauge:SfLinearGauge.MainScale>
<gauge:LinearScale ScaleBarStroke="#E0E0E0"
LabelStroke="#424242"
MajorTickStroke="Gray"
MajorTickSize="15"
MajorTickStrokeThickness="1"
MinorTickStroke="Gray"
MinorTickSize="7"
MinorTickStrokeThickness="1"
MinorTicksPerInterval="3"
ScaleBarLength="300"
ScaleBarSize="10">
</gauge:LinearScale>
</gauge:SfLinearGauge.MainScale>
</gauge:SfLinearGauge>SfLinearGauge sfLinearGauge = new SfLinearGauge();
LinearScale linearScale = new LinearScale();
linearScale.LabelStroke = (SolidColorBrush)new BrushConverter().ConvertFrom("#424242");
linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray);
linearScale.MajorTickSize = 15;
linearScale.MajorTickStrokeThickness = 1;
linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray);
linearScale.MinorTickSize = 7;
linearScale.MinorTickStrokeThickness = 1;
linearScale.MinorTicksPerInterval = 3;
linearScale.ScaleBarStroke = (SolidColorBrush)new BrushConverter().ConvertFrom("#E0E0E0");
linearScale.ScaleBarLength = 300;
linearScale.ScaleBarSize = 10;
sfLinearGauge.MainScale = linearScale;
this.Content = sfLinearGauge;Adding a symbol pointer
SymbolPointer is a shape that can be placed to mark the pointer value in the gauge. Add the pointer to the linearScale created earlier.
<gauge:LinearScale.Pointers>
<gauge:LinearPointer PointerType="SymbolPointer"
Value="60"
SymbolPointerHeight="10"
SymbolPointerWidth="10"
SymbolPointerPosition="Below"
SymbolPointerStroke="#757575" />
</gauge:LinearScale.Pointers>LinearPointer linearPointer = new LinearPointer();
linearPointer.PointerType = LinearPointerType.SymbolPointer;
linearPointer.Value = 60;
linearPointer.SymbolPointerHeight = 10;
linearPointer.SymbolPointerWidth = 10;
linearPointer.SymbolPointerPosition = LinearSymbolPointersPosition.Below;
linearPointer.SymbolPointerStroke = (SolidColorBrush)new BrushConverter().ConvertFrom("#757575");
linearScale.Pointers.Add(linearPointer);Adding a bar pointer
BarPointer is used to mark the scale values. This starts at the beginning of the gauge and ends at the pointer value. Add the pointer to the linearScale created earlier.
<gauge:LinearScale.Pointers>
<gauge:LinearPointer PointerType="BarPointer"
Value="50"
BarPointerStroke="#757575"
BarPointerStrokeThickness="10" />
</gauge:LinearScale.Pointers>LinearPointer linearPointer1 = new LinearPointer();
linearPointer1.PointerType = LinearPointerType.BarPointer;
linearPointer1.Value = 50;
linearPointer1.BarPointerStroke = (SolidColorBrush)new BrushConverter().ConvertFrom("#757575");
linearPointer1.BarPointerStrokeThickness = 10;
linearScale.Pointers.Add(linearPointer1);Adding ranges
You can categorize the scale values using the start and end value properties in LinearRange. You can add multiple ranges for a scale using the Ranges property. Add the ranges to the linearScale created earlier.
<gauge:LinearScale.Ranges>
<gauge:LinearRange StartValue="0"
EndValue="40"
RangeStroke="#27BEB7"
StartWidth="10"
EndWidth="10"
RangeOffset="0.4" />
<gauge:LinearRange StartValue="40"
EndValue="100"
RangeStroke="LightCyan"
RangeOffset="0.4"
StartWidth="10"
EndWidth="10" />
</gauge:LinearScale.Ranges>//Adding Range
LinearRange linearRange = new LinearRange();
linearRange.StartValue = 0;
linearRange.EndValue = 40;
linearRange.RangeStroke = (SolidColorBrush)new BrushConverter().ConvertFrom("#27BEB7");
linearRange.StartWidth = 10;
linearRange.EndWidth = 10;
linearRange.RangeOffset = 0.4;
linearScale.Ranges.Add(linearRange);
LinearRange linearRange1 = new LinearRange();
linearRange1.StartValue = 40;
linearRange1.EndValue = 100;
linearRange1.RangeStroke = new SolidColorBrush(Colors.LightCyan);
linearRange1.RangeOffset = 0.4;
linearRange1.StartWidth = 10;
linearRange1.EndWidth = 10;
linearScale.Ranges.Add(linearRange1);The following code example is the complete code of the previous configurations.
<gauge:SfLinearGauge>
<gauge:SfLinearGauge.MainScale>
<gauge:LinearScale LabelStroke="#424242"
MajorTickStroke="Gray"
MajorTickSize="15"
MajorTickStrokeThickness="1"
MinorTickStroke="Gray"
MinorTickSize="7"
MinorTickStrokeThickness="1"
MinorTicksPerInterval="3"
ScaleBarStroke="#E0E0E0"
ScaleBarLength="300"
ScaleBarSize="10">
<gauge:LinearScale.Pointers>
<gauge:LinearPointer PointerType="SymbolPointer"
Value="60"
SymbolPointerHeight="10"
SymbolPointerWidth="10"
SymbolPointerPosition="Below"
SymbolPointerStroke="#757575" />
<gauge:LinearPointer PointerType="BarPointer"
Value="50"
BarPointerStroke="#757575"
BarPointerStrokeThickness="10" />
</gauge:LinearScale.Pointers>
<gauge:LinearScale.Ranges>
<gauge:LinearRange StartValue="0"
EndValue="40"
RangeStroke="#27BEB7"
StartWidth="10"
EndWidth="10"
RangeOffset="0.4" />
<gauge:LinearRange StartValue="40"
EndValue="100"
RangeStroke="LightCyan"
RangeOffset="0.4"
StartWidth="10"
EndWidth="10" />
</gauge:LinearScale.Ranges>
</gauge:LinearScale>
</gauge:SfLinearGauge.MainScale>
</gauge:SfLinearGauge>SfLinearGauge sfLinearGauge = new SfLinearGauge();
LinearScale linearScale = new LinearScale();
linearScale.LabelStroke = (SolidColorBrush)new BrushConverter().ConvertFrom("#424242");
linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray);
linearScale.MajorTickSize = 15;
linearScale.MajorTickStrokeThickness = 1;
linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray);
linearScale.MinorTickSize = 7;
linearScale.MinorTickStrokeThickness = 1;
linearScale.MinorTicksPerInterval = 3;
linearScale.ScaleBarStroke = (SolidColorBrush)new BrushConverter().ConvertFrom("#E0E0E0");
linearScale.ScaleBarLength = 300;
linearScale.ScaleBarSize = 10;
//Adding symbol pointer
LinearPointer linearPointer = new LinearPointer();
linearPointer.PointerType = LinearPointerType.SymbolPointer;
linearPointer.Value = 60;
linearPointer.SymbolPointerHeight = 10;
linearPointer.SymbolPointerWidth = 10;
linearPointer.SymbolPointerPosition = LinearSymbolPointersPosition.Below;
linearPointer.SymbolPointerStroke = (SolidColorBrush)new BrushConverter().ConvertFrom("#757575");
linearScale.Pointers.Add(linearPointer);
//Adding bar pointer
LinearPointer linearPointer1 = new LinearPointer();
linearPointer1.PointerType = LinearPointerType.BarPointer;
linearPointer1.Value = 50;
linearPointer1.BarPointerStroke = (SolidColorBrush)new BrushConverter().ConvertFrom("#757575");
linearPointer1.BarPointerStrokeThickness = 10;
linearScale.Pointers.Add(linearPointer1);
//Adding Range
LinearRange linearRange = new LinearRange();
linearRange.StartValue = 0;
linearRange.EndValue = 40;
linearRange.RangeStroke = (SolidColorBrush)new BrushConverter().ConvertFrom("#27BEB7");
linearRange.StartWidth = 10;
linearRange.EndWidth = 10;
linearRange.RangeOffset = 0.4;
linearScale.Ranges.Add(linearRange);
LinearRange linearRange1 = new LinearRange();
linearRange1.StartValue = 40;
linearRange1.EndValue = 100;
linearRange1.RangeStroke = new SolidColorBrush(Colors.LightCyan);
linearRange1.RangeOffset = 0.4;
linearRange1.StartWidth = 10;
linearRange1.EndWidth = 10;
linearScale.Ranges.Add(linearRange1);
sfLinearGauge.MainScale = linearScale;
this.Content = sfLinearGauge;The following screenshot illustrates the result of the previous codes.
You can find the complete getting started sample from this link.
Theme
LinearGauge supports various built-in themes. Refer to the below links to apply themes for the LinearGauge:
