sourcechord / Fluentwpf
Licence: mit
Fluent Design System for WPF.
Stars: ✭ 912
Projects that are alternatives of or similar to Fluentwpf
Adonis Ui
Lightweight UI toolkit for WPF applications offering classic but enhanced windows visuals
Stars: ✭ 878 (-3.73%)
Mutual labels: wpf, xaml
Formswpflive
Live XAML development for Xamarin Forms Apps using WPF Backend.
Stars: ✭ 14 (-98.46%)
Mutual labels: wpf, xaml
Xamlflair
XamlFlair is an animation library for UWP, WPF, and Uno, built to facilitate Xaml animations using only attached properties.
Stars: ✭ 362 (-60.31%)
Mutual labels: wpf, xaml
Mahapps.metro.simplechildwindow
A simple child window for MahApps.Metro
Stars: ✭ 339 (-62.83%)
Mutual labels: wpf, xaml
Materialdesignextensions
Material Design Extensions is based on Material Design in XAML Toolkit to provide additional controls and features for WPF apps
Stars: ✭ 516 (-43.42%)
Mutual labels: wpf, xaml
Handycontrols
Contains some simple and commonly used WPF controls based on HandyControl
Stars: ✭ 347 (-61.95%)
Mutual labels: wpf, xaml
Rapid Xaml Toolkit
Tools to accelerate XAML development within Visual Studio.
Stars: ✭ 427 (-53.18%)
Mutual labels: wpf, xaml
Csconsoleformat
.NET C# library for advanced formatting of console output [Apache]
Stars: ✭ 296 (-67.54%)
Mutual labels: wpf, xaml
Toastnotifications
Toast notifications for WPF allows you to create and display rich notifications in WPF applications. It's highly configurable with set of built-in options like positions, behaviours, themes and many others. It's extendable, it gives you possibility to create custom and interactive notifications in simply manner.
Stars: ✭ 507 (-44.41%)
Mutual labels: wpf, xaml
Core2d
A multi-platform data driven 2D diagram editor.
Stars: ✭ 475 (-47.92%)
Mutual labels: wpf, xaml
Wpf Notifyicon
NotifyIcon (aka system tray icon or taskbar icon) for the WPF platform
Stars: ✭ 329 (-63.93%)
Mutual labels: wpf, xaml
Sharpvectors
SharpVectors - SVG# Reloaded: SVG DOM and Rendering in C# for the .Net.
Stars: ✭ 315 (-65.46%)
Mutual labels: wpf, xaml
Simple Music Player
Simple Music Player - SimpleMP - Keeps it simple and plays your music
Stars: ✭ 298 (-67.32%)
Mutual labels: wpf, xaml
Calcbinding
Advanced WPF Binding which supports expressions in Path property and other features
Stars: ✭ 425 (-53.4%)
Mutual labels: wpf, xaml
Arcgis Runtime Samples Dotnet
Sample code for ArcGIS Runtime SDK for .NET – UWP, WPF, Xamarin.Android, Xamarin.iOS, and Xamarin.Forms
Stars: ✭ 274 (-69.96%)
Mutual labels: wpf, xaml
Windowscommunitytoolkit
The Windows Community Toolkit is a collection of helpers, extensions, and custom controls. It simplifies and demonstrates common developer tasks building UWP and .NET apps for Windows 10. The toolkit is part of the .NET Foundation.
Stars: ✭ 4,654 (+410.31%)
Mutual labels: wpf, xaml
FluentWPF
Fluent Design System for WPF
Overview
- Acrylic
- AcrylicWindow
- AcrylicBrush
- Reveal
- Reveal styles for controls(Button/TextBox/ListBox)
- ParallaxView
- AccentColors
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
<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
<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.
<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 |
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
<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.
Usage:
<Border Background="{x:Static fw:AccentColors.ImmersiveSystemAccentBrush}"/>
<Border Background="{Binding Path=(fw:AccentColors.ImmersiveSystemAccentBrush)}"/>
Base Color
Usage:
<Border Background="{DynamicResource SystemBaseHighColorBrush}"/>
Alt Color
Usage:
<TextBlock Foreground="{DynamicResource SystemAltHighColorBrush}"/>
Chrome Color
Usage:
<Border Background="{DynamicResource SystemChromeMediumBrush}"/>
Opacity Color
Windows includes a set of colors that differ only by their opacities:
Other Colors
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].