Convert Figma logo to code with AI

MahApps logoMahApps.Metro

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

9,624
2,452
9,624
102
View on GitHub

Top Related Projects

ControlzEx's avatar

ControlzEx

1,027

Shared Controlz for WPF and ... more

MaterialDesignInXAML's avatar

MaterialDesignInXamlToolkit

15,670

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

firstfloorsoftware's avatar

mui

2,601

Modern UI for WPF

ButchersBoy's avatar

Dragablz

2,286

Dragable and tearable tab control for WPF

xceedsoftware's avatar

wpftoolkit

4,045

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

HandyOrg's avatar

HandyControl

6,598

Contains some simple and commonly used WPF controls

Quick Overview

MahApps.Metro is a toolkit for creating modern, sleek Windows Presentation Foundation (WPF) applications. It provides a set of controls, styles, and themes that allow developers to easily create applications with a Metro-inspired look and feel, similar to Windows 8 and later versions of the Windows operating system.

Pros

  • Extensive set of custom controls and styles for a modern UI
  • Easy integration with existing WPF applications
  • Active community and regular updates
  • Comprehensive documentation and examples

Cons

  • Learning curve for developers new to WPF or XAML
  • Some customization may require in-depth knowledge of the framework
  • Potential performance impact on larger applications
  • Dependency on specific .NET Framework versions

Code Examples

  1. Adding MahApps.Metro to your WPF application:
<Window x:Class="YourNamespace.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls"
        Title="MainWindow" Height="450" Width="800">
    <!-- Your window content here -->
</Window>
  1. Using a MahApps.Metro control (MetroProgressBar):
<mah:MetroProgressBar Value="75" />
  1. Applying a MahApps.Metro theme:
public partial class App : Application
{
    protected override void OnStartup(StartupEventArgs e)
    {
        base.OnStartup(e);
        ThemeManager.Current.ChangeTheme(this, "Light.Blue");
    }
}

Getting Started

  1. Install the MahApps.Metro NuGet package:

    Install-Package MahApps.Metro

  2. Add the following to your App.xaml:

    <Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Light.Blue.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

  3. Change your main window to use MetroWindow:

    <mah:MetroWindow x:Class="YourNamespace.MainWindow"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls"
                 Title="MainWindow" Height="450" Width="800">
    <!-- Your window content here -->
</mah:MetroWindow>

  4. Update your code-behind:

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

Competitor Comparisons

ControlzEx logo

ControlzEx

1,027

Shared Controlz for WPF and ... more

Pros of ControlzEx

  • Focused on providing enhanced WPF controls and behaviors
  • Lightweight and modular, allowing for easy integration into existing projects
  • Actively maintained with regular updates and bug fixes

Cons of ControlzEx

  • Less comprehensive UI toolkit compared to MahApps.Metro
  • Smaller community and fewer resources available
  • May require additional styling efforts to achieve a modern look

Code Comparison

ControlzEx:

<controls:WindowChrome.WindowChrome>
    <controls:WindowChrome 
        GlassFrameThickness="1"
        CornerRadius="0"
        CaptionHeight="30"/>
</controls:WindowChrome.WindowChrome>

MahApps.Metro:

<Controls:MetroWindow x:Class="MainWindow"
    xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
    GlowBrush="{DynamicResource AccentColorBrush}"
    BorderThickness="1"
    WindowStartupLocation="CenterScreen">
</Controls:MetroWindow>

ControlzEx focuses on enhancing specific WPF controls, while MahApps.Metro provides a complete UI toolkit with pre-styled controls. ControlzEx offers more flexibility for customization, but MahApps.Metro provides a more cohesive and polished look out of the box. The choice between the two depends on project requirements and desired level of customization.

MaterialDesignInXAML logo

MaterialDesignInXamlToolkit

15,670

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

Pros of MaterialDesignInXamlToolkit

  • Follows Google's Material Design guidelines more closely
  • Offers a wider range of UI components and controls
  • Provides more customization options for theming and styling

Cons of MaterialDesignInXamlToolkit

  • Steeper learning curve due to more complex implementation
  • May require more resources and potentially impact performance
  • Less native Windows look and feel compared to MahApps.Metro

