Getting Started with WPF Fluent Theme

29 Jul 20216 minutes to read

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

  • Fluent Light Theme
  • Fluent Dark Theme

The following example shows how to apply fluent dark theme for WPF Window using skin manager. When applying the theme to Window, the same theme will be applied to all of its child elements.

<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

By using the HoverEffectMode property, you can enable or disable the reveal animation while hovering over the controls.

The HoverEffect enum contains following values:

  • Background - The hover reveal animation effect will be applied only for control Background.

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

  • Border - The hover reveal animation effect will be applied only for 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 a touch.

The PressedEffect enum contains the following values:

  • Glow - The glow animation effect will be applied when pressed with the mouse or touch.
  • Reveal - The reveal animation effect will be applied when pressed with the mouse or touch.
  • None - The pressed animation effect will be disabled.

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

The transparent 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 });