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

Fluent Theme

With the R1 2018 release of the UI for WPF suite we have introduced the brand new Fluent theme. It comes with built-in elements that provide interaction feedback, with easy-to-customize colors and beautiful interpretation of the Fluent design system.

Default Theme Colors

The Fluent Theme has two color variations, that are designed to be easily modified via the exposed colors in the theme palette.

The default values of the brushes in the theme are listed below:

Brush name Light Dark
AccentColor #FF0099BC
AccentMouseOverColor #FF00BFE8
AccentPressedColor #FF0087A4
AccentFocusedColor #FF15D7FF
BasicColor #33000000
BasicSolidColor #FFCCCCCC
IconColor #CC000000
MainColor #19000000
MarkerColor #FF000000
MarkerMouseOverColor #FF000000
ValidationColor #FFE81123
ComplementaryColor #FFCCCCCC
MouseOverColor #33000000
PressedColor #4C000000
AlternativeColor #FFF2F2F2
MarkerInvertedColor #FFFFFFFF
PrimaryColor #66FFFFFF
PrimaryBackgroundColor #FFFFFFFF
PrimaryMouseOverColor #FFFFFFFF
ReadOnlyBackgroundColor #00FFFFFF
ReadOnlyBorderColor #FFCDCDCD

Figure 1: Theme colors represented in RadOutlookBar

Fluent theme colors represented in RadOutlookBar

FluentPalette Brushes

Transparent Brushes

  • PrimaryBrush: Used in backgrounds of inputs.
  • MouseOver: Used for an interaction of buttons.
  • PressedBrush: Used for interaction of button-like controls.
  • BasicBrush: Used in the majority of the normal state borders.
  • BasicSolidBrush: Used for borders in the cases when several would overlap (in complex grid-structured controls) and is calculated automatically when the BasicBrush is changed by overlaying it on top of the PrimaryBackgroundBrush.
  • MainBrush: Used for backgrounds of buttons, headers and footers.
  • IconBrush: Used for glyph and path icons, which should be 80% of black/white and for the light/dark variation respectfully.

Opaque Brushes

  • PrimaryBackgroundBrush: Used when backgrounds need to be solid white/black
  • AlternativeBrush: Used for backgrounds of popups, windows, listboxes etc and is slightly darker/lighter.
  • ComplementaryBrush: Slightly darker/lighter than the alternative in case of collisions.
  • AccentBrush: Used for coloring the primary accent elements.
  • AccentMouseOverBrush: Variation of the AccentBrush that is used for the hovered states of primary accent elements.
  • AccentPressedBrush: Variation of the AccentBrush that is used for the pressed states of primary accent elements.
  • AccentFocusedBrush: Variation of the AccentBrush that is used for the focused states of primary accent elements.
  • MarkerBrush: Used for the majority of foregrounds which are black/white.
  • MarkerInvertedBrush: Used for interactions states - white in both variations.
  • MarkerMouseOverBrush: Used for mouse over and focused states of inputs which is black/black.
  • ValidationBrush: A bright red brush that is used for the invalid elements, and validation tooltips.
  • DisabledOpacity: Used for texts when they are disabled. Backgrounds are usually AlternativeBrush when disabled.
  • InputOpacity: Used for texts in input controls (TextBox, RadMaskedInput etc.) when they are in normal state.
  • ReadOnlyOpacity: Used for texts in inputs when they are in a read-only state.
  • FocusThickness: The default value is 2, 2, 2, 2. It is used for the thickness of the focus border as well as the thickness of the read only borders of inputs where applicable.
  • FontFamily: The global font family used for the theme. By default it is Segoe UI.

Theme Variation Changing

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

Example 1: Changing the color variantion of the theme

//default color variation 
//dark color variation 

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 working with it.

Font Family and Font Size

When using the Fluent 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, VisualStudio2013, Office2016, Green and Material themes.

The FontSize and FontFamily properties are public so you can easily modify the theme resources at a single point. The most commonly used font size in the theme is with value 12 and can be modified through the FluentPalette.Palette.FontSize property in the same manner as in the other themes that support a theme palette.

The default font used in the theme is Segoe UI.

For complex scenarios we strongly recommend setting the FontSize properties only before the application is initialized.

Example 1 shows the default font sizes and families.

Example 2: Default FontSize and FontFamily

FluentPalette.Palette.FontSizeS = 10; 
FluentPalette.Palette.FontSize = 12; 
FluentPalette.Palette.FontSizeL = 13; 
FluentPalette.Palette.FontSizeXL = 14; 
FluentPalette.Palette.FontFamily = new FontFamily("Segoe UI"); 
Example 3 shows how to change the default FontFamily from "Segoe UI" to "Calibri Italic" and the FontSize from 12 to 13.

Example 3: Changing the theme's FontSize and FontFamily

private void OnButtonChangeFontSizeClick(object sender, RoutedEventArgs e) 
    FluentPalette.Palette.FontSize = 13; 
    FluentPalette.Palette.FontFamily = new FontFamily("Calibri Italic"); 

Figure 2: Setting FontSize and FontFamily

