Get rid of vertical space between items in a ListView

Question

I have a ListView that looks like this:

I am trying to remove the space between the items.

Setting the Margin and Padding of the ItemTemplate to zero is not working.

Setting HorizontalContentAlignment and VerticalContentAlignment to Stretch is not working.

Answer 1

Got it, the ItemContainerStyle must have a template with a ListViewItemPresenter where the ContentMargin is set to 0. As well as the Margin of the ItemContainerStyle must be 0.

ListView:

<ListView ItemContainerStyle="{StaticResource CustomItemContainerStyle}">
<ListView/>

Style:

<Style x:Key="CustomItemContainerStyle" TargetType="ListViewItem">
    <!-- The following two styles fixes the issue of items not expanding 100%. -->
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="VerticalContentAlignment" Value="Stretch" />
    <!-- Margin must be zero to get rid of the space between items. Default is 1.-->
    <Setter Property="Margin" Value="0" />
    <!-- ListViewItem styles and templates: http://msdn.microsoft.com/en-us/library/windows/apps/xaml/jj709921.aspx -->
    <!-- ContentMargin must be zero to get rid of the vertical space between items. Defaults is 4. -->
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListViewItem">
                <ListViewItemPresenter
                    ContentTransitions="{TemplateBinding ContentTransitions}"
                    Padding="{TemplateBinding Padding}"
                    SelectionCheckMarkVisualEnabled="True"
                    CheckHintBrush="{ThemeResource ListViewItemCheckHintThemeBrush}"
                    CheckSelectingBrush="{ThemeResource ListViewItemCheckSelectingThemeBrush}"
                    CheckBrush="{ThemeResource ListViewItemCheckThemeBrush}"
                    DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
                    DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
                    FocusBorderBrush="{ThemeResource ListViewItemFocusBorderThemeBrush}"
                    PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
                    PointerOverBackground="{ThemeResource ListViewItemPointerOverBackgroundThemeBrush}"
                    SelectedBorderThickness="{ThemeResource ListViewItemCompactSelectedBorderThemeThickness}"
                    SelectedBackground="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"
                    SelectedForeground="{ThemeResource ListViewItemSelectedForegroundThemeBrush}"
                    SelectedPointerOverBackground="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}"
                    SelectedPointerOverBorderBrush="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}"
                    DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
                    DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
                    ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                    VerticalContentAlignment="Stretch"
                    PointerOverBackgroundMargin="0"
                    ContentMargin="4" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Final screenshot: