CODEWITHSUNDEEP
wpflistview
Chen Liuchong
Chen Liuchong

Reputation: 131

How to add spacing between the listview.items?

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>

Upvotes: 13

Views: 18294

Answers (3)

JasonC
JasonC

Reputation: 329

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>

Upvotes: 32

brunnerh
brunnerh

Reputation: 185290

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

Upvotes: 3

Ateik
Ateik

Reputation: 2586

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>

Upvotes: 3

Related Questions