Icons and Resources - MahApps.Metro

Icons and Resources

MahApps.Metro does not embed any icons or “resources” other than control styles. However, there is MahApps.Metro.Resources package. This allows better discoverability and customisation.

You can install this package using nuget:

Install-Package MahApps.Metro.Resources

Currently, this consists of Entypo and Templarian’s Modern UI Icon pack

Usage

The resources are simply Canvas’s wrapping one or more Paths. To use these sorts of elements, you can just use WPF’s VisualBrush.

	<Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Resources/Icons.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    
    <Rectangle>
        <Rectangle.Fill>
            <VisualBrush Visual="{StaticResource appbar_add}" />
        </Rectangle.Fill>
    </Rectangle>

If you’re trying to create “circle” buttons ala Windows Phone 7, the easiest way is to set the VisualBrush to be an OpacityMask on the Rectangle. This means you just need to alter the Rectangle colours on state change (hover, mouse down, etc)

	<Rectangle Fill="Black">
		<Rectangle.OpacityMask>
			<VisualBrush Visual="{StaticResource appbar_add}" Stretch="Fill" />
		</Rectangle.OpacityMask>
	</Rectangle>