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:
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.
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>