ModernWpf

Modern styles and controls for your WPF applications

4,662

461

4,662

245

View on GitHub

Top Related Projects

ControlzEx

1,007

Shared Controlz for WPF and ... more

MahApps.Metro

9,511

A framework that allows developers to cobble together a better UI for their own WPF applications with minimal effort.

MaterialDesignInXamlToolkit

15,483

Google's Material Design in XAML & WPF, for C# & VB.Net.

Dragablz

2,263

Dragable and tearable tab control for WPF

wpftoolkit

3,975

All the controls missing in WPF. Over 1 million downloads.

Quick Overview

ModernWpf is a set of controls and styles that bring a modern and Fluent Design-inspired look to WPF applications. It allows developers to create Windows 10/11 style user interfaces in their WPF projects without the need for UWP.

Pros

Brings modern Windows 10/11 UI elements to WPF applications
Easy integration with existing WPF projects
Regularly updated and maintained
Extensive documentation and examples available

Cons

May not perfectly replicate all UWP controls and behaviors
Some controls might have performance overhead compared to native WPF controls
Limited customization options for some controls
Potential compatibility issues with older Windows versions

Code Examples

Adding ModernWpf to your project:

<Application
    ...
    xmlns:ui="http://schemas.modernwpf.com/2019">
    <Application.Resources>
        <ui:ThemeResources />
        <ui:XamlControlsResources />
    </Application.Resources>
</Application>

Using a ModernWpf control:

<ui:NavigationView>
    <ui:NavigationView.MenuItems>
        <ui:NavigationViewItem Icon="Home" Content="Home" />
        <ui:NavigationViewItem Icon="Document" Content="Documents" />
        <ui:NavigationViewItem Icon="Settings" Content="Settings" />
    </ui:NavigationView.MenuItems>
</ui:NavigationView>

Applying ModernWpf styles to existing WPF controls:

<Button Content="Click me" Style="{StaticResource AccentButtonStyle}" />
<TextBox Text="Enter text" Style="{StaticResource DefaultTextBoxStyle}" />

Getting Started

Install the ModernWpf NuGet package:
```
Install-Package ModernWpfUI
```

Add ModernWpf resources to your App.xaml:

<Application
    ...
    xmlns:ui="http://schemas.modernwpf.com/2019">
    <Application.Resources>
        <ui:ThemeResources />
        <ui:XamlControlsResources />
    </Application.Resources>
</Application>

Start using ModernWpf controls and styles in your XAML:

<Window
    ...
    xmlns:ui="http://schemas.modernwpf.com/2019"
    ui:WindowHelper.UseModernWindowStyle="True">
    <ui:SimpleStackPanel>
        <TextBlock Text="Hello, ModernWpf!" Style="{StaticResource HeaderTextBlockStyle}" />
        <Button Content="Click me" Style="{StaticResource AccentButtonStyle}" />
    </ui:SimpleStackPanel>
</Window>

Competitor Comparisons

ControlzEx

1,007

Shared Controlz for WPF and ... more

Pros of ControlzEx

More comprehensive library with a wider range of controls and functionalities
Better support for MVVM pattern and data binding
More active development and frequent updates

Cons of ControlzEx

Steeper learning curve due to its extensive feature set
Potentially higher memory footprint and performance overhead
Less focused on modern UI aesthetics compared to ModernWpf

Code Comparison

ModernWpf:

<ui:Window
    x:Class="MyApp.MainWindow"
    xmlns:ui="http://schemas.modernwpf.com/2019">
    <ui:SimpleStackPanel>
        <ui:Button Content="Click me" />
    </ui:SimpleStackPanel>
</ui:Window>

ControlzEx:

<controls:MetroWindow
    x:Class="MyApp.MainWindow"
    xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls">
    <StackPanel>
        <Button Content="Click me" Style="{DynamicResource MahApps.Styles.Button}" />
    </StackPanel>
