FluentWpfCore 1.0.3

FluentWpfCore (Preview)

A WPF library providing core Fluent Design controls, materials, and visual effects.
README_Zh-CN.md

<img src="https://img.shields.io/badge/license-MIT-yellow"/>

✨ Features

🪟 Window Material System

• Multiple material types — Acrylic, Mica, MicaAlt and other modern window materials
• Flexible combination — combine material effects with rounded corners, shadows, and DWM animations
• Cross-version compatibility — supports older Windows 10 Composition APIs and the Windows 11 System Backdrop APIs
• Dark mode support — built-in light/dark mode switching (primarily for Mica effects)
• Custom composition color — customize background color and opacity for Acrylic

🎨 Enhanced Basic Controls

• FluentPopup — popup with acrylic background, rounded corners, shadow and sliding animations
• SmoothScrollViewer — provides smooth, fluid scrolling
• Fluent-style templates — modern styles and templates for Menu, ContextMenu and ToolTip

🔧 Low-level Capabilities

• DWM integration — effects are rendered via DWM; best results on Windows 11
• WindowChrome compatibility — works with WPF's native WindowChrome
• Theme-agnostic — does not force a UI style; integrates with any existing theme

FluentWpfCore does not ship a full set of high-level UI controls. Instead, it provides low-level capabilities compatible with any theme so you can add modern visual effects without changing your existing UI style.

🔧 System Requirements

• Windows 10 1809 or later (some features require Windows 11)

Feature support

Supported .NET versions

• .NET 10.0 Windows
• .NET 8.0 Windows
• .NET 6.0 Windows
• .NET Framework 4.5 ~ 4.8

📖 Usage Guide

Window Materials

FluentWpfCore provides comprehensive window material support (Acrylic, Mica, etc.) and combinations of DWM effects. Use combinations of the following categories:

Example — creating an Acrylic window with a custom composition color, rounded corners, shadow and DWM animation, removing the native title bar and buttons:

<Window x:Class="YourApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:fluent="https://github.com/TwilightLemon/FluentWpfCore"
        Title="MainWindow"
        Width="800"
        Height="450"

        Background="Transparent"
        fluent:DwmAnimation.EnableDwmAnimation="True"
        fluent:WindowMaterial.WindowCorner="Round">
    
    <Window.Resources>
        <WindowChrome x:Key="windowChrome" CaptionHeight="32" />
    </Window.Resources>
    
    <fluent:WindowMaterial.Material>
        <fluent:WindowMaterial x:Name="windowMaterial"
                               CompositonColor="#CC6699FF"
                               IsDarkMode="False"
                               MaterialMode="Acrylic"
                               UseWindowComposition="True"
                               WindowChromeEx="{StaticResource windowChrome}" />
    </fluent:WindowMaterial.Material>
    
    
</Window>

Property Summary

Window Corners

Forces Windows 11-style rounded corners on a window to override WPF or DWM defaults. Enabling rounded corners can also bring window shadow (DWM-dependent, Windows 11 only) and borders.

You can enable corners in XAML or on the native HWND in code:

<Window xmlns:fluent="https://github.com/TwilightLemon/FluentWpfCore"
        fluent:WindowMaterial.WindowCorner="Round"
        ...>

using FluentWpfCore.Interop;
MaterialApis.SetWindowCorner(hwnd, corner);

Supported corner types:

• Default — system default
• DoNotRound — disable rounding
• Round — rounded corners
• RoundSmall — small rounded corners

Recommended scenarios:

• Use corners when relying on Acrylic with UseWindowComposition=true because DWM defaults may produce square corners without shadow
• Control the corner style of ToolTip, Popup and other transient windows
• Customize window border styling even when using WindowChrome or AllowsTransparency

DWM Animations

Enable native window animations (maximize/minimize) while removing the native title bar and buttons:

<Window xmlns:fluent="https://github.com/TwilightLemon/FluentWpfCore"
        fluent:DwmAnimation.EnableDwmAnimation="True"
        ...>

Note: enabling DWM animations will ignore Window.ResizeMode. If you need ResizeMode="NoResize", set WindowChrome.ResizeBorderThickness="0" instead.

Combining Effects

You can combine the above behaviors freely. Examples:

Plain Mica native window

<Window Background="Transparent"
        ...>
    <fluent:WindowMaterial.Material>
        <fluent:WindowMaterial IsDarkMode="False"
                               MaterialMode="Mica"/>
    </fluent:WindowMaterial.Material>
</Window>

This enables Mica as the background while keeping native title bar, buttons, borders and animations.

Mica window with a custom title bar while preserving native animations and borders

<Window Background="Transparent"
        fluent:DwmAnimation.EnableDwmAnimation="True"
        ...>
    <Window.Resources>
        <WindowChrome x:Key="windowChrome" CaptionHeight="32" />
    </Window.Resources>
    <fluent:WindowMaterial.Material>
        <fluent:WindowMaterial IsDarkMode="False"
                               MaterialMode="Mica"
                               WindowChromeEx="{StaticResource windowChrome}"/>
    </fluent:WindowMaterial.Material>
