Getting Started with WPF Fluent Theme

13 Jul 20266 minutes to read

Fluent Theme provides an elegant UI design with reveal animation, high visibility keyboard visual, and acrylic effect for Windows in a WPF application. The following theme variants are supported:

  • Fluent Light Theme (theme name: FluentLight)
  • Fluent Dark Theme (theme name: FluentDark)

Applying the Fluent theme

The following example shows how to apply the Fluent Dark theme to a WPF Window using the Skin Manager. When applying the theme to the Window, the same theme will be applied to all of its child elements. To apply the Fluent Light theme instead, change the ThemeName value to FluentLight.

<syncfusion:ChromelessWindow x:Class="DataGrid_Themes.MainWindow"
                             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                             xmlns:local="clr-namespace:DataGrid_Themes"
                             xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
							 xmlns:syncfusionskin ="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF"
                             Icon="App.ico"
                             Title="Getting Started"
                             WindowStartupLocation="CenterScreen"
                             syncfusionskin:SfSkinManager.Theme="{syncfusionskin:SkinManagerExtension ThemeName=FluentDark}">

</syncfusion:ChromelessWindow>
SfSkinManager.SetTheme(this, new FluentTheme("FluentDark"));

Reveal animation

The reveal animation for WPF controls can be enabled or disabled using the HoverEffectMode and PressedEffectMode properties.

NOTE

The reveal animation is enabled by default.

Hover reveal effect

Use the HoverEffectMode property to enable or disable the reveal animation while hovering over the controls.

The HoverEffect enum contains the following values:

  • Background - The hover reveal animation effect will be applied only for the control Background.
  • BackgroundAndBorder - The hover reveal animation effect will be applied for both the control Border and Background.
  • Border - The hover reveal animation effect will be applied only for the control Border.
  • None - The hover reveal animation effect will be disabled.

NOTE

The default value is HoverEffect.BackgroundAndBorder.

<syncfusion:ChromelessWindow x:Class="DataGrid_Themes.MainWindow"
                             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                             xmlns:local="clr-namespace:DataGrid_Themes"
                             xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
							 xmlns:syncfusionskin ="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF"
                             Icon="App.ico"
                             Title="Getting Started"
                             WindowStartupLocation="CenterScreen"
                             syncfusionskin:SfSkinManager.Theme="{syncfusionskin:SkinManagerExtension ThemeName=FluentDark, FluentHoverEffectMode=Border}">

</syncfusion:ChromelessWindow>
SfSkinManager.SetTheme(this, new FluentTheme() { ThemeName = "FluentDark", HoverEffectMode = HoverEffect.Border });

Pressed effect

The PressedEffectMode property can be used to enable or disable the reveal animation when a control is pressed with the mouse or touch.

The PressedEffect enum contains the following values:

  • Glow - Applies a glow animation effect when pressed.
  • Reveal - Applies a reveal animation effect when pressed.
  • None - Disables the pressed animation effect.

NOTE

The default value is PressedEffect.Reveal.

<syncfusion:ChromelessWindow x:Class="DataGrid_Themes.MainWindow"
                             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                             xmlns:local="clr-namespace:DataGrid_Themes"
                             xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
							 xmlns:syncfusionskin ="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF"
                             Icon="App.ico"
                             Title="Getting Started"
                             WindowStartupLocation="CenterScreen"
                             syncfusionskin:SfSkinManager.Theme="{syncfusionskin:SkinManagerExtension ThemeName=FluentDark, FluentPressedEffectMode=Reveal}">

</syncfusion:ChromelessWindow>
SfSkinManager.SetTheme(this, new FluentTheme() { ThemeName = "FluentDark", PressedEffectMode = PressedEffect.Reveal });

Acrylic window background

A translucent blurred acrylic background can be enabled or disabled for windows using the ShowAcrylicBackground property.

NOTE

The default value is false.

SfSkinManager.SetTheme(this, new FluentTheme() { ThemeName = "FluentDark", ShowAcrylicBackground = true });