RadCalendar with default FontSize and FontFamiliyRadCalendar with modified FontSize and FontFamiliy


The Fluent Theme also uses the Telerik Web UI font glyphs by default. With this theme we are introducting the RadGlyph which provides a lightweight, flexble and design-time-friendly implementation of out glyph font.

You can read more about the RadGlyph in the RadGlyph Overview article and about the range of the font glyphs in the Font Glyphs Overview article.

Set Corner Radius

The Fluent Theme exposes an easy way to modify the corner radius of many elements in your application. You can directly use the corner radius property of the palette. By default the CornerRadius value is 0.

Example 4 shows how to change the default corner radius from 0 to 10. Note that you don't have to explicitly change all 5 corner radius properties as they will inherit the value from the main CornerRadius property.

Example 4: Changing the default corner radius

FluentPalette.Palette.CornerRadius = new CornerRadius(10);   

Figure 3: Apperance of a RadButton control after changing the default corner radius

RadButton with a CornerRadius of 10

Visual Effects Helpers

Acrylic effect

With the Fluent theme we are introducting a ThemeEffectsHelper static class that is responsible for the iconic transparent and blurred effect that is associated with the design system. The ThemeEffectsHelper.IsAcrylic attached property can be applied to a Window, RadWindow, Popup and window-derivate controls to achieve this translucent effect. It is supported currently only under Windows 10. In any other operating system it would simply result in a transparent window/popup.

For the acrylic effect to properly apply, the control that it is used on needs to be transparent (i.e., the Window and Popup controls need to have their AllowsTransparency property set to True).

ThemeEffectsHelper.IsAcrylicEnabled is used to turn off globally the setting of the effect and set opaque backgrounds in our controls. You can detect the version of the OS that the application is currently running and disable the effect for versions prior to Windows 10. For more information about achieving that you can review the following MSDN articles: Operating System Version and Targeting your application for Windows (if the application is not targeting Windows 10, the version number returned would be always 6.2)

Applying the ThemeEffectsHelper.IsAcrylic to a control could result in unexpected visual issues.

Material Assist

The MaterialAssist static class comes from the Material theme and it is reused in the Fluent theme. It exposes a set of attached properties and can be used to directly modify the appearance of a specific basic control without the need to alter its control template. Below is a list of the dependency properties which can be set directly in XAML:

  • MouseOverBrush: Sets the value of the background Brush applied when the mouse is over the control.
  • PressedBrush: Sets the value of the background Brush applied when the control is pressed.
  • CheckedBrush: Sets the value of the background Brush applied when the element is in Checked state. It will have effect when used on elements that expose a "checked" state(ToggleButton, RadListBoxItem, etc.)
  • FocusBrush: Sets the value of the background Brush applied when the element is focused.
  • ShadowDepth: Enum property that indicates the depth of the shadow effect over the control. There are 5 values that can be selected.
  • IsShadowDisabled: The property is used to control the visibility of the shadow effect.
  • CornerRadius: Used to set the corner radius of commonly used basic controls that could need corner radius customizations but don't expose such property by default (e.g. Button, RepeatButton, ListBox, RadComboBox, etc.).

Example 6 shows a RadToggleButton control with modified brushes for its different states through the MaterialAssist class:

Example 5: Declare the namespace for the Material components


Example 6: Set RadToggleButton's visual appearance through the MaterialAssist class

  <telerik:RadToggleButton Content="RadButton"  
                           mat:MaterialAssist.MouseOverBrush="{telerik:FluentResource ResourceKey=AccentMouseOverBrush}" 
                           mat:MaterialAssist.PressedBrush="{telerik:FluentResource ResourceKey=AccentPressedBrush}" 
                           mat:MaterialAssist.CheckedBrush="{telerik:FluentResource ResourceKey=ValidationBrush}"/> 

Figure 4: Appearance of the RadToggleButton in the different states

RadToggleButton PressedRadToggleButton MouseOverRadToggleButton Checked

Fluent Control

The FluentControl is an element designed for the Fluent theme and used to display the interaction of the users with some of the controls. It is mainly used within the template of controls that suggest user actions such as the RadButton, RadToggleButton, etc. It adds "Ripple" and "Glow" effects and exposes several properties which you can use to modify the ripple/glow functionality and its appearance:

  • IsRippleEnabled: Indicates whether the ripple effect is enabled.
  • IsRippleCentered: Controls the initial position from where the ripple effect starts. Setting the property to true will cause the effect to always start from the center of the control. Otherwise, the cursor position is respected.
  • IsSmartClipped: Sets whether the ripple should be within the boundaries of the corner radius.
  • RippleBrush: Sets the brush used for the ripple effect. The default is a RadialGradientBrush that is moved and transformed runtime.
  • RippleOpacity: Sets the opacity of the ripple effect.
  • BorderGradient: Sets the border gradient brush. This brush should be RadialGradientBrush and is cloned in code because it is modified runtime and should not be frozen.
  • EffectMode: Sets the opacity of the ripple effect mode of the control - Ripple or Glow. The default effect is Ripple.

Figure 5: Ripple effect оn RadDropDownButton

