Reduce the bottom and top space in Listview in Xaml(UWP-Universal windows platform)

Question

I am working on the universal windows platform app for windows- 10.I have issue regarding the listview.When i click and hover on the listview item the selected area background is large. You can see in my image.

Code:

<ListView  Height="160" Name="lstconfig_option" BorderThickness="0"   BorderBrush="#FFB0B7BE" ItemClick="lstconfig_option_ItemClick" IsItemClickEnabled="True"   HorizontalAlignment="Stretch">
                                    <ListView.ItemsPanel>
                                        <ItemsPanelTemplate>
                                            <WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="10"/>
                                        </ItemsPanelTemplate>
                                    </ListView.ItemsPanel>
                                    <ListView.ItemContainerStyle>
                                        <Style TargetType="ListViewItem">
                                            <Setter Property="HorizontalContentAlignment" Value="Left" />
                                            <Setter Property="VerticalContentAlignment" Value="Center" />
                                            <Setter Property="Margin" Value="0,0,0,0" />
                                            <Setter Property="Padding" Value="0,0,0,-6" />
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate TargetType="ListViewItem">
                                                        <ListViewItemPresenter          
                                  PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}"       
                                  SelectedBackground="{ThemeResource SystemControlHighlightListMediumBrush}"      
                                  SelectedPointerOverBackground="{ThemeResource SystemControlHighlightListMediumBrush}"
                                 PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}"
                                 SelectedPressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}" />
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>


                                        </Style>
                                    </ListView.ItemContainerStyle>

                                    <ListView.ItemTemplate>
                                        <DataTemplate >
                                            <StackPanel Grid.Row="1" Height="auto" HorizontalAlignment="Stretch" PointerEntered="btnFilter_PointerEntered" PointerExited="btnFilter_PointerExited" ToolTipService.ToolTip="{Binding tooltip_text}" ToolTipService.Placement="Bottom">
                                                <Grid Height="auto">
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition Width="*"></ColumnDefinition>
                                                        <ColumnDefinition Width="auto"></ColumnDefinition>
                                                    </Grid.ColumnDefinitions>

                                                    <StackPanel Grid.Column="0" Grid.ColumnSpan="2"  Width="200" VerticalAlignment="Top" HorizontalAlignment="Left">
                                                        <TextBlock Name="common_label" Text="{Binding label}" Visibility="{Binding label_Visibility}" FontSize="11"  Foreground="#FF0D0C0C" Margin="10,0,0,0"  VerticalAlignment="Center"  Grid.ColumnSpan="2"  SelectionHighlightColor="#FFD44C21" />
                                                        <TextBox Name="textbox"  Visibility="{Binding Visibility}" FontSize="11"  Foreground="#FF0D0C0C"  TextWrapping="NoWrap"  VerticalAlignment="Center" Margin="10,0,0,0" Grid.ColumnSpan="2" BorderBrush="Black" Background="#FFF6F6F6" HorizontalAlignment="Stretch" SelectionHighlightColor="#FFD44C21"/>
                                                    </StackPanel>

                                                </Grid>
                                            </StackPanel>
                                        </DataTemplate>
                                    </ListView.ItemTemplate>
                                </ListView>

Image

Answer 1

ListViewItem has a MinWidth and MinHeight by default. By checking ListViewItem styles and templates, we can find the MinWidth and MinHeight properties are specified as following.

<Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}"/>
<Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}"/>

<x:Double x:Key="ListViewItemMinWidth">88</x:Double>
<x:Double x:Key="ListViewItemMinHeight">44</x:Double>

To reduce the gap, you can set the MinHeight to the value you want like:

<ListView.ItemContainerStyle>
    <Style TargetType="ListViewItem">
        <Setter Property="HorizontalContentAlignment" Value="Left" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Margin" Value="0,0,0,0" />
        <Setter Property="Padding" Value="0,0,0,-6" />
        <Setter Property="MinHeight" Value="20" />
        ...
    </Style>
</ListView.ItemContainerStyle>