</controls:MetroWindow>

Both libraries aim to enhance WPF applications with modern UI elements, but they differ in their approach and focus. ModernWpf provides a more streamlined, Windows 10-like appearance, while ControlzEx offers a broader set of controls and customization options. The choice between them depends on the specific requirements of your project and the desired visual style.

MahApps.Metro

9,511

A framework that allows developers to cobble together a better UI for their own WPF applications with minimal effort.

Pros of MahApps.Metro

More mature and established project with a larger community
Offers a wider range of custom controls and features
Provides extensive documentation and examples

Cons of MahApps.Metro

Heavier and more complex, potentially impacting performance
May require more setup and configuration
Less focused on replicating the exact Windows 10/11 look and feel

Code Comparison

ModernWpf:

<Window x:Class="MainWindow"
        xmlns:ui="http://schemas.modernwpf.com/2019">
    <ui:SimpleStackPanel>
        <ui:Button Content="Click me"/>
    </ui:SimpleStackPanel>
</Window>

MahApps.Metro:

<Controls:MetroWindow x:Class="MainWindow"
                      xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls">
    <StackPanel>
        <Controls:ToggleSwitch Header="Toggle Switch"/>
    </StackPanel>
</Controls:MetroWindow>

ModernWpf focuses on providing a native Windows 10/11 look and feel with minimal setup, while MahApps.Metro offers a broader set of custom controls and styling options. ModernWpf is lighter and easier to integrate, but MahApps.Metro provides more extensive customization possibilities and a larger feature set.

MaterialDesignInXamlToolkit

15,483

Google's Material Design in XAML & WPF, for C# & VB.Net.

Pros of MaterialDesignInXamlToolkit

More comprehensive set of Material Design controls and styles
Active community with frequent updates and contributions
Extensive documentation and examples

Cons of MaterialDesignInXamlToolkit

Steeper learning curve due to its extensive feature set
May require more resources and potentially impact performance in larger applications

Code Comparison

MaterialDesignInXamlToolkit:

<materialDesign:Card Padding="32" Margin="16">
    <TextBlock Style="{DynamicResource MaterialDesignHeadline6TextBlock}">
        Hello World
    </TextBlock>
</materialDesign:Card>

ModernWpf:

<ui:SimpleStackPanel Spacing="12" Margin="24">
    <TextBlock Text="Hello World" 
               Style="{StaticResource TitleTextBlockStyle}"/>
</ui:SimpleStackPanel>

Both libraries offer modern UI components for WPF applications, but MaterialDesignInXamlToolkit provides a more comprehensive implementation of Material Design principles. ModernWpf, on the other hand, focuses on bringing a Windows 10/11-like appearance to WPF apps with a simpler API. The choice between the two depends on the specific design requirements and target platform of your application.

mui

2,598

Modern UI for WPF

Pros of MUI

More comprehensive set of controls and components
Better documentation and examples
Longer development history and larger community

Cons of MUI

Steeper learning curve due to more complex architecture
Potentially heavier resource usage for simpler applications
Less focus on native Windows 10/11 look and feel

Code Comparison

ModernWpf:

<Window x:Class="MainWindow"
        xmlns:ui="http://schemas.modernwpf.com/2019">
    <ui:SimpleStackPanel>
        <ui:Button Content="Click me" />
    </ui:SimpleStackPanel>
</Window>

MUI:

<mui:ModernWindow x:Class="MainWindow"
                  xmlns:mui="http://firstfloorsoftware.com/ModernUI">
    <Grid>
        <mui:ModernButton Content="Click me" />
    </Grid>
</mui:ModernWindow>

Both libraries aim to provide a modern UI experience for WPF applications, but they have different approaches. ModernWpf focuses on replicating the Windows 10/11 look and feel, while MUI offers a broader set of customizable controls. ModernWpf might be easier to integrate into existing projects, whereas MUI provides more flexibility for custom designs. The choice between the two depends on the specific requirements of your project and your preferred development style.

