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
- Theme Variation Changing
- Green Palette Brushes
- Theme Palette Brushes Description
- Changing Fonts
- Changing CornerRadius
- Changing Opacity
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
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
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
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
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
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
