Application icon stretches to title bar height when using MahApps.Metro

Question

How to prevent application icon from stretching to the height of the title bar when using MahApps.Metro? No spaces between icon and title bar edges no matter what size of icon used. I have also tried using multi-sized icons and this does not work.

Here is an example out of the box of what it looks like:

Answer 1

Strongly inspired from mahapps punker76's code, you can do this:

<MahApps:MetroWindow.IconTemplate>
    <DataTemplate>
        <Grid Width="{TemplateBinding Width}"
                 Height="{TemplateBinding Height}"
                 Margin="4"
                 Background="Transparent"
                 RenderOptions.EdgeMode="Aliased"
                 RenderOptions.BitmapScalingMode="HighQuality">
            <Image Source="Images/Document Alignment.ico"></Image>
        </Grid>
    </DataTemplate>
</MahApps:MetroWindow.IconTemplate>

But a Icon Margin property could be simpler.

Answer 2

You got a couple options to achieve your requirement.

• Tweak the library to add a Margin property to Icon and submit a pull request

MahApps.Metro is on Git, you could just fork it and tweak the Title bar icon with a Margin property as you desire.

Currently TitleBar Icon does not seem to have this property and starts from the edges based on it's xaml definition.

<Grid x:Name="PART_TitleBar" Background="Transparent"
      Height="{Binding TitlebarHeight, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Controls:MetroWindow}}}"
      Visibility="{TemplateBinding ShowTitleBar, Converter={StaticResource BooleanToVisibilityConverter}}"
      Grid.Column="0">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Image Visibility="{TemplateBinding ShowIconOnTitleBar, Converter={StaticResource BooleanToVisibilityConverter}}"
           Source="{TemplateBinding Icon}"
           RenderOptions.EdgeMode="Aliased"
           RenderOptions.BitmapScalingMode="HighQuality" />

You could then submit a pull request to allow the authors to integrate it into the main library if they reckon it's a nice feature.

• Easier option: Tweak your Title bar Icon image with a transparent padding

In the source for your Title bar image add a transparent padding. Something like:

Now when you use this as the Icon in your MetroWindow you should have an output like: