VisualStudio2013 Theme
The official Q2 2014 release of UI for WPF brought a brand new theme inspired by the Visual Studio design with three color variations – Light
, Dark
and Blue
.
The following topic explains the specifics of the theme's color variations.
Theme Color Variations
There are three palettes of colors which can be easily set by choosing one of the three default color variations:
The next screenshot display RadCalendar in the three color variations:
Theme Variation Changing
You can switch the three color palettes by calling the LoadPreset
method as shown below:
//default color variation
VisualStudio2013Palette.LoadPreset(VisualStudio2013Palette.ColorVariation.Light);
//blue color variation
VisualStudio2013Palette.LoadPreset(VisualStudio2013Palette.ColorVariation.Blue);
//dark color variation
VisualStudio2013Palette.LoadPreset(VisualStudio2013Palette.ColorVariation.Dark);
The
Dark
variation of the theme is designed with a dark background in mind. It is recommended to use such a background in your application when choosing it.
VisualStudio2013 Palette brushes and colors
Below you can find the differences between the three color variations. Every brush has relevant HEX value in the corresponding color variation.
Brush name | Light (default) | Dark | Blue | |||
---|---|---|---|---|---|---|
Brushes, which are same in the three palettes | ||||||
AccentMainBrush | FF3399FF | FF3399FF | FF3399FF | |||
AccentDarkBrush | FF007ACC | FF007ACC | FF007ACC | |||
SelectedBrush | FFFFFFFF | FFFFFFFF | FFFFFFFF | |||
ValidationBrush | FFF3333 | FFFF3333 | FFFF3333 | |||
Brushes, which are different in the three palettes | ||||||
AccentBrush | FF007ACC | FF007ACC | FFE5C365 | |||
MarkerBrush | FF1E1E1E | FFF1F1F1 | FF1E1E1E | |||
StrongBrush | FF717171 | FF999999 | FF717171 | |||
MainBrush | FFFFFFFF | FF1E1E1E | FFFFFFFF | |||
PrimaryBrush | FFEEEEF2 | FF2D2D30 | FFE6EBF5 | |||
AlternativeBrush | FFF5F5F5 | FF252526 | FFF6F6F6 | |||
MouseOverBrush | FFC9DEF5 | FF3E3E40 | FFFDF4BF | |||
BasicBrush | FFCCCEDB | FF3F3F46 | FFCCCEDB | |||
SemiBasicBrush | 66CCCEDB | 663F3F46 | 66CCCEDB | |||
HeaderBrush | FF007ACC | FF007ACC | FF35496A | |||
ComplementaryBrush | FFDBDDE6 | FF434346 | FFDBDDE6 | |||
ReadOnlyBackgroundBrush | FFF5F5F5 | FF252526 | FFF6F6F6 | |||
ReadOnlyBorderBrush | FFCCCEDB | FF3F3F46 | FFCCCEDB | |||
Additional color | ||||||
DefaultForegroundColor | FF1E1E1E | FFF1F1F1 | FF1E1E1E |
* DefaultForegroundColor
is the only resource of type Color and not a SolidColorBrush in VisualStudio2013 palette. Currently it is used only in the ExpressionEditor.
Theme Palette brushes description
Here you can find more details about each brush and where it is usually applied.
The first four colors have the same value in the three color variations and they are commonly used among all controls:
-
AccentMainBrush
—Blue by default and it is the main accent brush for the theme -
AccentDarkBrush
—Blue by default and it is the darker accent brush for the theme -
SelectedBrush
—White by default and is the main color for text or paths which are over elements with accent background -
ValidatonBrush
—Red by default and it is the brush used for validation where such is applicable in our controls
The colors that have different HEX value can be ordered by purpose.
First we needed another accent brush which has the same value as AccentDarkBrush for the Light and Dark color variations of VisualStudio2013 theme, but orange in the Blue color variation. This was necessary due to our aim to be as much closer as possible to the Visual Studio's product design.
-
AccentBrush
—another accent brush, usually used for border of elements in their MouseOver, Active, Toggled or Focused state.
There are two brushes usually used for foregrounds:
-
MarkerBrush
—the main brush used for text color, also path's fill in MouseOver state -
StrongBrush
—paths' and ticks' fill in Normal state, also ReadOnly text
There are six brushes usually used for background and border color:
-
MainBrush
—brush used for background of controls with direct input such as TextBox, MaskedInput, Editable ComboBox, AutoCompleteBox, PasswordBox. Also used as main background of elements that has different content with unpredictable background (PrimaryBrush or AlternativeBrush). -
PrimaryBrush
—brush used for background of most of the controls that have no direct input in their normal state. -
AlternativeBrush
—brush used as alternative background of PrimaryBrush. Also used as background of Popups and DropDowns. -
MouseOverBrush
—brush used for background of elements that are in MouseOver state. -
BasicBrush
—brush widely used for border color of controls in their Normal state. -
SemiBasicBrush
—the same brush as BasicBrush with 40% opacity, used for background of elements that are in MouseOver state.
Some controls such as Window, RibbonView, ScheduleView, Docking Pane, Docking ToolWindow, TileView have headers with a specific brush for background:
-
HeaderBrush
—brush used for background of headers
Additional brush is introduced rarely used for elements in Disabled state:
ComplementaryBrush
The following screenshot shows the usage of some of the brushes:
Changing Fonts
The official Q1 2015 release of Telerik UI for WPF introduced features that allow you to dynamically change the FontSize
and FontFamily
properties of all components in the application for the VisualStudio2013 theme.
All Telerik controls use resources that are linked to one major singleton object that contains the FontSize and FontFamily properties used for the VisualStudio2013 theme. These properties are public so you can easily modify the theme resources at one single point. The most commonly used FontSize in the theme is named FontSize and its default value is 12. The 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 - there is only one FontFamily resource which is named FontFamily and it is set to Segoe UI
.
Please note that for complex scenarios we strongly recommend setting font size only initially before the application is initialized. We recommend font sizes between 11px and 19px for the FontSize property.
All the available FontSizes
and FontFamily
as well as their default values:
VisualStudio2013Palette.Palette.FontSizeXXS = 9;
VisualStudio2013Palette.Palette.FontSizeXS = 10;
VisualStudio2013Palette.Palette.FontSizeS = 11;
VisualStudio2013Palette.Palette.FontSize = 12;
VisualStudio2013Palette.Palette.FontSizeL = 13;
VisualStudio2013Palette.Palette.FontSizeXL = 20;
VisualStudio2013Palette.Palette.FontSizeXXL = 22;
VisualStudio2013Palette.Palette.FontFamily = new FontFamily("Segoe UI");
-
VisualStudio2013Palette.Palette.FontSizeXXS
is used only in:- HorizontalBulletGraphStyle and VerticalBullerGraphStyle in Telerik.Windows.Controls.DataVisualization
-
VisualStudio2013Palette.Palette.FontSizeXS
is used in:- TimeBar's SelectionRangeStyle in Telerik.Windows.Controls.DataVisualization
- ExpressionEditor in Telerik.Windows.Controls.Expressions
- GridViewGroupPanel in Telerik.Windows.Controls.GridView
-
VisualStudio2013Palette.Palette.FontSizeS
is used in:- TimeBar's ItemControlStyle in Telerik.Windows.Controls.DataVisualization
- GanttView's EventContainerStyle in Telerik.Windows.Controls.GanntView
- ScheduleView TimeRulerItems' styles in Telerik.Windows.Controls.ScheduleView
-
VisualStudio2013Palette.Palette.FontSizeL
is used in:- TimeBar's GroupControlStyle in Telerik.Windows.Controls.DataVisualization
- Docking's Headers in Telerik.Windows.Controls.Docking
- ScheduleView TimeRulerGroupItems' styles in Telerik.Windows.Controls.ScheduleView
- TimeBar's GroupControlStyle in Telerik.Windows.Controls.DataVisualization
-
VisualStudio2013Palette.Palette.FontSizeXXL
is used in:- ScheduleView warnings
As the following example shows, you can change the default FontFamily from "Segoe UI" to "Calibri" and the FontSize from 12 to 16 on a click of a button:
<StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<telerik:RadCalendar x:Name="Calendar" Width="250" Height="250" Margin="4 10"/>
<telerik:RadClock x:Name="Clock" Height="250" Margin="4 10" TimeInterval="0:0:1"/>
</StackPanel>
<telerik:RadButton x:Name="BtnChangeFontSize" VerticalAlignment="Center"
HorizontalAlignment="Center" Content="Change Font"
Click="OnButtonChangeFontSizeClick" />
</StackPanel>
private void OnButtonChangeFontSizeClick(object sender, RoutedEventArgs e)
{
VisualStudio2013Palette.Palette.FontSize = 16;
VisualStudio2013Palette.Palette.FontFamily = new FontFamily("Calibri");
}
ReadOnly Properties
In the R2 2019 version, the following properties were introduced in the VisualStudio2013Palette
to control the look and feel of elements in their readonly state:
-
ReadOnlyBackgroundBrush
—Used as a background of elements that are in a read-only state. -
ReadOnlyBorderBrush
—Used in borders inside elements that are in a read-only state. -
ReadOnlyOpacity
—Used for text in inputs when they are in a read-only state.
Changing DisbledOpacity
If you need to change the opacity of disabled elements, you can easily do it by using the DisabledOpacity
property of the VisualStudio2013Palette
. The default value of the property is 0.2.
Changing the disabled opacity
VisualStudio2013Palette.Palette.DisabledOpacity = 0.4;
Merging Modified Palette Resources With StyleManager Theming Approach
When modifying fonts, colors, or other resources from the VisualStudio2013Palette
and StyleManager
is used as theming mechanism, the theme's ResourceDictionary
needs to be merged in App.xaml file to apply the changes.
Merging the theme's ResourceDictionary in App.xaml
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<telerik:VisualStudio2013ResourceDictionary/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>