MahApps.Metro icon not showing

Question

I am trying to add a "refresh" button in the window title bar, using MahApps.Metro 0.13.1.0.

My App.xaml is this :

<Application x:Class="VersionSwitcher.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="Views/MainWindow.xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             d1p1:Ignorable="d"
             xmlns:d1p1="http://schemas.openxmlformats.org/markup-compatibility/2006">
    <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/Colors.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
                <ResourceDictionary Source="/Resources/Icons.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <vm:ViewModelLocator x:Key="Locator" d:IsDataSource="True" xmlns:vm="clr-namespace:VersionSwitcher.ViewModel" />
        </ResourceDictionary>
    </Application.Resources>
</Application>

And then in my MainWindow.xaml :

<Controls:MetroWindow.WindowCommands>
    <Controls:WindowCommands>
        <Button ToolTip="{x:Static p:Resources.Button_Refresh}"
                Style="{DynamicResource MetroCircleButtonStyle}" Width="30" Height="30">
                <Rectangle Fill="Black">
                    <Rectangle.OpacityMask>
                        <VisualBrush Stretch="Fill"
                                     Visual="{DynamicResource appbar_refresh}" />
                    </Rectangle.OpacityMask>
                </Rectangle>
        </Button>
    </Controls:WindowCommands>
</Controls:MetroWindow.WindowCommands>

I get a grey circle inside the title bar, but no icon ! Any icon (from Resources/Icons.xaml) does the same thing.

If the icon is placed in the window contents instead of the title bar, it does the same thing.

What have I missed ?

Thanks !

Update

I have found out that setting a width and a height to the Rectangle shows the icon. What do I have to do to always fill the button ?

Answer 1

You do not see it cos the Rectangle has it's size as 0 for ActualWidth and ActualHeight which you can see via Snoop

If you don't know much about WPF as you mentioned in your comment, get started by getting familiar with Snoop. Great tool that'll save you from lots of head scratching moments :)

So in simple english, we're adding a Rectangle as the Content of a Button. Now the button has some size dimensions. However the Rectangle does not and thereby ends up with 0. If it was some text it would get an implicit size.

So to sort it, give the Rectangle a suitable Width/Height.

If you want the Rectangle to be the size of the Button, you can use a RelativeSource Binding for the Width and Height to get it from the button. However in your case it's a Styled button that already uses a ellipse so it would need some padding.

MahApps.Metro from github:

ButtonsExample.xaml

shows their suggested approach: (content with explicit size less than parent Button)

<Button Width="50"
        Height="50"
        Margin="0, 10, 0, 0"
        Style="{DynamicResource MetroCircleButtonStyle}">
    <Rectangle Width="20"
                Height="20"
                Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
        <Rectangle.OpacityMask>
            <VisualBrush Stretch="Fill"
                          Visual="{DynamicResource appbar_city}" />
        </Rectangle.OpacityMask>
    </Rectangle>
</Button>