https://github.com/sourcechord/FluentWPF

Fluent Design System for WPF.
https://github.com/sourcechord/FluentWPF
acrylic c-sharp fluent-design fluentdesign theme wpf xaml
Last synced: about 2 months ago
JSON representation
Fluent Design System for WPF.
Host: GitHub
URL: https://github.com/sourcechord/FluentWPF
Owner: sourcechord
License: mit
Created: 2017-11-27T22:07:51.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2022-04-08T17:04:32.000Z (about 3 years ago)
Last Synced: 2025-04-13T21:33:51.574Z (about 2 months ago)
Topics: acrylic, c-sharp, fluent-design, fluentdesign, theme, wpf, xaml
Language: C#
Size: 5.69 MB
Stars: 1,471
Watchers: 53
Forks: 115
Open Issues: 40
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project

awesome-wpf - FluentWPF - (FREE, OPEN SOURCE) Fluent Design System for WPF. (Libraries / Individual Controls)
README

        





FluentWPF



Fluent Design System for WPF




[![NuGet](https://img.shields.io/nuget/v/FluentWPF.svg)](https://www.nuget.org/packages/FluentWPF/latest)

[![NuGet(preview)](https://img.shields.io/nuget/vpre/FluentWPF.svg)](https://www.nuget.org/packages/FluentWPF/latest/prerelease)

[![NuGet(download)](https://img.shields.io/nuget/dt/FluentWPF.svg)](https://www.nuget.org/packages/FluentWPF/)

[![License](https://img.shields.io/github/license/sourcechord/FluentWPF)](https://github.com/sourcechord/FluentWPF/blob/master/LICENSE)



## Overview

* Acrylic

  * AcrylicWindow

  * AcrylicBrush

* Reveal

  * Reveal styles for controls(Button/TextBox/ListBox)

* ParallaxView

* AccentColors

![Reveal](./docs/Reveal/demo.gif)

## Install

*NuGet Package*

```

Install-Package FluentWPF

```

https://nuget.org/packages/FluentWPF

### Preparation

Add XAML namespace.

```xml

xmlns:fw="clr-namespace:SourceChord.FluentWPF;assembly=FluentWPF"

```

Add ResourceDictionary to App.xaml.

```xml

    

        

             

            

        

    

```

## Usage

### Acrylic

#### AcrylicWindow

![AcrylicWindow](./docs/Acrylic/AcrylicWindow.gif)

```xml

    

        

    

```

**Code Behind**

Remove base class definition.

```cs

public partial class MainWindow

{

    public MainWindow()

    {

        InitializeComponent();

    }

}

```

##### Properties

|Property Name|Type|Description|

|-----|-----|-----|

|TintColor|Color|Gets or sets the color tint for the semi-transparent acrylic material.|

|TintOpacity|double|Gets or sets the degree of opacity of the color tint.|

|NoiseOpacity|double|Gets or sets the degree of opacity of the noise layer.|

|FallbackColor|Color|Gets or sets the color when window is inactive.|

|AcrylicWindowStyle|Normal  NoIcon  None|Gets or sets a value that indicates the style of the Acrylic Window.|

The difference between kind of AcrylicWindowStyle is demonstrated as follows,

|AcrylicWindowStyle="Normal"|AcrylicWindowStyle="NoIcon"|AcrylicWindowStyle="None"|

|-----|-----|-----|

||||

##### Using as Attached Property

AcrylicWindow can also be used as an Attached Property.

```xml

    

        

    

```

**Code Behind**

```cs

public partial class MainWindow : Window

{

    public MainWindow()

    {

        InitializeComponent();

    }

}

```

#### AcrylicBrush

![AcrylicBrush](./docs/Acrylic/AcrylicBrush.gif)

```xml

    

        

    

    

        

            

            

        

        

            

                

                

            

            

                

                

                

            

            

        

        

        

    

```

### Reveal

Reveal effect for controls.

To use the reveal effect, set `fw:PointerTracker.Enabled="True"` on a parent container.

![Reveal](./docs/Reveal/Reveal.gif)

```xml

    

        

        

        

    

```

#### Styles

|Control|Style Name|

|-----|-----|

|Button|ButtonRevealStyle|

|Button|ButtonAccentRevealStyle|

|Button|ButtonRoundRevealStyle|

|Button|ButtonRoundAccentRevealStyle|

|TextBox|TextBoxRevealStyle|

|PasswordBox|PasswordBoxRevealStyle|

|ListBox|ListBoxRevealStyle|

|ComboBox|ComboBoxRevealStyle|

### ParallaxView

![ParallaxView](./docs/Controls/ParallaxView.gif)

```xml

    

        

    

    

```

#### Properties

|Property Name|Type|Description|

|-----|-----|-----|

### AccentColors

![Brushes](./docs/AccentColors/Brushes.png)

```xml

    

        

            <Setter Property="Width" Value="120" />

            <Setter Property="Height" Value="120" />

            <Setter Property="Margin" Value="3" />

            <Setter Property="BorderBrush" Value="Black" />

            <Setter Property="BorderThickness" Value="1" />

        

        

            <Setter Property="TextWrapping" Value="Wrap" />

            <Setter Property="VerticalAlignment" Value="Bottom" />

            <Setter Property="FontSize" Value="14" />

        

    

    

        

            

        

    

    

        

            

        

        

            

        

        

            

        

    

    

        

            

        

        

            

        

        

            

        

    

```

#### Accent Color

_Accent color depends on the accent color of the system._

|Sample|Color|Brush|

|-----|-----|-----|

|![#a6d8ff](https://via.placeholder.com/15/a6d8ff?text=+)|ImmersiveSystemAccentLight3|ImmersiveSystemAccentLight3Brush|

|![#76b9ed](https://via.placeholder.com/15/76b9ed?text=+)|ImmersiveSystemAccentLight2|ImmersiveSystemAccentLight2Brush|

|![#429ce3](https://via.placeholder.com/15/429ce3?text=+)|ImmersiveSystemAccentLight1|ImmersiveSystemAccentLight1Brush|

|![#0078d7](https://via.placeholder.com/15/0078d7?text=+)|ImmersiveSystemAccent|ImmersiveSystemAccentBrush|

|![#005a9e](https://via.placeholder.com/15/005a9e?text=+)|ImmersiveSystemAccentDark1|ImmersiveSystemAccentDark1Brush|

|![#004275](https://via.placeholder.com/15/004275?text=+)|ImmersiveSystemAccentDark2|ImmersiveSystemAccentDark2Brush|

|![#002642](https://via.placeholder.com/15/002642?text=+)|ImmersiveSystemAccentDark3|ImmersiveSystemAccentDark3Brush|

**Usage:**

```xml

 

 

```

#### Base Color

|Light|Dark|Color|Brush|

|-----|-----|-----|-----|

|![#000000](https://via.placeholder.com/15/000000?text=+)|![#ffffff](https://via.placeholder.com/15/ffffff?text=+)|SystemBaseHighColor|SystemBaseHighColorBrush|

|![#333333](https://via.placeholder.com/15/333333?text=+)|![#cccccc](https://via.placeholder.com/15/cccccc?text=+)|SystemBaseMediumHighColor|SystemBaseMediumHighColorBrush|

|![#666666](https://via.placeholder.com/15/666666?text=+)|![#999999](https://via.placeholder.com/15/999999?text=+)|SystemBaseMediumColor|SystemBaseMediumColorBrush|

|![#999999](https://via.placeholder.com/15/999999?text=+)|![#666666](https://via.placeholder.com/15/666666?text=+)|SystemBaseMediumLowColor|SystemBaseMediumLowColorBrush|

|![#cccccc](https://via.placeholder.com/15/cccccc?text=+)|![#333333](https://via.placeholder.com/15/333333?text=+)|SystemBaseLowColor|SystemBaseLowColorBrush|

**Usage:**

```xml

 

```

#### Alt Color

|Light|Dark|Color|Brush|

|-----|-----|-----|-----|

|![#ffffff](https://via.placeholder.com/15/ffffff?text=+)|![#000000](https://via.placeholder.com/15/000000?text=+)|SystemAltHighColor|SystemAltHighColorBrush|

|![#cccccc](https://via.placeholder.com/15/cccccc?text=+)|![#333333](https://via.placeholder.com/15/333333?text=+)|SystemAltMediumHighColor|SystemAltMediumHighColorBrush|

|![#999999](https://via.placeholder.com/15/999999?text=+)|![#666666](https://via.placeholder.com/15/666666?text=+)|SytemAltMediumColor|SytemAltMediumColorBrush|

|![#666666](https://via.placeholder.com/15/666666?text=+)|![#999999](https://via.placeholder.com/15/999999?text=+)|SystemAltMediumLowColor|SystemAltMediumLowColorBrush|

|![#333333](https://via.placeholder.com/15/333333?text=+)|![#cccccc](https://via.placeholder.com/15/cccccc?text=+)|SystemAltLowColor|SystemAltLowColorBrush|

**Usage:**

```xml

 

```

#### Chrome Color

|Light|Dark|Color|Brush|

|-----|-----|-----|-----|

|![#CCCCCC](https://via.placeholder.com/15/CCCCCC?text=+)|![#767676](https://via.placeholder.com/15/767676?text=+)|SystemChromeHighColor|SystemChromeHighColorBrush|

|![#E6E6E6](https://via.placeholder.com/15/E6E6E6?text=+)|![#1F1F1F](https://via.placeholder.com/15/1F1F1F?text=+)|SytemAltMediumColor|SytemAltMediumColorBrush|

|![#F2F2F2](https://via.placeholder.com/15/F2F2F2?text=+)|![#2B2B2B](https://via.placeholder.com/15/2B2B2B?text=+)|SystemChromeMediumLowColor|SystemChromeMediumLowColorBrush|

|![#F2F2F2](https://via.placeholder.com/15/F2F2F2?text=+)|![#171717](https://via.placeholder.com/15/171717?text=+)|SystemChromeLowColor|SystemChromeLowColorBrush|

**Usage:**

```xml

 

```

#### Opacity Color

Windows includes a set of colors that differ only by their opacities:

|Base Color|Opacity|Color|Brush|

|-----|-----|-----|-----|

|![#000000](https://via.placeholder.com/15/000000?text=+)|FF|SystemChromeBlackHighColor|SystemChromeBlackHighColorBrush|

|![#000000](https://via.placeholder.com/15/000000?text=+)|CC|SystemChromeBlackMediumColor|SystemChromeBlackMediumColor|

|![#000000](https://via.placeholder.com/15/000000?text=+)|66|SystemChromeBlackMediumLowColor|SystemChromeBlackMediumLowColorBrush|

|![#000000](https://via.placeholder.com/15/000000?text=+)|33|SystemChromeBlackLowColor|SystemChromeBlackLowColorBrush|

|![#FFFFFF](https://via.placeholder.com/15/FFFFFF?text=+)|33|SystemListMediumColor|SystemListMediumColorBrush|

|![#FFFFFF](https://via.placeholder.com/15/FFFFFF?text=+)|19|SystemListLowColor|SystemListLowColorBrush|

#### Other Colors

|Light|Dark|Color|Brush|

|-----|-----|-----|-----|

|![#FFFFFF](https://via.placeholder.com/15/FFFFFF?text=+)|![#FFFFFF](https://via.placeholder.com/15/FFFFFF?text=+)|SystemChromeWhiteColor|SystemChromeWhiteColorBrush|

|![#171717](https://via.placeholder.com/15/171717?text=+)|![#F2F2F2](https://via.placeholder.com/15/F2F2F2?text=+)|SystemChromeAltLowColor|SystemChromeAltLowColorBrush|

|![#CCCCCC](https://via.placeholder.com/15/CCCCCC?text=+)|![#333333](https://via.placeholder.com/15/333333?text=+)|SystemChromeDisabledHighColor|SystemChromeDisabledHighColorBrush|

|![#7A7A7A](https://via.placeholder.com/15/7A7A7A?text=+)|![#858585](https://via.placeholder.com/15/858585?text=+)|SystemChromeDisabledLowColor|SystemChromeDisabledLowColorBrush|

## License

[MIT License](LICENSE)
ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/sourcechord/FluentWPF

Awesome Lists containing this project

README

FluentWPF

Fluent Design System for WPF
