Style and Appearance / Themes Suite

New to Telerik UI for WPF? Download free 30-day trial

Green Theme

The official Q1 2016 release of UI for WPF brought a brand new Green theme with two color variations – Light and Dark.

The following topic explains the specifics of the theme's color variations.

Theme Color Variations

There are two palettes of colors which can be easily set by choosing one of the two default color variations:

Example 1: The ColorVariation enumeration that determines which color variation should be used

/// <summary> 
/// Represents theme color variations. 
/// </summary> 
public enum ColorVariation 
{ 
    /// <summary> 
    /// Represents Dark Green theme palette. 
    /// </summary> 
    Dark, 
 
    /// <summary> 
    /// Represents Light Green theme palette. 
    /// </summary> 
    Light 
}

The Dark variation of the theme is designed with a dark background in mind and it is recommended to use such a background in your application when choosing it.

The next screenshot displays RadCalendar in its Light and Dark color variations:

Figure 1: Light and Dark color variations demonstrated with RadCalendar

Green Theme Image 01

Theme Variation Changing

You can switch between the color palettes by calling the LoadPreset method as shown below:

Example 2: Changing the color variantion of the theme

//default color variation 
GreenPalette.LoadPreset(GreenPalette.ColorVariation.Dark);   
 
//light color variation 
GreenPalette.LoadPreset(GreenPalette.ColorVariation.Light); 

//default color variation 
GreenPalette.LoadPreset(GreenPalette.ColorVariation.Dark) 
 
//light color variation 
GreenPalette.LoadPreset(GreenPalette.ColorVariation.Light)

Green Palette Brushes

Below you can find the differences between the two color variations. Every brush has relevant HEX value in the corresponding color variation.

Brush name Light Dark (default)
Brushes, which are same in the two palettes
StrongBrush #FF646464
#FF646464
ValidationBrush #FFE60000
#FFE60000
FixedBrush #FFFFFFFF
#FFFFFFFF
ReadOnlyBackgroundBrush #00FFFFFF
#00FFFFFF
Brushes, which are different in the two palettes
AccentHighBrush #FF4FA520
#FF2B7402
AccentLowBrush #FF008406
#FF86B90E
SemiAccentLowBrush #59008406
#5986B90E
MouseOverBrush #FF8EBC00
#FF669933
MainBrush #FFF1F1F1
#FF1B1B1F
PrimaryBrush #FFE8E8E8
#FF2B2C2E
AlternativeBrush #FFE0E0E0
#FF1D1E21
MarkerBrush #FF000000
#FFF1F1F1
BasicBrush #FF999999
#FF474747
SelectedBrush #FF353535
#FFFFFFFF
LowBrush #FF8D8D8D
#FF343434
HighBrush #FFECECEC
#FF131313
ComplementaryBrush #FFCACACA
#FF444446

The ReadOnlyBackgroundBrush is available with version 2016.1.125.

Theme Palette Brushes Description

Below you can find more details about each brush and where it is usually applied.

The first three colors have the same value in both color variations and are commonly used among all controls:

  • StrongBrush is gray by default and it is mainly used for filling paths in elements when they are in Normal state.
  • ValidatonBrush is red by default and it is used for validation where such is applicable in our controls.
  • FixedBrush is white by default and it is the main color for text or paths which are over elements with validation background.

The colors that have different HEX value can be ordered by purpose.

First, we use four accent brushes which are green by default:

  • AccentHighBrush
  • AccentLowBrush
  • SemiAccentLowBrush: A Brush which has the same value as AccentLowBrush but with 35% alpha opacity.
  • MouseOverBrush: A Brush used as a background or border brush of controls or elements when they are in MouseOver state.

The default brush used as foreground color is:

  • MarkerBrush

Brush used for paths’ fill in elements that are in MouseOver, Pressed or Selected state:

  • SelectedBrush

There are several brushes usually used as background color:

  • MainBrush: A Brush used as background of controls with direct input such as TextBox, PasswordBox, RadMaskedInput, Editable RadComboBox, RadAutoCompleteBox. Also, used as main background of elements that has different content with unpredictable background.
  • PrimaryBrush: A Brush used as a background of controls when in their Normal state, excluding controls with direct input.
  • AlternativeBrush: A Brush used as an alternative background – i.e. for popups or where we want to distinguish one element from another.
  • HighBrush: A Brush rarely used as a background. For example, in RadMenu and RadTimeline.
  • ComplementaryBrush: A Brush very rarely used as a background. For example, in RadRadialMenu and RadScheduleView.
  • ReadOnlyBackgroundBrush (available with 2016.1.125): A Brush used as a background brush of controls in their ReadOnly state. Its default value is Transparent.

There are two brushes usually used as border brush:

  • BasicBrush: A Brush used as a border brush of controls in their Normal state.
  • LowBrush: A Brush used as a border brush of controls in their ReadOnly state.

Figure 2: The theme brushes demonstration

Green Theme Image 02

Changing Fonts

When using the Green theme you can dynamically change the FontSize and FontFamily properties of all components in the application the same way as you do in Windows8, Windows8Touch, Office2013 and VisualStudio2013 themes.

The FontSize and FontFamily properties are public so you can easily modify the theme resources at one single point. The most commonly used font size in the theme is named FontSize and its default value is 12. Bigger font sizes are used for headers and footers while smaller ones are used inside complex controls such as RadRibbonView, RadGauge, RadGanttView, etc. As for the FontFamily resource - its default value is Segoe UI.

Please note that for complex scenarios we strongly recommend setting the FontSize property only initially before the application is initialized. Also, we recommend values between 11px and 19px for it.

All available FontSizes and FontFamily as well as their default values are:

Example 2: Default FontFamily and FontSize values

GreenPalette.Palette.FontSizeXS = 10; 
GreenPalette.Palette.FontSizeS = 11;  
GreenPalette.Palette.FontSize = 12; 
GreenPalette.Palette.FontSizeL = 13; 
GreenPalette.Palette.FontSizeXL = 14;  
GreenPalette.Palette.FontFamily = new FontFamily("Segoe UI"); 

GreenPalette.Palette.FontSizeXS = 10 
GreenPalette.Palette.FontSizeS = 11 
GreenPalette.Palette.FontSize = 12 
GreenPalette.Palette.FontSizeL = 13 
GreenPalette.Palette.FontSizeXL = 14 
GreenPalette.Palette.FontFamily = New FontFamily("Segoe UI");

More details regarding the rarely used font sizes can be found below:

  • GreenPalette.Palette.FontSizeXS is used in:

    • TimeBar's SelectionRangeStyle in Telerik.Windows.Controls.DataVisualization
    • Map’s Scale and MouseLocationIndicator in Telerik.Windows.Controls.DataVisualization
    • AggregateResultsList, GridViewHeaderCell and GridViewGroupPanel in Telerik.Windows.Controls.GridView

  • GreenPalette.Palette.FontSizeS is used in:

    • ChartBaseStyle and TrackBallInfoControlStyle in Telerik.Windows.Controls.Chart.xaml
    • HorizontalBulletGraphStyle and VerticalBullerGraphStyle in Telerik.Windows.Controls.DataVisualization
    • TimeBar's ItemControlStyle in Telerik.Windows.Controls.DataVisualization
    • RibbonView’s GroupChromeStyle in Telerik.Windows.Controls.RibbonView
    • GanttView's EventContainerStyle in Telerik.Windows.Controls.GanntView
    • ScheduleView TimeRulerItems' styles in Telerik.Windows.Controls.ScheduleView
    • DiagramRulerStyle in Telerik.Windows.Controls.Diagrams.Extensions.xaml

  • GreenPalette.Palette.FontSizeL is used in:

    • GanttView's GanttDragResizeVisualCueTemplate in Telerik.Windows.Controls.GanntView
    • ScheduleView TimeRulerGroupItems' and TimeRulerMonthViewGroupItem’s styles in Telerik.Windows.Controls.ScheduleView

  • GreenPalette.Palette.FontSizeXL is used in:

    • ScheduleView TimeRulerMonthViewItem’s styles in Telerik.Windows.Controls.ScheduleView

As the following example shows, you can change the default FontFamily from "Segoe UI" to "Comic Sans MS" and the FontSize from 12 to 14 on a click of a button:

Example 3: The view of the example

<StackPanel>  
     <telerik:RadCalendar x:Name="Calendar" Width="250" Height="250" Margin="4 10"/>  
     <telerik:RadButton x:Name="BtnChangeFontSize" 
                               Content="Change Font" 
                               HorizontalAlignment="Center" VerticalAlignment="Center"  
                               Click="OnButtonChangeFontSizeClick" /> 
</StackPanel>

Example 4: Changing the FontSize and the FontFamily

private void OnButtonChangeFontSizeClick(object sender, RoutedEventArgs e) 
{ 
    GreenPalette.Palette.FontSize = 14; 
    GreenPalette.Palette.FontFamily = new FontFamily("Comic Sans MS"); 
} 

Private Sub OnButtonChangeFontSizeClick(sender As Object, e As RoutedEventArgs) 
    GreenPalette.Palette.FontSize = 14 
    GreenPalette.Palette.FontFamily = New FontFamily("Comic Sans MS") 
End Sub

Figure 3: Change in theme fonts

Green Theme Image 03

Changing CornerRadius

A new feature of the Green theme is exposing an easy way to modify the corner radius of many elements in your application. You can use the five new palette properties with default values as shown below:

Example 5: Default CornerRadius values

GreenPalette.Palette.CornerRadius = new CornerRadius(1, 1, 1, 1); 
GreenPalette.Palette.CornerRadiusBottom = new CornerRadius(0, 0, 1, 1); 
GreenPalette.Palette.CornerRadiusLeft = new CornerRadius(1, 0, 0, 1); 
GreenPalette.Palette.CornerRadiusRight = new CornerRadius(0, 1, 1, 0); 
GreenPalette.Palette.CornerRadiusTop = new CornerRadius(1, 1, 0, 0); 