Dragablz

2,263

Dragable and tearable tab control for WPF

Pros of Dragablz

Specialized in creating draggable and dockable tab controls
Offers more advanced tab management features like tab tearing and merging
Provides a flexible layout system for complex UI arrangements

Cons of Dragablz

More focused on tab controls, less comprehensive for overall UI modernization
May require more setup and configuration for basic tab functionality
Less actively maintained, with fewer recent updates

Code Comparison

ModernWpf example:

<Window x:Class="MainWindow"
        xmlns:ui="http://schemas.modernwpf.com/2019">
    <ui:SimpleStackPanel>
        <ui:Button Content="Modern Button"/>
    </ui:SimpleStackPanel>
</Window>

Dragablz example:

<dragablz:TabablzControl>
    <dragablz:TabablzControl.InterTabController>
        <dragablz:InterTabController />
    </dragablz:TabablzControl.InterTabController>
    <TabItem Header="Tab No. 1" />
    <TabItem Header="Tab No. 2" />
</dragablz:TabablzControl>

ModernWpf focuses on providing a modern UI look and feel across various controls, while Dragablz specializes in advanced tab control functionality. ModernWpf offers a broader range of UI elements and is more actively maintained, making it suitable for overall application modernization. Dragablz excels in scenarios requiring complex tab management and layout customization but may require more setup for basic functionality.

wpftoolkit

3,975

All the controls missing in WPF. Over 1 million downloads.

Pros of WPF Toolkit

Extensive collection of controls and components
Long-standing project with a large community and support
Includes advanced controls like PropertyGrid and Chart

Cons of WPF Toolkit

Larger footprint and potential performance impact
May require more setup and configuration
Some controls might not follow modern design principles

Code Comparison

ModernWpf:

<Window x:Class="MainWindow"
        xmlns:ui="http://schemas.modernwpf.com/2019">
    <ui:SimpleStackPanel>
        <ui:Button Content="Modern Button"/>
    </ui:SimpleStackPanel>
</Window>

WPF Toolkit:

<Window x:Class="MainWindow"
        xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit">
    <StackPanel>
        <xctk:ButtonSpinner Content="Spinner Button"/>
    </StackPanel>
</Window>

ModernWpf focuses on providing a modern UI look and feel, while WPF Toolkit offers a wider range of specialized controls. ModernWpf is lighter and easier to integrate for achieving a contemporary appearance, whereas WPF Toolkit provides more complex and feature-rich controls at the cost of a larger footprint. The code comparison shows the simplicity of ModernWpf's approach versus the more specialized controls available in WPF Toolkit.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

ModernWPF UI Library

Modern styles and controls for your WPF applications.

Features

Modern styles and new features for the majority of the stock WPF controls.
Light and dark themes that can be easily customized. A high contrast theme is also included.
Additional controls to help you build modern applications. Some are ported from the Windows UI Library.
Targets .NET Framework 4.5+, .NET Core 3+, and .NET 5+. Runs on Windows Vista SP2 and above.

Overview of controls (light theme)

Quick start

Create a new WPF app.
Install from NuGet Install-Package ModernWpfUI.
Edit App.xaml to following:

<Application
    ...
    xmlns:ui="http://schemas.modernwpf.com/2019">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ui:ThemeResources />
                <ui:XamlControlsResources />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Edit MainWindow.xaml to following:

<Window
    ...
    xmlns:ui="http://schemas.modernwpf.com/2019"
    ui:WindowHelper.UseModernWindowStyle="True">
    <ui:SimpleStackPanel Margin="12" Spacing="24">
        <TextBlock Text="My first ModernWPF app" Style="{StaticResource HeaderTextBlockStyle}" />
        <Button Content="I am a button" />
        <Button Content="I am an accent button" Style="{StaticResource AccentButtonStyle}" />
    </ui:SimpleStackPanel>
</Window>