WPF ListBox that lays out its items horizontally WPF ListBox that lays out its items horizontally wpf wpf

WPF ListBox that lays out its items horizontally


WrapPanel

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

WPF Tutorial


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>