WPF ListBox that lays out its items horizontally
<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled"> <ListBox.ItemsPanel> <ItemsPanelTemplate> <WrapPanel IsItemsHost="True" /> </ItemsPanelTemplate> </ListBox.ItemsPanel> <ListBoxItem>listbox item 1</ListBoxItem> <ListBoxItem>listbox item 2</ListBoxItem> <ListBoxItem>listbox item 3</ListBoxItem> <ListBoxItem>listbox item 4</ListBoxItem> <ListBoxItem>listbox item 5</ListBoxItem></ListBox>
The default ItemsPanel
for the ListBox
control is a VirtualizingStackPanel
, so if you want the normal, default experience for the control but just have it laid out horizontally, you should specify this (and change the orientation).
Example:
<ListBox> <ListBox.ItemsPanel> <ItemsPanelTemplate> <VirtualizingStackPanel IsItemsHost="True" Orientation="Horizontal"/> </ItemsPanelTemplate> </ListBox.ItemsPanel></ListBox>
Here is example of StackPanel.Horizontal Breadcrumb with Mvvm binding
<ItemsControl x:Name="tStack" Grid.Row="1" Grid.Column="0" Height="40" Background="Red" ItemsSource="{Binding BreadCrumbs}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal" /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <Button Margin="5" CommandParameter="{Binding .}" Command="{Binding BreadcrumbClickCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}, Path=DataContext.BreadcrumbClickCommand}" Content="{Binding Name}" /> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl>