1 pixel space between ComboBoxItems closes ComboBox

[koen-debacker]

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>

Expected outcome

Not being able to have the mousepointer sit between ComboBoxItems, selecting nothing.

Environment

• MahApps.Metro v1.4.3 and v1.5.0-alpha010
• Windows OS 10
• Visual Studio 2015
• .NET Framework 4.6.2

[punker76]

@n00bje I'm with you, cause the ListBox or ListView doesn't have such gap fix... I'll remove this.

[punker76]

@n00bje This fix will be available in 1.5.0 (and alpha)