Donate

Using MahApps.Metro.IconPacks In WPF Application

Good day!

Ever wonder how to style your WPF application controls or window with icons where you can choose from several hundreds of icons in a package? Well, nothing to worry about since there's an awesome Nuget Package that provides icons to suit your needs. It's called MahApps.Metro.IconPacks. The cool thing is, it's even grouped into several categories and that each category containes hundreds of icons. To use this awesome library of icons in your WPF project, install the Nuget Package specifically MahApps.Metro.IconPacks.
Using MahApps.Metro.IconPacks In WPF Application
In your XAML view, reference the MahApps.Metro.IconPacks namespace first.
xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
To use them like applying icons to your menu items, call the iconsPacks namespace and select PackIconMaterial. Then set the Kind property with the icon of your liking.
<iconPacks:PackIconMaterial VerticalAlignment="Center" HorizontalAlignment="Center" 
                                Kind="Plus" Height="10" Width="10"/>
Below is the complete code of MainWindow.xaml modified with the usage of PackIconMaterial icons.
<Window x:Class="WPFUsingMahAppsMetroIcons.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFUsingMahAppsMetroIcons"
        xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
        mc:Ignorable="d"
        x:Name="MainProjectWindow"
        WindowStartupLocation="CenterScreen"
        Title="Using MahApps.Metro.IconPack In WPF" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="25" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Menu Grid.Row="0">
            <MenuItem Header="_File" HorizontalAlignment="Left">
                <MenuItem Header="_New">
                    <MenuItem.Icon>
                        <iconPacks:PackIconMaterial VerticalAlignment="Center" HorizontalAlignment="Center" 
                                Kind="Plus" Height="10" Width="10"/>
                    </MenuItem.Icon>
                </MenuItem>
                <MenuItem Header="_Open">
                    <MenuItem.Icon>
                        <iconPacks:PackIconMaterial VerticalAlignment="Center" HorizontalAlignment="Center" 
                                                    Kind="FolderOpen" Height="10" Width="10"/>
                    </MenuItem.Icon>
                </MenuItem>
                <MenuItem Header="_Save">
                    <MenuItem.Icon>
                        <iconPacks:PackIconMaterial VerticalAlignment="Center" HorizontalAlignment="Center" 
                                                    Kind="Floppy" Height="10" Width="10"/>
                    </MenuItem.Icon>
                </MenuItem>
                <Separator/>
                <MenuItem Header="E_xit">
                    <MenuItem.Icon>
                        <iconPacks:PackIconMaterial VerticalAlignment="Center" HorizontalAlignment="Center" 
                                                    Kind="Close" Height="9" Width="9"/>           
                    </MenuItem.Icon>
                </MenuItem>
            </MenuItem>
        </Menu>
    </Grid>
</Window>
If referenced correctly, you should be able to see these icons attached to controls that uses them.
Using MahApps.Metro.IconPacks In WPF Application


Cheers!

Comments

Donate

Popular Posts From This Blog

WPF CRUD Application Using DataGrid, MVVM Pattern, Entity Framework, And C#.NET

How To Insert Or Add Emojis In Microsoft Teams Status Message

Pass GUID As Parameter To Action Using ASP.NET MVC ContribGrid