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

For installation of Metro UI framework, please check my previous blog.

• How to work with Metro UI framework in WPF

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.

<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="/Resources/Icons.xaml" />

Step 5

Add the below code into button opening tag.

<Rectangle Width="20" Height="20" Fill="{Binding Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill" Visual="{StaticResource appbar_disk}" />
</Rectangle.OpacityMask>
</Rectangle>

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

<Controls:MetroWindow x:Class="WpfApplication7.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" mlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro" xmlns:local="clr-namespace:WpfApplication7" mc:Ignorable="d" itle="MainWindow" Height="350" Width="525">
    <Grid>
        <Button ToolTip="Add a new employee record" x:Name="button" Style="{DynamicResource MetroCircleButtonStyle}" HorizontalAlignment="Left" Height="55" Margin="106,110,0,0" VerticalAlignment="Top" Width="55" Click="button_Click">
<Rectangle Width="20" Height="20" Fill="{Binding Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill" Visual="{StaticResource appbar_disk}" />
</Rectangle.OpacityMask>
</Rectangle>
</Button>
        <Button ToolTip="Update an emplyee record" x:Name="button1" Style="{DynamicResource MetroCircleButtonStyle}" HorizontalAlignment="Left" Height="55" Margin="221,110,0,0" VerticalAlignment="Top" Width="55">
<Rectangle Width="20" Height="20" Fill="{Binding Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill" Visual="{StaticResource appbar_edit_add}" />
</Rectangle.OpacityMask>
</Rectangle>
</Button> Button ToolTip="Delete an employee record" x:Name="button2" Style="{Dynamic Resource MetroCircleButtonStyle}" HorizontalAlignment="Left" Height="55" Margin="335,110,0,0" VerticalAlignment="Top" Width="55">
        <Rectangle Width="20" Height="20" Fill="{Binding Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
            <Rectangle.OpacityMask>
                <VisualBrush Stretch="Fill" Visual="{StaticResource appbar_delete}" />
            </Rectangle.OpacityMask>
        </Rectangle>

        </Button>
    </Grid>
</Controls:MetroWindow>

Complete App XAML source

<Application x:Class="WpfApplication7.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:WpfApplication7" StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <!-- MahApps.Metro resource dictionaries. Make sure that all file names are Case Sensitive! -->
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
                <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/Colors.xaml" />
                <!-- Accent and AppTheme setting -->
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Magenta.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
                <ResourceDictionary Source="/Resources/Icons.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Step 6

Hit Ctrl+Shift+B to build the project. Then, hit F5 to check the output.

Output







Change the accent color and app theme to check the output.

<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Magenta.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />

Conclusion

I hope you liked this article. Please provide your valuable comments and suggestions.

Happy Coding!!!