GreenPalette.Palette.CornerRadius = New CornerRadius(1, 1, 1, 1) 
GreenPalette.Palette.CornerRadiusBottom = New CornerRadius(0, 0, 1, 1) 
GreenPalette.Palette.CornerRadiusLeft = New CornerRadius(1, 0, 0, 1) 
GreenPalette.Palette.CornerRadiusRight = New CornerRadius(0, 1, 1, 0) 
GreenPalette.Palette.CornerRadiusTop = New CornerRadius(1, 1, 0, 0)

As the following example shows, you can change the default CornerRadius from 1 to 5 on a click of a button:

Example 6: The view of the example

<StackPanel> 
     <telerik:RadCalendar x:Name="Calendar" Width="250" Height="250" Margin="4 10"/> 
     <telerik:RadComboBox x:Name="ComboBoxChangeCornerRadius" 
                          SelectionChanged="ComboBoxChangeCornerRadius_SelectionChanged"  
                          Width="50" 
                          SelectedIndex="1" 
                          HorizontalAlignment="Center" /> 
</StackPanel>

Example 7: Changing the CornerRadius

public MainWindow() 
{ 
    InitializeComponent(); 
    this.CornerRadiusComboBox.ItemsSource = Enumerable.Range(0, 10); 
} 
 
private void ComboBoxChangeCornerRadius_SelectionChanged(object sender, RoutedEventArgs e) 
{  
    var selectedCornerSize = sender as RadComboBox; 
    if (selectedCornerSize != null && selectedCornerSize.SelectedValue != null) 
    { 
        double selectedValue = Convert.ToDouble(selectedCornerSize.SelectedValue); 
        GreenPalette.Palette.CornerRadius = new CornerRadius(selectedValue, selectedValue, selectedValue, selectedValue); 
        GreenPalette.Palette.CornerRadiusBottom = new CornerRadius(0, 0, selectedValue, selectedValue); 
        GreenPalette.Palette.CornerRadiusLeft = new CornerRadius(selectedValue, 0, 0, selectedValue); 
        GreenPalette.Palette.CornerRadiusRight = new CornerRadius(0, selectedValue, selectedValue, 0); 
        GreenPalette.Palette.CornerRadiusTop = new CornerRadius(selectedValue, selectedValue, 0, 0);  
    } 
} 

Public Sub New() 
    InitializeComponent() 
    Me.CornerRadiusComboBox.ItemsSource = Enumerable.Range(0, 10) 
End Sub 
 
Private Sub ComboBoxChangeCornerRadius_SelectionChanged(sender As Object, e As RoutedEventArgs) 
    Dim selectedCornerSize = TryCast(sender, RadComboBox) 
    If selectedCornerSize IsNot Nothing AndAlso selectedCornerSize.SelectedValue IsNot Nothing Then 
        Dim selectedValue As Double = Convert.ToDouble(selectedCornerSize.SelectedValue) 
        GreenPalette.Palette.CornerRadius = New CornerRadius(selectedValue, selectedValue, selectedValue, selectedValue) 
        GreenPalette.Palette.CornerRadiusBottom = New CornerRadius(0, 0, selectedValue, selectedValue) 
        GreenPalette.Palette.CornerRadiusLeft = New CornerRadius(selectedValue, 0, 0, selectedValue) 
        GreenPalette.Palette.CornerRadiusRight = New CornerRadius(0, selectedValue, selectedValue, 0) 
        GreenPalette.Palette.CornerRadiusTop = New CornerRadius(selectedValue, selectedValue, 0, 0) 
    End If 
End Sub

Figure 4: Changes in corner radius

Green Theme Image 04

Changing Opacity

If you need to change the opacity of disabled elements, you can now easily do it by using the DisabledOpacity property of GreenPalette as follows:

:Example 8: The view of the opacity

<telerik:RadCalendar x:Name="Calendar" Width="250" Height="250" Margin="4 10" IsEnabled="False"/>

Example 9: Changing the DisabledOpacity

GreenPalette.Palette.DisabledOpacity = 0.5; 

GreenPalette.Palette.DisabledOpacity = 0.5

Figure 5: Changes in the disabled elements opacity

Green Theme Image 05

The same is applicable for the ReadOnly state of controls by using the exposed ReadOnlyOpacity property of GreenPalette. The default values are 0.2 for the DisabledOpacity and 1 for the ReadOnlyOpacity property.

Example 10: The view of the example

<StackPanel Width="200" HorizontalAlignment="Center"> 
    <TextBox Text="TextBox" Margin="5" /> 
    <TextBox Text="Disabled TextBox" Margin="5" IsEnabled="False" /> 
    <TextBox Text="ReadOnly TextBox" Margin="5" IsReadOnly="True" /> 
</StackPanel>

Example 11: Changing the opacity

GreenPalette.Palette.DisabledOpacity = 0.5; 
GreenPalette.Palette.ReadOnlyOpacity = 0.5; 

GreenPalette.Palette.DisabledOpacity = 0.5 
GreenPalette.Palette.ReadOnlyOpacity = 0.5

Figure 6: Changes in the readonly elements opacity

Green Theme Image 06

See Also

In this article
Related articles
Not finding the help you need? Improve this article