Code Comparison

MaterialDesignInXamlToolkit:

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

MahApps.Metro:

<Controls:MetroContentControl>
    <TextBlock Style="{DynamicResource MahApps.Styles.TextBlock.Heading6}">
        Hello World
    </TextBlock>
</Controls:MetroContentControl>

Both libraries offer modern UI components for WPF applications, but MaterialDesignInXamlToolkit adheres more strictly to Material Design principles, while MahApps.Metro provides a blend of Metro and modern styles. The choice between them depends on the desired look and feel, performance requirements, and the developer's familiarity with Material Design concepts.

firstfloorsoftware logo

mui

2,601

Modern UI for WPF

Pros of MUI

  • Lightweight and minimalistic design, focusing on core Modern UI principles
  • Easier to customize and extend due to its simpler architecture
  • Better suited for applications requiring a more native Windows look and feel

Cons of MUI

  • Less comprehensive feature set compared to MahApps.Metro
  • Smaller community and fewer third-party contributions
  • Less frequent updates and maintenance

Code Comparison

MUI:

<mui:ModernWindow x:Class="MainWindow"
    xmlns:mui="http://firstfloorsoftware.com/ModernUI"
    Title="MUI Example" Style="{StaticResource BlankWindow}">
    <Grid>
        <TextBlock Text="Hello, Modern UI!" />
    </Grid>
</mui:ModernWindow>

MahApps.Metro:

<mah:MetroWindow x:Class="MainWindow"
    xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls"
    Title="MahApps.Metro Example" TitleCharacterCasing="Normal">
    <Grid>
        <TextBlock Text="Hello, MahApps.Metro!" />
    </Grid>
</mah:MetroWindow>

Both libraries offer modern UI elements for WPF applications, but MahApps.Metro provides a more extensive set of controls and features. MUI focuses on simplicity and a native Windows look, while MahApps.Metro offers more customization options and a larger community. The choice between the two depends on the specific requirements of your project and the desired level of customization and support.

ButchersBoy logo

Dragablz

2,286

Dragable and tearable tab control for WPF

Pros of Dragablz

  • Specialized in creating draggable and dockable tab controls
  • Lightweight and focused on a specific set of UI functionalities
  • Easier to integrate into existing projects without major UI overhauls

Cons of Dragablz

  • Limited scope compared to MahApps.Metro's comprehensive UI toolkit
  • Smaller community and potentially less frequent updates
  • May require additional libraries for a complete modern UI experience

Code Comparison

MahApps.Metro:

<Controls:MetroWindow x:Class="MainWindow"
    xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
    Title="MahApps.Metro Window" Height="600" Width="800">
    <!-- Window content -->
</Controls:MetroWindow>

Dragablz:

<dragablz:TabablzControl>
    <dragablz:TabablzControl.InterTabController>
        <dragablz:InterTabController />
    </dragablz:TabablzControl.InterTabController>
    <!-- Tab items -->
</dragablz:TabablzControl>

MahApps.Metro offers a complete UI toolkit with modern Windows styling, while Dragablz focuses on providing advanced tab control functionality. MahApps.Metro is better suited for full application UI overhauls, whereas Dragablz excels in scenarios requiring flexible and interactive tab layouts. The choice between the two depends on the specific needs of your project and the desired level of UI customization.

xceedsoftware logo

wpftoolkit

4,045

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

Pros of WPF Toolkit

  • More extensive collection of controls and components
  • Longer history and established reputation in the WPF community
  • Includes advanced data visualization tools like charts and graphs

Cons of WPF Toolkit

  • Commercial license required for some features
  • Less focus on modern, flat UI design
  • Steeper learning curve due to the large number of components

Code Comparison

MahApps.Metro:

<Controls:MetroWindow x:Class="MainWindow"
    xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
    Title="Metro Window" Height="600" Width="800">
    <Controls:MetroWindow.RightWindowCommands>
        <Controls:WindowCommands>
            <Button Content="Settings" />
        </Controls:WindowCommands>
    </Controls:MetroWindow.RightWindowCommands>
</Controls:MetroWindow>

