Edit this page

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.

The following topic explains the specifics of the theme's palette and features.

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

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

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.

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

See Also

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article