</Window>

Keep Acrylic when unfocused, with rounded corners and shadow

<Window Background="Transparent"
        fluent:DwmAnimation.EnableDwmAnimation="True"
        fluent:WindowMaterial.WindowCorner="Round">
    <Window.Resources>
        <WindowChrome x:Key="windowChrome" CaptionHeight="32" />
    </Window.Resources>
    <fluent:WindowMaterial.Material>
        <fluent:WindowMaterial x:Name="windowMaterial"
                               CompositonColor="#CC6699FF"
                               IsDarkMode="False"
                               MaterialMode="Acrylic"
                               UseWindowComposition="True"
                               WindowChromeEx="{StaticResource windowChrome}"/>
    </fluent:WindowMaterial.Material>
</Window>

When UseWindowComposition="True" a different API path is used to enable legacy material effects on Windows 10.

Acrylic window with square corners and no shadow

<Window Background="Transparent"
        fluent:DwmAnimation.EnableDwmAnimation="True">
    <Window.Resources>
        <WindowChrome x:Key="windowChrome" CaptionHeight="32" />
    </Window.Resources>
    <fluent:WindowMaterial.Material>
        <fluent:WindowMaterial x:Name="windowMaterial"
                               CompositonColor="#CC6699FF"
                               IsDarkMode="False"
                               MaterialMode="Acrylic"
                               UseWindowComposition="True"
                               WindowChromeEx="{StaticResource windowChrome}"/>
    </fluent:WindowMaterial.Material>
</Window>

FluentPopup

FluentPopup is an enhanced popup control with an acrylic background, rounded corners, shadow and custom enter/exit animations, and optional follow-window-moving behavior:

<Button x:Name="ShowPopupBtn" Content="Show Popup" />

<fluent:FluentPopup x:Name="testPopup"
                    Background="{DynamicResource PopupBackgroundColor}"
                    ExtPopupAnimation="SlideDown"
                    FollowWindowMoving="False"
                    Placement="Bottom"
                    WindowCorner="Round"
                    PlacementTarget="{Binding ElementName=ShowPopupBtn}"
                    StaysOpen="False">
    <Grid Width="180" Height="120">
        <TextBlock Text="Hello FluentWpfCore!"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center" />
    </Grid>
</fluent:FluentPopup>

Properties

If you need non-solid backgrounds, keep the popup background transparent and provide custom visuals inside the popup content.

SmoothScrollViewer

A smooth scrolling ScrollViewer that enhances the native WPF control.

• Supports mouse wheel and touchpad input
• Supports horizontal and vertical scrolling, toggleable with Shift key; native touchpad horizontal scrolling supported
• Customizable physics models for different scrolling animation effects

<fluent:SmoothScrollViewer>
    <StackPanel>
        
    </StackPanel>
</fluent:SmoothScrollViewer>

Properties

Scroll Physics Models

SmoothScrollViewer uses a pluggable physics model through the IScrollPhysics interface, allowing you to customize scrolling behavior. Two built-in implementations are provided:

DefaultScrollPhysics (Velocity-based)

Uses velocity decay with friction for a natural momentum feel. The total scroll distance equals the input delta.

<fluent:SmoothScrollViewer>
    <fluent:SmoothScrollViewer.Physics>
        <fluent:DefaultScrollPhysics Smoothness="0.8" />
    </fluent:SmoothScrollViewer.Physics>
    
</fluent:SmoothScrollViewer>

ExponentialScrollPhysics (Exponential easing)

Uses exponential decay function for smooth scrolling with a "fast start, slow end" feel.

<fluent:SmoothScrollViewer>
    <fluent:SmoothScrollViewer.Physics>
        <fluent:ExponentialScrollPhysics DecayRate="10" StopThreshold="0.5" />
    </fluent:SmoothScrollViewer.Physics>
    
</fluent:SmoothScrollViewer>

Usage Examples

Basic usage

<fluent:SmoothScrollViewer>
    <StackPanel>
        <TextBlock Text="Item 1" Height="100" />
        <TextBlock Text="Item 2" Height="100" />
        <TextBlock Text="Item 3" Height="100" />
        
    </StackPanel>
</fluent:SmoothScrollViewer>

Configure scroll orientation

<fluent:SmoothScrollViewer PreferredScrollOrientation="Horizontal"
                           HorizontalScrollBarVisibility="Auto"
                           VerticalScrollBarVisibility="Disabled">
    <StackPanel Orientation="Horizontal">
        
    </StackPanel>
</fluent:SmoothScrollViewer>

Toggle between vertical and horizontal with Shift key

<fluent:SmoothScrollViewer AllowTogglePreferredScrollOrientationByShiftKey="True"
                           HorizontalScrollBarVisibility="Auto"
                           VerticalScrollBarVisibility="Auto">
    
    <Grid>
        
    </Grid>
</fluent:SmoothScrollViewer>

Temporarily disable smooth scrolling

