Gaps between items in my ListBox

Question

When I create ListBox with horizontal items ordering for example like this:

<DockPanel>
    <ListBox>
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBoxItem>
            <Button Content="Hello" />
        </ListBoxItem>
        <ListBoxItem>
            <Button Content="Hello" />
        </ListBoxItem>
    </ListBox>
</DockPanel>

I have small gaps between buttons in the list as indicated by the arrows on following picture:

Picture showing gaps

How can I get rid of those gaps please ? I need to have items in ListBox just next to each other. I have tried changing ItemTemplate of the ListBox but it did not help.

When I use the `ListBox` with traditional vertical orientation no items are just next to each other as expected and as wanted... :( — Rasto, Jan 16 '11 at 05:42

score 52 · Accepted Answer · answered Jan 16 '11 at 05:47

This is because of the padding inside the default ItemContainerStyle for ListBoxItem. To remove this you can override the ItemContainerStyle. For example just try the below Empty ItemContainerStyle to your ListBox and you can see the margin is no more.

    <ListBox >
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate >
                <VirtualizingStackPanel IsItemsHost="True" Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemContainerStyle>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListBoxItem}">
                            <ContentPresenter/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListBox.ItemContainerStyle>
        <Button Content="hello1" Width="75"/>
        <Button Content="Hello2" Width="75"/>
    </ListBox>

Great, great, great! Works like a charm! Saved me a lot of time :) Thank you — Rasto, Jan 16 '11 at 05:52
This does the job of removing space btw Items but it removes Selection functionality completely. Instead of touching ContentPresenter like in accepted answer above, I solved my issue by setting Padding and Margin both to 0. Also, I noticed that setting just one as somene below suggested would not work. So, instead of changing Template property above, I just did ; . That removed space btw items and my Selection still works. — pixel, Dec 08 '16 at 21:30

H.B. · Answer 2 · 2016-12-08T21:17:52.183

43

Those gaps are inside the ControlTemplate of the ListViewItems, you'd have to override that i'm afraid...

Edit: On some platforms you do not even need to mess with the Template to get rid of the gaps between items:

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

To get rid of the gap at the very side you actually need to change the ListBox ControlTemplate itself, it's not a matter of the items. In the default Aero template there is a border with Padding = 1

edited Dec 08 '16 at 21:17

answered Jan 16 '11 at 05:43

H.B.

166,899
29
327
400

Can you provide quick code sample ? The same gaps are there even when I use some other controls as items of `ListBox`... – Rasto Jan 16 '11 at 05:47
Mixed it up, it's in the ListViewItem, edited it, going to see if i can give you method to get rid of them. Edit: Well, the other answer is complete enough so no need for that... – H.B. Jan 16 '11 at 05:49
@pixel: Then the style of your operating system does not expose that. You probably will need to change the template after all. – H.B. Dec 08 '16 at 20:12
the solution provided by @JobyJoy works but it removes selection functionality. Now I cannot select item in Listbox? – pixel Dec 08 '16 at 20:17
@pixel: Obviously, you have to provide a proper template, you can find the default one online and modify it accordingly. – H.B. Dec 08 '16 at 21:16
@pixel: Also, i provided that solution as well from the start, so don't downvote me just because the easy Aero based alternative does not work in your case :| – H.B. Dec 08 '16 at 21:19
Interestingly, I just added also Setter for Margin in your suggestion above and that worked assuming I use same ItemsPanelTemplate as per answer above. Thanks, – pixel Dec 08 '16 at 21:31
Thats nice. This keeps the "Selection" Behavior. To avoid gaps completely, you can set Margin, Padding and BorderThickness to 0. – Lumo Jul 11 '17 at 13:22

Gaps between items in my ListBox

2 Answers2

Linked