How to add spacing between the listview.items? - wpf

Question

I would like to add distance between its items, so I can lead my bind operation on it.
<ListView Margin="0,22,0,0" x:Name="ListViewImages" MouseLeftButtonDown="ListViewImages_MouseLeftButtonDown"
SelectionMode="Extended" ScrollViewer.CanContentScroll="True" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Disabled" local:ListBoxExtention.IsRectSelectionEnabled="True">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Name="WraPanel1" Margin="5" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="5" ></RowDefinition>
<RowDefinition Height="150"></RowDefinition>
<RowDefinition Height="15" ></RowDefinition>
<RowDefinition Height="5" ></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="7" x:Name="columnLeft"></ColumnDefinition>
<ColumnDefinition Width="100" x:Name="columnImage"></ColumnDefinition>
<ColumnDefinition Width="7" x:Name="columnRight"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Name="Grid_Images" AllowDrop="True" Width="Auto" Height="Auto" Tag="{Binding Id}" Source="{Binding Converter={StaticResource imageConverter}}" Grid.Row="1" Grid.Column="1"
DragEnter="Grid_Images_DragEnter" MouseLeftButtonDown="Grid_Images_MouseLeftButtonDown" MouseLeftButtonUp="Grid_Images_MouseLeftButtonUp"
MouseMove="Grid_Images_MouseMove" Drop="Grid_Images_Drop" KeyUp="Grid_Images_KeyUp" />
<TextBlock Name="Grid_Descrition" AllowDrop="True" TextAlignment="Center" Text="{Binding Id}" Grid.Row="2" Grid.Column="1"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

Answer 1

Hopefully this will save someone else time. I found there are multiple properties that have to be set to 0 in order to completely remove the spacing between ListViewItems in a ListView control. In addition to Margin and Padding I had to set the BorderThickness to 0.
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
</Style>
</ListView.ItemContainerStyle>

Answer 2

You can just add some Margin to your grid
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="5" ></RowDefinition>
<RowDefinition Height="150"></RowDefinition>
<RowDefinition Height="15" ></RowDefinition>
<RowDefinition Height="5" ></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="7" x:Name="columnLeft"></ColumnDefinition>
<ColumnDefinition Width="100" x:Name="columnImage"></ColumnDefinition>
<ColumnDefinition Width="7" x:Name="columnRight"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Name="Grid_Images" AllowDrop="True" Width="Auto" Height="Auto" Tag="{Binding Id}" Source="{Binding Converter={StaticResource imageConverter}}" Grid.Row="1" Grid.Column="1"
DragEnter="Grid_Images_DragEnter" MouseLeftButtonDown="Grid_Images_MouseLeftButtonDown" MouseLeftButtonUp="Grid_Images_MouseLeftButtonUp"
MouseMove="Grid_Images_MouseMove" Drop="Grid_Images_Drop" KeyUp="Grid_Images_KeyUp" />
<TextBlock Name="Grid_Descrition" AllowDrop="True" TextAlignment="Center" Text="{Binding Id}" Grid.Row="2" Grid.Column="1"/>
</Grid>

Answer 3

Add a ListView.ItemContainerStyle and create a Setter that applies a Margin of whatever size you prefer.