Ripple effect оn RadDropDownButtonRipple effect оn RadDropDownButton with Dark Variation

The following code snippets show how you can integrate the FluentControl with a RadButton

Example 7: RadButton's Style declaration

 <Style TargetType="telerik:RadButton" x:Key="custom"> 
    <Setter Property="Foreground" Value="{telerik:FluentResource ResourceKey=MarkerBrush}" /> 
    <Setter Property="Background" Value="{telerik:FluentResource ResourceKey=MainBrush}" /> 
    <Setter Property="BorderBrush" Value="{telerik:FluentResource ResourceKey=MainBrush}" /> 
    <Setter Property="BorderThickness" Value="1" /> 
    <Setter Property="Padding" Value="10 5" /> 
    <Setter Property="HorizontalAlignment" Value="Center" /> 
    <Setter Property="HorizontalContentAlignment" Value="Center" /> 
    <Setter Property="MinWidth" Value="64" /> 
    <Setter Property="Template"> 
            <ControlTemplate TargetType="telerik:RadButton"> 
                    <Border Background="{TemplateBinding Background}" /> 
                    <mat:FluentControl EffectMode="{TemplateBinding Tag}" 
                                       BorderThickness="{TemplateBinding BorderThickness}"> 
                        <ContentPresenter Focusable="False" 
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                          TextBlock.Foreground="{TemplateBinding Foreground}" 
                                          Margin="{TemplateBinding Padding}" 
                                          Content="{TemplateBinding Content}" /> 
                    <Trigger Property="IsMouseOver" Value="True"> 
                        <Setter Property="Background" Value="{telerik:FluentResource ResourceKey=MouseOverBrush}" /> 
                    <Trigger Property="IsPressed" Value="True"> 
                        <Setter Property="Background" Value="{telerik:FluentResource ResourceKey=PressedBrush}" /> 

Example 8: RadButton's instancing

 <StackPanel VerticalAlignment="Center"> 
    <telerik:RadButton VerticalAlignment="Center" Content="Ripple" 
                       Tag="{x:Static mat:FluentControlEffectMode.Ripple}" 
                       Style="{StaticResource custom}" /> 
    <telerik:RadButton VerticalAlignment="Center" Content="Glow" Margin="0 10 0 0" 
                       Tag="{x:Static mat:FluentControlEffectMode.Glow}" 
                       Style="{StaticResource custom}" /> 

Figure 6: FluentControl used within a custom template applied to a RadButton

FluentControl used within a custom template applied to a RadButtonFluentControl used within a custom template applied to a RadButton in Dark variation

It is possible to disable the ripple effect of the FluentControl through a style. Example 9 demonstrates how this can be achieved. The style can be included in the scope of the Telerik control(s) whose ripple effect needs to be disabled.

Example 9: Disabling the Ripple effect

 <!--If you are using the NoXaml binaries you should base the style on the default one for the theme like so 
    <Style TargetType="mat:FluentControl" BasedOn="{StaticResource FluentControlStyle}" >  
<Style TargetType="mat:FluentControl" > 
    <Setter Property="IsRippleEnabled" Value="False" /> 

Change ScrollBarsMode

By default, the scrollbars in the Fluent theme change their size depending on whether the mouse is currently over them. They are normally smaller in size to take less space and become wider when hovered. Since the R1 2020 SP1, you have the option of setting the ScrollBarsMode property of the Fluent palette in order to control this behavior. It is of type ScrollViewerScrollBarsMode and can be set to one of the following values:

  • ScrollViewerScrollBarsMode.Auto: The ScrollBars appear as a narrow sliver and expand to normal size on MouseOver. This is the default value.

  • ScrollViewerScrollBarsMode.Compact: The ScrollBars appear always as a narrow sliver.

  • ScrollViewerScrollBarsMode.Normal: The ScrollBars appear always with their normal size.

The ScrollBarMode property and the ScrollViewerScrollBarsMode enumeration of the FluentPalette, introduced with the 2019.1.121 version of our dlls, are obsolete and replaced by the ScrollBarsMode property of the palette and the ScrollViewerScrollBarsMode enum under the Telerik.Windows.Controls.Theming namespace.

Figure 7: ScrollBar behavior in Auto, Compact and Normal ScrollBarsMode

ScrollBar in Auto, Compact and Normal ScrollBarsMode

Example 10 demonstrates how the ScrollBarsMode property of the palette can be set.

Example 10: Setting the ScrollBarsMode property of the palette to Compact

FluentPalette.Palette.ScrollBarsMode = Telerik.Windows.Controls.Theming.ScrollViewerScrollBarsMode.Compact; 

Changing Opacity

If you need to change the opacity of the disabled and read-only elements, you can now easily do so by using the DisabledOpacity and ReadOnlyOpacity properties of the FluentPalette. The default values are 0.3 and 0.5 respectively.

Example 11: Changing the opacity

FluentPalette.Palette.DisabledOpacity = 0.5; 
FluentPalette.Palette.ReadOnlyOpacity = 0.4; 
FluentPalette.Palette.DisabledOpacity = 0.5 
FluentPalette.Palette.ReadOnlyOpacity = 0.4 

See Also

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