CODEWITHSUNDEEP
c#xamllistboxwin-universal-app
David Jones
David Jones

Reputation: 582

Listbox Vertical Gap between Items (Remove??)

My listboxes are data driven from Lists of objects with databinding using a DataTemplate eg:

            <ListBox x:Name="TheMainListBox" 
                 ScrollViewer.IsVerticalRailEnabled="True" 
                 ScrollViewer.IsHorizontalRailEnabled="False" 
                 HorizontalAlignment="Left" 
                 VerticalAlignment="Top"
                 Height="540" 
                 ItemsSource="{Binding}"
                 Width="Auto"
                 Margin="0"
                 Padding="0"
                 Background="Yellow"
                 ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
                 ScrollViewer.VerticalScrollBarVisibility="Auto" 
                 SelectionChanged="TheMainListBox_SelectionChanged" 
                 DoubleTapped="TheMainListBox_DoubleTapped"  
                 >

The template: 

            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid or Stackpanel Background="Blue"
                         Padding="0"                                    
                         BorderBrush="Black"
                         BorderThickness="1"
                         Margin="0"
                     >
                     .... Binding Textboxes/blocks
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>

I end up with a yellow container, the ListBox, .. with blue rectangles inside, the ListBox items but there is a vertical gap between them. I can set a negative vertical-top margin but that is cruddy and doesn't work for the top item. How can I reduce the vertical gap between items to zero.

If a create a ListBox with static items, each in a ListBoxItem container, eg:

                <ListBoxItem BorderThickness="1" Width="100" Height="50"
                  BorderBrush="Black" Background="Red"/>

It all works as required.

So how can I get rid of the vertical spacing between items with the ItemTemplate/DataBinding? This is mission critical, thx in advance.

Upvotes: 6

Views: 2564

Answers (3)

Kiran Paul
Kiran Paul

Reputation: 885

properly setting the height of the ListBoxItem will solve the issue. Here is the code snippet 

<ListBox.ItemContainerStyle>
 <Style TargetType="ListBoxItem">
   <Setter Property="Height" Value="Your_Desired_Height"/>
 </Style>
</ListBox.ItemContainerStyle>

For listbox please use Height property and for listview use MinHeight property. Replace the required height value in the Your_Desired_Height placeholder.

Upvotes: 0

Chris W.
Chris W.

Reputation: 23290

I don't have time to load up a proj to test but you should be able to just kill the margin/padding that could cause it. So add;

<ListBox.ItemContainerStyle>
   <Style TargetType="ListBoxItem">
      <Setter Property="Padding" Value="0"/>
      <Setter Property="Margin" Value="0"/>
   </Style>
</ListBox.ItemContainerStyle>

Upvotes: 6

Andrey K.
Andrey K.

Reputation: 735

I haven't thought a lot of why this could be happening, haven't digged into styles ither, and my answer doesn't look nice, but try Margin="0,-2,0,-2"

            <DataTemplate>
                <Grid or Stackpanel Background="Blue"
                     Padding="0"                                    
                     BorderBrush="Black"
                     BorderThickness="1"
                     Margin="0,-2,0,-2"
                 >
                 .... Binding Textboxes/blocks
                </Grid>
            </DataTemplate>

Upvotes: 0

Related Questions