FluentWPF Documentation

FluentWPF brings the Windows Fluent Design System to WPF applications. Key features include:

• Acrylic: Provides AcrylicWindow and AcrylicBrush for translucent, material-like effects.
• Reveal: Provides Reveal-style visual effects for standard controls like Button, TextBox, and ListBox.
• ParallaxView: Implements parallax scrolling effects.
• AccentColors: Provides access to system accent colors.

To use FluentWPF in your WPF project, install the FluentWPF NuGet package.

Install-Package FluentWPF

After installing the NuGet package, you must perform two setup steps to use the library's features:

1. Add the XAML namespace: Register the fw prefix in your Window or UserControl XAML to access FluentWPF types.
2. Merge ResourceDictionaries: Add the FluentWPF control styles to your App.xaml so that the styles are available globally throughout your application.

<!-- 1. Add XAML namespace -->
xmlns:fw="clr-namespace:SourceChord.FluentWPF;assembly=FluentWPF"

<!-- 2. Add ResourceDictionary to App.xaml -->
<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
             <!--  FluentWPF Controls  -->
            <ResourceDictionary Source="pack://application:,,,/FluentWPF;component/Styles/Controls.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

The ParallaxView control creates a parallax effect between a background image and a foreground content source (like a ListBox).

Set VerticalShift and HorizontalShift to control the intensity of the effect, and bind the Source property to the element being scrolled.

<Grid>
    <fw:ParallaxView VerticalShift="200" HorizontalShift="200"
                     Source="{Binding ElementName=list}">
        <Image Source="/Assets/Images/1.jpg" Stretch="UniformToFill"/>
    </fw:ParallaxView>
    <ListBox x:Name="list" ItemsSource="{Binding Items}"/>
</Grid>

The AcrylicBrush can be used to apply the acrylic effect to specific UI elements (like a Rectangle or Border) by referencing a source element that provides the background context.

<!-- Apply AcrylicBrush to a Rectangle, using 'grid' as the source -->
<Rectangle Grid.ColumnSpan="2"
           Margin="40"
           Fill="{fw:AcrylicBrush grid}"
           Stroke="Black" />

Use the following styles to apply the Reveal effect to standard WPF controls:

FluentWPF provides a set of dynamic resources for standard Windows color palettes (Base, Alt, Chrome, and Opacity colors) that automatically adapt to Light and Dark modes.

Base Colors

Used for primary backgrounds. Examples: SystemBaseHighColorBrush, SystemBaseMediumColorBrush.

Alt Colors

Used for alternative UI elements. Examples: SystemAltHighColorBrush, SystemAltMediumColorBrush.

Chrome Colors

Used for window chrome and borders. Examples: SystemChromeHighColorBrush, SystemChromeLowColorBrush.

Usage

Access these using DynamicResource to ensure they update when the system theme changes.

<!-- Example usage of Base and Alt colors -->
<Border Background="{DynamicResource SystemBaseHighColorBrush}"/>
<TextBlock Foreground="{DynamicResource SystemAltHighColorBrush}"/>

FluentWPF provides access to the user's system accent colors via the fw:AccentColors class. These can be accessed using StaticResource or Binding.

Available brushes include:

• ImmersiveSystemAccentBrush (The main accent color)
• ImmersiveSystemAccentLight1Brush through ImmersiveSystemAccentLight3Brush (Lighter variants)
• ImmersiveSystemAccentDark1Brush through ImmersiveSystemAccentDark3Brush (Darker variants)

The AcrylicWindow provides several properties to customize the appearance of the acrylic material: