Creating Metro Style Circle Button Using Mahapps Metro UI Framework

In this article, I will explain how to create Metro style Circle Button in WPF application using Mahapps Metro UI framework and Microsoft Visual Studio.

Step 1

Step 2

Create a new button in MainWindow, like Image 1.



I have added three buttons in this project. You can add these from ToolBox.

Step 3

We have to install the Icon Resource package for control customization using below command, because MahApps.Metro does not embed any Icons Package.

Install-Package MahApps.Metro.Resources

For installation of MahApps.Metro.Resources, click TOOLS - NuGet Package Manager - Package Manager Console.



Enter the above command in Package Manager Console, then hit the Enter button.

After a few seconds, you will get an installation completion message.



Step 4

Add the blow ResourceDictionary in App.xaml file.


Step 5

Add the below code into button opening tag.


I have applied the same logic for all the three buttons. You can use it for remaining buttons.

You can change the button icon from Visual Property through applying static resources.



Complete MainWindow XAML source