How to add spacing between listview.items?

Question

I would like to add a distance between its elements, so I can bring my snap operation to 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

Hope this saves you some time. I found that there are several properties that must 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 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 whatever size you prefer.