<fluent:SmoothScrollViewer IsEnableSmoothScrolling="False">
    
    <StackPanel>
        
    </StackPanel>
</fluent:SmoothScrollViewer>

Use with ItemsControl for large lists

<fluent:SmoothScrollViewer>
    <ItemsControl ItemsSource="{Binding Items}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border Height="50" Background="LightGray" Margin="5">
                    <TextBlock Text="{Binding}" VerticalAlignment="Center" Margin="10" />
                </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</fluent:SmoothScrollViewer>

Custom physics implementation

You can implement your own physics model by implementing the IScrollPhysics interface:

public class CustomScrollPhysics : IScrollPhysics
{
    public bool IsStable { get; private set; }
    
    public void OnScroll(double delta)
    {
        // Handle scroll input, delta is the scroll amount
        IsStable = false;
    }
    
    public double Update(double currentOffset, double dt)
    {
        // Calculate and return new offset based on current offset and delta time
        // Set IsStable = true when animation should stop
        return newOffset;
    }
}

Then apply it to the SmoothScrollViewer:

smoothScrollViewer.Physics = new CustomScrollPhysics();

Fluent-style Menu

Since menu styling involves templates and resources, include the theme resources first.

1. Merge resource dictionary

In App.xaml merge the FluentWpfCore theme resources:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            
            <ResourceDictionary Source="pack://application:,,,/FluentWpfCore;component/Themes/Generic.xaml" />
        </ResourceDictionary.MergedDictionaries>
        <SolidColorBrush x:Key="ForegroundColor" Color="#FF0E0E0E" />
        
        
        <SolidColorBrush x:Key="AccentColor" Color="#FFFF8541" />
    </ResourceDictionary>
</Application.Resources>

2. Apply global styles (optional)

<Style BasedOn="{StaticResource FluentContextMenuStyle}" TargetType="{x:Type ContextMenu}">
    <Setter Property="Foreground" Value="{DynamicResource ForegroundColor}" />
</Style>


<Style BasedOn="{StaticResource FluentMenuItemStyle}" TargetType="MenuItem">
    <Setter Property="Height" Value="36" />
    <Setter Property="Foreground" Value="{DynamicResource ForegroundColor}" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
</Style>


<Style TargetType="TextBox">
    <Setter Property="ContextMenu" Value="{StaticResource FluentTextBoxContextMenu}" />
</Style>


<Style TargetType="{x:Type ToolTip}">
    <Setter Property="fluent:FluentStyle.UseFluentStyle" Value="True" />
    <Setter Property="Background" Value="{DynamicResource PopupBackgroundColor}" />
    <Setter Property="Foreground" Value="{DynamicResource ForegroundColor}" />
</Style>

Menu example

<Menu Background="Transparent"
      Foreground="{DynamicResource ForegroundColor}"
      WindowChrome.IsHitTestVisibleInChrome="True">
    <MenuItem Header="_File">
        <MenuItem Header="_New" />
        <MenuItem Header="_Open" />
        <MenuItem Header="_Recent Files">
            <MenuItem Header="File1.txt" />
        </MenuItem>
    </MenuItem>
    <MenuItem Header="_Help" />
</Menu>

ContextMenu example

<TextBlock Text="Right Click Me">
    <TextBlock.ContextMenu>
        <ContextMenu>
            <MenuItem Header="Menu Item 1"
                      Icon="📋"
                      InputGestureText="Ctrl+C" />
            <MenuItem Header="Menu Item 2">
                <MenuItem Header="Child Item 1" />
                <MenuItem Header="Child Item 2" />
                <MenuItem Header="Child Item 3"
                          IsCheckable="True"
                          IsChecked="True" />
            </MenuItem>
            <MenuItem Header="Menu Item 3" />
        </ContextMenu>
    </TextBlock.ContextMenu>
</TextBlock>

ToolTip example

<TextBlock Text="Hover over me"
           ToolTipService.ShowDuration="3000">
    <TextBlock.ToolTip>
        <ToolTip>
            <TextBlock Text="This is a FluentWpfCore ToolTip!"/>
        </ToolTip>
    </TextBlock.ToolTip>
</TextBlock>

Or simply:

<TextBlock Text="Hover over me"
           ToolTip="This is a FluentWpfCore ToolTip!"/>

🤝 Contributing

Issues and pull requests are welcome!

📄 License

This project is open source under the MIT license.

🙏 Thanks

Thanks to all contributors to FluentWpfCore!

🧷 Related Tutorials

• Fluent Window: WPF: Emulating native UWP window styles — Acrylic/Mica, custom title bar, native DWM animations (includes helper classes)
• Fluent Popup & ToolTip: Using WindowMaterial in Popup and ToolTip on Win10/Win11
• Fluent ScrollViewer: Smooth ScrollViewer implemented with CompositionTarget.Rendering supporting wheel, touchpad, touch and pen
• Fluent Menu: Using Fluent-style acrylic effects for ContextMenu in WPF

Made with ❤️ by TwilightLemon