WPF UI

Created with ❤ in Poland by lepo.co
A simple way to make your application written in WPF keep up with modern design trends. Library changes the base elements like Page, ToggleButton or List, and also includes additional controls like Navigation, NumberBox, Dialog or Snackbar.

📁 What's included?

Name	Framework	Build Status
WPFUI Library that allows you to use all features in your own application
WPFUI.Demo An application written in WPF .NET 6 where you can test the features.

📷 Screenshots

🕹️ Radiograph

Radiograph is an application written by me that uses WPF UI.

🛠️ Custom controls

Control	Namespace	Description
Anchor	WPFUI.Controls	Creates a hyperlink to web pages, files or anything else a URL can address.
Arc	WPFUI.Controls	Draws a symmetrical arc with rounded edges.
Badge	WPFUI.Controls	Used to highlight an item, attract attention or flag status.
Breadcrumb	WPFUI.Controls	Automatic display of the page title from the navigation in the application.
Button	WPFUI.Controls	Custom button with additional parameters like an icon.
Card	WPFUI.Controls	Simple card compatible with the theme for displaying other elements.
CardAction	WPFUI.Controls	Inherited from the Button interactive card styled according to Fluent Design.
CardControl	WPFUI.Controls	Inherited from the Button control which displays an additional control on the right side of the card.
CardExpander	WPFUI.Controls	Inherited from the ContentControl control which can hide the collapsable content.
CodeBlock	WPFUI.Controls	Formats syntax and display a fragment of the source code.
Dialog	WPFUI.Controls	Displays a large card with a slightly transparent background and two action buttons.
FontIcon	WPFUI.Controls	Represents a text element containing an icon glyph with selectable font family.
Hyperlink	WPFUI.Controls	Button that opens a URL in a web browser.
Icon	WPFUI.Controls	Represents a text element containing an icon glyph.
MessageBox	WPFUI.Controls	Custom window to display notifications outside the application.
Navigation	WPFUI.Controls	Navigation styled as UWP apps.
NavigationItem	WPFUI.Controls	Element of the navigation.
NavigationStore	WPFUI.Controls	Navigation styled as Windows 11 Store app
NavigationFluent	WPFUI.Controls	Navigation styled as Windows 11 Settings app.
NumberBox	WPFUI.Controls	Text field for entering numbers with the possibility of setting a mask.
ProgressRing	WPFUI.Controls	Rotating loading ring like in Windows 11.
Rating	WPFUI.Controls	Stars to display the rating.
SearchBox	WPFUI.Controls	Lets look for things and other stuff.
Snackbar	WPFUI.Controls	Animated card with a notification displayed at the bottom of the application.
TextBox	WPFUI.Controls	Text field for with placeholders and icons.
TitleBar	WPFUI.Controls	A set of buttons that can replace the default window navigation, giving it a new, modern look with implemented NotifyIcon.

🧩 Custom classes and tools

Class	Namespace	Description
Manager	WPFUI.Background	Allows to add background effects like Mica or Acrylic.
Manager	WPFUI.Theme	Allows to manage available color themes from the library.
Watcher	WPFUI.Theme	Listens for SystemParameters changes while waiting for StaticPropertyChanged to change, then switches theme with Manager.Switch.
Progress	WPFUI.Taskbar	Allows to change the status of the displayed notification in the application icon on the TaskBar.
NotifyIcon	WPFUI.Tray	Allows to create an icon and a menu in the tray.

🖌️ Custom XAML styles

Resource usage	Description
<Window Style="{StaticResource UiWindow}"/>	Adds a custom appearance to the window and removes the navigation buttons.
<Page Style="{StaticResource UiPage}"/>	Adds a custom appearance to the page.
<Page Style="{StaticResource UiPageScrollable}"/>	Adds a custom appearance to the page and automatic display of scrolling if the content is too long.

📐 How to use?

First, your application needs to load custom styles, add in the MyApp\App.xaml file:

<Application>
  <Application.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="pack://application:,,,/WPFUI;component/Styles/Theme/Dark.xaml" />
        <ResourceDictionary Source="pack://application:,,,/WPFUI;component/Styles/WPFUI.xaml" />
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </Application.Resources>
</Application>

Now, you can customize your views, for example by adding a non-standard look to the main window and navigation buttons

<Window
  xmlns:wpfui="clr-namespace:WPFUI.Controls;assembly=WPFUI"
  Style="{StaticResource UiWindow}">
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <wpfui:TitleBar Grid.Row="0" ApplicationNavigation="True" />

    <Grid Grid.Row="1" Margin="12,6,12,12">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
      </Grid.ColumnDefinitions>

      <wpfui:NavigationFluent Grid.Column="0" Margin="0,0,12,0" />

      <Frame Grid.Column="1" />
    </Grid>
  </Grid>
</Window>

Special thanks

Crafting apps for .NET without the creators of tools like ReSharper or XAML Styler would never be such a fantastic adventure.

• 🔗 JetBrains ReSharper
• 🔗 XAML Styler

Microsoft Property

Design of the interface, choice of colors and the appearance of the controls were inspired by projects made by Microsoft for Windows 11.
The WPFUI.Demo app includes icons from Shell32 for Windows 11. These icons are the legal property of Microsoft and you may not use them in your own app without permission. They are used here as an example of creating tools for Microsoft systems.

Segoe Fluent Icons

According to the EULA of Segoe Fluent Icons we cannot ship a copy of it with this dll. Segoe Fluent Icons is installed by default on Windows 11, but if you want these icons in an application for Windows 10 and below, you must manually add the font to your application's resources.
https://docs.microsoft.com/en-us/windows/apps/design/style/segoe-fluent-icons-font
https://docs.microsoft.com/en-us/windows/apps/design/downloads/#fonts

In the app dictionaries, you can add an alternate path to the font

<FontFamily x:Key="SegoeFluentIcons">pack://application:,,,/;component/Fonts/#Segoe Fluent Icons</FontFamily>

Compilation

Use Visual Studio 2022 and invoke the .sln.

Visual Studio
WPF UI is an Open Source project. You are entitled to download and use the freely available Visual Studio Community Edition to build, run or develop for WPF UI. As per the Visual Studio Community Edition license, this applies regardless of whether you are an individual or a corporate user.

License

WPF UI is free and open source software licensed under MIT License. You can use it in private and commercial projects.
Keep in mind that you must include a copy of the license in your project.