How to Apply Themes for SfDigitalGauge ?

Steps to Apply Themes for Digital Gauge

1. Create a WPF Application and Add SfDigitalGauge Control

Add the SfDigitalGauge control to your XAML as follows:

xmlns:syncfusion ="clr-namespace:Syncfusion.UI.Xaml.Gauges;assembly=Syncfusion.SfGauge.Wpf"

<syncfusion:SfDigitalGauge/>

2. Create a Resource Dictionary for Custom Styles

To specify styles for the required controls, add a resource dictionary to your application:

1. Right-click on the WPF project
2. Click the "Add" button
3. Select "Resource Dictionary"
4. Provide a name for the resource dictionary file (for example: MetroTheme.xaml)

Add the necessary styles in the created resource dictionary:

<!--Metro Style for Digital Gauge -->    
    <Style TargetType="syncfusion:SfDigitalGauge">
        <Setter Property="Width" Value="550"/>
        <Setter Property="Height" Value="80"/>
        <Setter Property="CharacterType" Value="EightCrossEightDotMatrix"/>
        <Setter Property="CharacterStroke" Value="#41B0DF"/>
        <Setter Property="CharacterWidth" Value="50"/>
        <Setter Property="CharacterHeight" Value="50"/>
        <Setter Property="CharactersSpacing" Value="10"/>
        <Setter Property="SegmentThickness" Value="4"/>
    </Style>

3. Merge the Resource Dictionary with Application Resources

This resource dictionary must be merged with the application's resources to share the custom styles defined for the Digital Gauge.

Method 1: Using XAML

<Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Themes/MetroTheme.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

Method 2: Using Code-Behind

For WPF / Silverlight:

ResourceDictionary resourceDictionary = new ResourceDictionary();
resourceDictionary.Source = new Uri("/DigitalGaugeThemesDemo;component/Themes/MetroTheme.xaml", UriKind.RelativeOrAbsolute);
Application.Current.Resources.MergedDictionaries.Add(resourceDictionary);

For WinRT:

ResourceDictionary resourceDictionary = new ResourceDictionary();
resourceDictionary.Source = new 
Uri("ms-appx:///Themes/MetroTheme.xaml", UriKind.RelativeOrAbsolute);                                            
Application.Current.Resources.MergedDictionaries.Add(resourceDictionary);

4. View the Result

As a result, the Digital Gauge is displayed with the Metro style as shown below:

Figure 1: Metro Theme for Digital Gauge

You can define and apply any style or theme for the Digital Gauge. To demonstrate this capability, a sample containing 7 different themes (Metro, Blend, Almond, Sandune, Office Blue, Office Black, and Office Silver) has been created and is available at the following sample link for reference:

Sample Link:

DigitalGaugeThemesDemo_WPF.zip

Figure 2: Digital Gauge with various themes

Conclusion

Applying custom themes to the  SfDigitalGauge control enhances the visual appeal and user experience of your WPF applications. By utilizing Resource Dictionaries and following the steps outlined in this guide, you can easily create and implement custom themes that align with your application's design requirements. 

You can refer to our WPF Digital Gauge feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. 

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!