Skip to content

Latest commit

 

History

History
400 lines (325 loc) · 15.6 KB

README.md

File metadata and controls

400 lines (325 loc) · 15.6 KB
Raw


FluentWPF

Fluent Design System for WPF

NuGet NuGet(preview) NuGet(download) License

Overview

  • Acrylic
    • AcrylicWindow
    • AcrylicBrush
  • Reveal
    • Reveal styles for controls(Button/TextBox/ListBox)
  • ParallaxView
  • AccentColors

Reveal

Install

NuGet Package

Install-Package FluentWPF

https://nuget.org/packages/FluentWPF

Preparation

Add XAML namespace.

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

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>

Usage

Acrylic

AcrylicWindow

AcrylicWindow

<fw:AcrylicWindow x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        xmlns:fw="clr-namespace:SourceChord.FluentWPF;assembly=FluentWPF"
        mc:Ignorable="d"
        Title="MainWindow" Height="300" Width="300">
    <Grid Background="#70FFFFFF">
        <TextBlock Margin="10"
                   HorizontalAlignment="Left"
                   VerticalAlignment="Top"
                   Text="This is AcrylicWindow"
                   TextWrapping="Wrap" />
    </Grid>
</fw:AcrylicWindow>

Code Behind Remove base class definition.

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.

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        xmlns:fw="clr-namespace:SourceChord.FluentWPF;assembly=FluentWPF"
        mc:Ignorable="d"
        Title="AcrylicWindow2" Height="300" Width="300"
        fw:AcrylicWindow.Enabled="True">
    <Grid>
        
    </Grid>
</Window>

Code Behind

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }
}

AcrylicBrush

AcrylicBrush

<Window x:Class="FluentWPFSample.Views.AcrylicBrushSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:fw="clr-namespace:SourceChord.FluentWPF;assembly=FluentWPF"
        xmlns:local="clr-namespace:FluentWPFSample.Views"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        Title="AcrylicBrushSample"
        Width="640"
        Height="480"
        mc:Ignorable="d">
    <Window.Resources>
        <BooleanToVisibilityConverter x:Key="booleanToVisibilityConverter" />
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid x:Name="grid" Background="White">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <StackPanel>
                <Button Width="75" Margin="5" Content="Button" />
                <Button Width="75" Margin="5" Content="Button" />
                <Button Width="75" Margin="5" Content="Button" />
            </StackPanel>
            <Image Grid.Column="1"
                   Margin="5"
                   Source="/FluentWPFSample;component/Assets/Images/1.jpg" />
        </Grid>

        <Rectangle Grid.ColumnSpan="2"
                   Margin="40"
                   Fill="{fw:AcrylicBrush grid}"
                   Stroke="Black"
                   Visibility="{Binding IsChecked, ElementName=chkShowAcrylicLayer, Converter={StaticResource booleanToVisibilityConverter}}" />
        <CheckBox x:Name="chkShowAcrylicLayer"
                  Grid.Row="1"
                  Margin="5"
                  HorizontalAlignment="Left"
                  Content="Show Acrylic Rect"
                  IsChecked="True" />
    </Grid>
</Window>

Reveal

Reveal effect for controls.

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

Reveal

<Grid fw:PointerTracker.Enabled="True" Background="#01FFFFFF" Margin="3">
    <StackPanel>
        <Button Content="Button" HorizontalAlignment="Left" Margin="5" Width="75" Height="32"
                Style="{StaticResource ButtonRevealStyle}"/>

        <Button Content="Button" HorizontalAlignment="Left" Margin="5" Width="75" Height="32"
                Background="Transparent"
                Style="{StaticResource ButtonRevealStyle}"/>

        <TextBox HorizontalAlignment="Left" Height="23" Margin="5" Text="TextBox" Width="120"
             Style="{StaticResource TextBoxRevealStyle}"/>
    </StackPanel>
</Grid>

Styles

Control Style Name
Button ButtonRevealStyle
Button ButtonAccentRevealStyle
Button ButtonRoundRevealStyle
Button ButtonRoundAccentRevealStyle
TextBox TextBoxRevealStyle
PasswordBox PasswordBoxRevealStyle
ListBox ListBoxRevealStyle
ComboBox ComboBoxRevealStyle

ParallaxView

ParallaxView

<Grid>
    <fw:ParallaxView VerticalShift="200" HorizontalShift="200"
                     Source="{Binding ElementName=list}">
        <Image Source="/FluentWPFSample;component/Assets/Images/1.jpg" Stretch="UniformToFill"/>
    </fw:ParallaxView>
    <ListBox x:Name="list" Background="#88EEEEEE" ScrollViewer.CanContentScroll="False"
             ItemsSource="{Binding Items}"/>
</Grid>

Properties

Property Name Type Description

AccentColors

Brushes

