We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to apply themes for SfLinearGauge?

Platform: WPF |
Control: SfLinearGauge |
Published Date: August 25, 2014 |
Last Revised Date: June 26, 2019

This section tells you how to apply custom themes for WPF SfLinearGauge. You can define custom styles for controls using Resource Dictionary that contains resources as well as styles for components.

Note:

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 Linear Gauge:

1. Create a WPF application and add SfLinearGauge control as follows.

XAML

        <syncfusion:SfLinearGauge>
            <syncfusion:SfLinearGauge.MainScale>
                <syncfusion:LinearScale>
                    <syncfusion:LinearScale.Ranges>
                        <syncfusion:LinearRange StartValue="50" EndValue="100"/>
                    </syncfusion:LinearScale.Ranges>
                    <syncfusion:LinearScale.Pointers>
                        <syncfusion:LinearPointer Value="35" PointerType="BarPointer"/>
                        <syncfusion:LinearPointer Value="35" PointerType="SymbolPointer"/>
                    </syncfusion:LinearScale.Pointers>
                </syncfusion:LinearScale>
            </syncfusion:SfLinearGauge.MainScale>
        </syncfusion:SfLinearGauge>

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 click “Add” button. Select “Resource Dictionary” by giving a name for the resource dictionary file (for example: MetroTheme.xaml). Then add the necessary styles in the created resource dictionary as follows.

XAML

  <!--Metro Style for Linear Scale -->    
  <Style TargetType="syncfusion:LinearScale">
        <Setter Property="ScaleBarLength" Value="450"/>
        <Setter Property="ScaleBarSize" Value="35"/>
        <Setter Property="ScaleBarStroke" Value="#D7D5D5"/>
        <Setter Property="LabelStroke" Value="#7A7A7B"/>
        <Setter Property="MajorTickStroke" Value="#7A7A7B"/>
        <Setter Property="MinorTickStroke" Value="#7A7A7B"/>
        <Setter Property="MinorTicksPerInterval" Value="1"/>
        <Setter Property="MajorTickSize" Value="20"/>
        <Setter Property="MinorTickSize" Value="10"/>
    </Style>
 
    <!--Metro Style for Linear Range --> 
    <Style TargetType="syncfusion:LinearRange">
        <Setter Property="RangeStroke" Value="#1686AE"/>
        <Setter Property="RangeOffset" Value="2"/>
        <Setter Property="StartWidth" Value="5"/>
        <Setter Property="EndWidth" Value="25"/>
    </Style>
 
    <!--Metro Style for Linear Pointer --> 
    <Style TargetType="syncfusion:LinearPointer">
        <Setter Property="BarPointerStrokeThickness" Value="15"/>
        <Setter Property="BarPointerStroke" Value="#41B0DF"/>
        <Setter Property="SymbolPointerStroke" Value="#41B0DF"/>
        <Setter Property="SymbolPointerPosition" Value="Above"/>
        <Setter Property="SymbolPointerHeight" Value="18"/>
        <Setter Property="SymbolPointerWidth" Value="20"/>
    </Style>

3. This resource dictionary is merged with the resources of application to share the custom styles defined for LinearScale, LinearPointer and LinearRange.

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("/LinearGaugeThemesDemo;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, linear gauge is displayed with Metro style as follows.

Metro theme for SfLinearGauge

Figure 1: Metro Theme for Linear Gauge

You can define and apply any style or theme for linear 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:

LinearGaugeThemesDemo_WPF.zip

SfLinearGauge with various themes

Figure 2: Linear Gauge with various themes

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon