Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add spacing between the listview.items?

Tags:

listview

wpf

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>
like image 433
Chen Liuchong Avatar asked Dec 09 '11 03:12

Chen Liuchong


3 Answers

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>
like image 140
JasonC Avatar answered Oct 18 '22 21:10

JasonC


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

like image 30
H.B. Avatar answered Oct 18 '22 22:10

H.B.


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>
like image 3
Ateik Avatar answered Oct 18 '22 22:10

Ateik