How to apply themes for SfCircularGauge?
This section tells you how to apply custom themes for WPF SfCircularGauge. You can define custom styles for controls using Resource Dictionary that contains resources as well as styles for components.
Implementation and APIs are similar in WPF, Silverlight and WinRT Platforms. You can refer this article for other platforms too.
Steps to apply themes for Circular Gauge:
1. Create a WPF application and add SfCircularGauge control as follows.
XAML
<syncfusion:SfCircularGauge Width="350" Height="350"> <syncfusion:SfCircularGauge.MainScale> <syncfusion:CircularScale> <syncfusion:CircularScale.Ranges> <syncfusion:CircularRange StartValue="50" EndValue="100"/> </syncfusion:CircularScale.Ranges> <syncfusion:CircularScale.Pointers> <syncfusion:CircularPointer Value="35" PointerType="NeedlePointer"/> <syncfusion:CircularPointer Value="35" PointerType="RangePointer"/> <syncfusion:CircularPointer Value="35" PointerType="SymbolPointer"/> </syncfusion:CircularScale.Pointers> </syncfusion:CircularScale> </syncfusion:SfCircularGauge.MainScale> </syncfusion:SfCircularGauge>
2. To specify the styles for required controls, add a resource dictionary in the application. To add a resource dictionary, right-click on the WPF project and then click “Add” button. Select “Resource Dictionary” by giving a name for the resource dictionary file (for example: MetroTheme.xaml). Add the necessary styles in the created resource dictionary as follows.
XAML
<!--Metro Style for Circular Scale --> <Style TargetType="syncfusion:CircularScale"> <Setter Property="RimStroke" Value="#41B0DF"/> <Setter Property="LabelStroke" Value="#7A7A7B"/> <Setter Property="TickStroke" Value="#7A7A7B"/> <Setter Property="SmallTickStroke" Value="#7A7A7B"/> <Setter Property="TickLength" Value="20"/> <Setter Property="SmallTickLength" Value="10"/> </Style> <!--Metro Style for Circular Range --> <Style TargetType="syncfusion:CircularRange"> <Setter Property="Stroke" Value="#D7D5D5"/> </Style> <!--Metro Style for Circular Pointer --> <Style TargetType="syncfusion:CircularPointer"> <Setter Property="PointerCapDiameter" Value="15"/> <Setter Property="PointerCapStroke" Value="#D7D5D5"/> <Setter Property="NeedleLengthFactor" Value="0.5"/> <Setter Property="NeedlePointerStroke" Value="#1686AE"/> <Setter Property="RangePointerStroke" Value="#1686AE"/> <Setter Property="SymbolPointerStroke" Value="#1686AE"/> </Style>
3. This resource dictionary is merged with the resources of application to share the custom styles defined for CircularScale, CircularPointer and CircularRange.
XAML
<Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="Themes/MetroTheme.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources>
Else, you can merge the resource dictionary in code-behind as follows.
WPF / Silverlight:
C#
ResourceDictionary resourceDictionary = new ResourceDictionary();
resourceDictionary.Source = new Uri("/CircularGaugeThemesDemo;component/Themes/MetroTheme.xaml", UriKind.RelativeOrAbsolute);
Application.Current.Resources.MergedDictionaries.Add(resourceDictionary);
WinRT:
C#
ResourceDictionary resourceDictionary = new ResourceDictionary();
resourceDictionary.Source = new
Uri("ms-appx:///Themes/MetroTheme.xaml", UriKind.RelativeOrAbsolute);
Application.Current.Resources.MergedDictionaries.Add(resourceDictionary);
4. In result, the circular gauge is displayed with Metro style as follows.
Figure 1: Metro Theme for Circular Gauge
You can define and apply any style or theme for circular gauge. To achieve this requirement, a sample containing 7 different themes like Metro, Blend, Almond, Sandune, Office Blue, Office Black and Office Silver is defined and attached in the following sample link for reference.
Sample Link:
CircularGaugeThemesDemo_WPF.zip
Figure 2: Circular Gauge with various themes