<StackPanel Margin="5">
    <StackPanel.Resources>
        <Style TargetType="Border">
            <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" />
        </Style>
        <Style TargetType="TextBlock">
            <Setter Property="TextWrapping" Value="Wrap" />
            <Setter Property="VerticalAlignment" Value="Bottom" />
            <Setter Property="FontSize" Value="14" />
        </Style>
    </StackPanel.Resources>
    <StackPanel Orientation="Horizontal" Margin="5">
        <Border Background="{x:Static fw:AccentColors.ImmersiveSystemAccentBrush}">
            <TextBlock Text="ImmersiveSystemAccentBrush" />
        </Border>
    </StackPanel>
    <StackPanel Orientation="Horizontal" Margin="5">
        <Border Background="{x:Static fw:AccentColors.ImmersiveSystemAccentLight1Brush}">
            <TextBlock Text="ImmersiveSystemAccentLight1Brush"/>
        </Border>
        <Border Background="{x:Static fw:AccentColors.ImmersiveSystemAccentLight2Brush}">
            <TextBlock Text="ImmersiveSystemAccentLight2Brush"/>
        </Border>
        <Border Background="{x:Static fw:AccentColors.ImmersiveSystemAccentLight3Brush}">
            <TextBlock Text="ImmersiveSystemAccentLight3Brush" />
        </Border>
    </StackPanel>
    <StackPanel Orientation="Horizontal" Margin="5">
        <Border Background="{x:Static fw:AccentColors.ImmersiveSystemAccentDark1Brush}">
            <TextBlock Text="ImmersiveSystemAccentDark1Brush" Foreground="White"/>
        </Border>
        <Border Background="{x:Static fw:AccentColors.ImmersiveSystemAccentDark2Brush}">
            <TextBlock Text="ImmersiveSystemAccentDark2Brush" Foreground="White"/>
        </Border>
        <Border Background="{x:Static fw:AccentColors.ImmersiveSystemAccentDark3Brush}">
            <TextBlock Text="ImmersiveSystemAccentDark3Brush" Foreground="White"/>
        </Border>
    </StackPanel>
</StackPanel>

Accent Color

Accent color depends on the accent color of the system.

Sample Color Brush
#a6d8ff ImmersiveSystemAccentLight3 ImmersiveSystemAccentLight3Brush
#76b9ed ImmersiveSystemAccentLight2 ImmersiveSystemAccentLight2Brush
#429ce3 ImmersiveSystemAccentLight1 ImmersiveSystemAccentLight1Brush
#0078d7 ImmersiveSystemAccent ImmersiveSystemAccentBrush
#005a9e ImmersiveSystemAccentDark1 ImmersiveSystemAccentDark1Brush
#004275 ImmersiveSystemAccentDark2 ImmersiveSystemAccentDark2Brush
#002642 ImmersiveSystemAccentDark3 ImmersiveSystemAccentDark3Brush

Usage:

 <Border Background="{x:Static fw:AccentColors.ImmersiveSystemAccentBrush}"/>
 <Border Background="{Binding Path=(fw:AccentColors.ImmersiveSystemAccentBrush)}"/>

Base Color

Light Dark Color Brush
#000000 #ffffff SystemBaseHighColor SystemBaseHighColorBrush
#333333 #cccccc SystemBaseMediumHighColor SystemBaseMediumHighColorBrush
#666666 #999999 SystemBaseMediumColor SystemBaseMediumColorBrush
#999999 #666666 SystemBaseMediumLowColor SystemBaseMediumLowColorBrush
#cccccc #333333 SystemBaseLowColor SystemBaseLowColorBrush

Usage:

 <Border Background="{DynamicResource SystemBaseHighColorBrush}"/>

Alt Color

Light Dark Color Brush
#ffffff #000000 SystemAltHighColor SystemAltHighColorBrush
#cccccc #333333 SystemAltMediumHighColor SystemAltMediumHighColorBrush
#999999 #666666 SytemAltMediumColor SytemAltMediumColorBrush
#666666 #999999 SystemAltMediumLowColor SystemAltMediumLowColorBrush
#333333 #cccccc SystemAltLowColor SystemAltLowColorBrush

Usage:

 <TextBlock Foreground="{DynamicResource SystemAltHighColorBrush}"/>

Chrome Color

Light Dark Color Brush
#CCCCCC #767676 SystemChromeHighColor SystemChromeHighColorBrush
#E6E6E6 #1F1F1F SytemAltMediumColor SytemAltMediumColorBrush
#F2F2F2 #2B2B2B SystemChromeMediumLowColor SystemChromeMediumLowColorBrush
#F2F2F2 #171717 SystemChromeLowColor SystemChromeLowColorBrush

Usage:

 <Border Background="{DynamicResource SystemChromeMediumBrush}"/>

Opacity Color

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

Base Color Opacity Color Brush
#000000 FF SystemChromeBlackHighColor SystemChromeBlackHighColorBrush
#000000 CC SystemChromeBlackMediumColor SystemChromeBlackMediumColor
#000000 66 SystemChromeBlackMediumLowColor SystemChromeBlackMediumLowColorBrush
#000000 33 SystemChromeBlackLowColor SystemChromeBlackLowColorBrush
#FFFFFF 33 SystemListMediumColor SystemListMediumColorBrush
#FFFFFF 19 SystemListLowColor SystemListLowColorBrush

Other Colors

Light Dark Color Brush
#FFFFFF #FFFFFF SystemChromeWhiteColor SystemChromeWhiteColorBrush
#171717 #F2F2F2 SystemChromeAltLowColor SystemChromeAltLowColorBrush
#CCCCCC #333333 SystemChromeDisabledHighColor SystemChromeDisabledHighColorBrush
#7A7A7A #858585 SystemChromeDisabledLowColor SystemChromeDisabledLowColorBrush

License

MIT License