WPF Toolkit:

<xctk:Wizard x:Name="Wizard" FinishButtonClosesWindow="True">
    <xctk:WizardPage x:Name="Page1" Title="Page 1" Description="This is page 1.">
        <TextBlock Text="Welcome to the Wizard!" />
    </xctk:WizardPage>
    <xctk:WizardPage x:Name="Page2" Title="Page 2" Description="This is page 2.">
        <TextBlock Text="Almost done!" />
    </xctk:WizardPage>
</xctk:Wizard>

Both libraries offer unique features and controls for WPF development. MahApps.Metro focuses on modern UI design with a Metro-style look, while WPF Toolkit provides a broader range of controls and components for various application needs.

HandyOrg logo

HandyControl

6,598

Contains some simple and commonly used WPF controls

Pros of HandyControl

  • More comprehensive set of controls and features
  • Modern and sleek design aesthetic
  • Active development with frequent updates

Cons of HandyControl

  • Less documentation and community support
  • Steeper learning curve for beginners
  • Potentially more complex implementation for simple projects

Code Comparison

HandyControl:

<hc:Window x:Class="MainWindow"
           xmlns:hc="https://handyorg.github.io/handycontrol">
    <hc:SimplePanel>
        <hc:Button Content="Click Me" Style="{StaticResource ButtonPrimary}"/>
    </hc:SimplePanel>
</hc:Window>

MahApps.Metro:

<Controls:MetroWindow x:Class="MainWindow"
                      xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls">
    <Grid>
        <Button Content="Click Me" Style="{StaticResource MahApps.Styles.Button.Square}"/>
    </Grid>
</Controls:MetroWindow>

Both libraries offer modern UI controls for WPF applications, but HandyControl provides a wider range of components with a more contemporary look. However, MahApps.Metro has been around longer and has more extensive documentation and community support. The code comparison shows that both libraries use custom namespaces and styles, with HandyControl using a slightly different approach to layout and styling.

Convert Figma logo designs to code with AI

Visual Copilot

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

Try Visual Copilot

README


MahApps.Metro

MahApps.Metro

A toolkit for creating awesome WPF applications. Lots of goodness out-of-the box.

Supporting .NET Framework 4.6.2 and greater, .NET Core 3.1, .NET 5 and .NET 6 (on Windows)


main status dev status dev tests

Let's get started

Get in touch

Follow @punker76

Join the chat at https://gitter.im/MahApps/MahApps.Metro

License

Copyright © .NET Foundation, Jan Karger, Brendan Forster, Dennis Daume, Alex Mitchell, Paul Jenkins and contributors.

MahApps.Metro is provided as-is under the MIT license. For more information see LICENSE.

Code of Conduct

This project has adopted the code of conduct defined by the Contributor Covenant to clarify expected behavior in our community. For more information see the .NET Foundation Code of Conduct.

Contribution License Agreement

By signing the CLA, the community is free to use your contribution to .NET Foundation projects.

.NET Foundation

This project is supported by the .NET Foundation.

Dev Tools

We want to give some :heart: to this dev tools which makes the work a little bit easier!

A big thank goes to JetBrains who provide an Open Source License for ReSharper and Rider.

Contributors

A big virtual hug :hugs: goes to all the great people around the world who contributed to this project!

Contributors

Awesome Application Samples

Something missing?

If you're looking for other awesome libraries which are compatible with MahApps, check them out:

Sponsoring

This framework is free and can be used for free, open source and commercial applications. MahApps.Metro (all code, NuGets and binaries) are under the MIT License (MIT). It's tested, used and contributed by many awesome people. So hit the magic :star: button, we appreciate it!!! :pray:

The core team member(s), MahApps.Metro contributors and contributors in the ecosystem do this open source work in their free time. If you use MahApps.Metro a serious task, and you'd like us to invest more time on it, please donate. This project increases your income/productivity/usability too.

Become a sponsor and show your support to this open source project.

:pray: All OpenCollective Backers (archived) :heart:

Backers

Screenshots

screenshot01 screenshot01 screenshot01 screenshot01 screenshot01 screenshot01 screenshot01 screenshot18