Mahapps.metro: 1 pixel space between ComboBoxItems closes ComboBox

Created on 22 Mar 2017 · 2Comments · Source: MahApps/MahApps.Metro

I have a very minor issue with the MetroComboBox that's not present in the default ComboBox.

There's a 1 pixel gap between each ComboBoxItem which when clicked causes the ComboBox to close without selecting an item. This is particularly annoying during testing when you just want to select any item in the list but happen to misclick on the gap.

_Mousepointer on the gap, not selecting anything_

The default ComboBox doesn't have this gap, every item sits flush next to each other.

The issue is the Grid's margin in the ComBoxItem ControlTemplate which is set to "0 0.5". This was obviously done for aesthetic reasons so setting the Grid's margin to "0" isn't the proper solution. Setting the Border's margin to "0 0.5" didn't seem to do anything. I'm not sure what the proper solution is.

<ControlTemplate TargetType="ComboBoxItem">
    <Grid Margin="0 0.5" Background="{TemplateBinding Background}">
        <Border x:Name="ItemBackground"
            Background="{TemplateBinding Background}"
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}"
            IsHitTestVisible="False"
            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
        <ContentPresenter x:Name="contentPresenter"
                        Margin="{TemplateBinding Padding}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        TextElement.Foreground="{TemplateBinding Foreground}" />
        <VisualStateManager.VisualStateGroups>
            ...
        </VisualStateManager.VisualStateGroups>
    </Grid>
    <ControlTemplate.Triggers>
        ...
    </ControlTemplate.Triggers>
</ControlTemplate>

What steps will reproduce this issue?

<Window x:Class="MahappsTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <StackPanel>
        <ComboBox>
            <ComboBoxItem Content="ComboBoxItem 1"/>
            <ComboBoxItem Content="ComboBoxItem 2"/>
            <ComboBoxItem Content="ComboBoxItem 3"/>
            <ComboBoxItem Content="ComboBoxItem 4"/>
        </ComboBox>
    </StackPanel>
</Window>