I need Horizontal view of list boxes

Question

I am working on list boxes in WPF. I want to show the list boxes in horizontal direction. My code is

Answer 1

You can either use a WrapPanel or a StackPanel depending on your requirements.

<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
        <WrapPanel Orientation="Horizontal" />
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
        <StackPanel Orientation="Horizontal" />
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

The documentation for IsItemsHost has an example of a horizontal list box.

Answer 2

Try a WrapPannel, which will lay the items out horizontally until there is no more room, and then move to the next line.

You also could use a UniformGrid, which will lay the items out in a set number of rows or columns.

The way we get the items to arange using these other panels in a ListView, ListBox, or any form of ItemsControl is by changing the ItemsPanel property. By setting the ItemsPanel you can change it from the default StackPanel that is used by ItemsControls. With the WrapPanel we also should set the widths as shown here.

<ListView>
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
                <WrapPanel Width="{Binding (FrameworkElement.ActualWidth), RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
                                   ItemWidth="{Binding (ListView.View).ItemWidth, RelativeSource={RelativeSource AncestorType=ListView}}"
                                   MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}"
                                   ItemHeight="{Binding (ListView.View).ItemHeight, RelativeSource={RelativeSource AncestorType=ListView}}" />
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
...
</ListView>

Answer 3

I post this answer because of informational purposes as an alternative way of doing things:

Entities/Classes:

  public class Person
  {
    public string Name { get; set; }

    public string Phone { get; set; }

    public string Email { get; set; }

    public Contact Contact1 { get; set; }
  }

  public class Contact
  {
    public string Name { get; set; }
  }

Code Behind:

  Persons = new List<Person>( );
  for ( int i = 0; i < 15; i++ )
  {
    Persons.Add( new Person( ) 
                 { 
                   Name = String.Format( "Name {0}" , i ) , 
                   Phone = String.Format( "Phone 0000000-00{0}" , i ) , 
                   Email = String.Format( "Emailaddress{0}@test.test" , i ) , 
                   Contact1 = new Contact { Name = String.Format("Contact name = {0}", i) }
                 } );
  }
  list.DataContext = Persons;

Xaml proposal 1:

<ListBox x:Name="list" ItemsSource="{Binding}">
        <ListBox.ItemTemplate>
          <DataTemplate>
            <StackPanel Orientation="Vertical">
              <Label Content="{Binding Path=Name}"/>
              <Label Content="{Binding Path=Phone}"/>
              <Label Content="{Binding Path=Email}"/>
              <TextBox Height="20" DataContext="{Binding Path=Contact1}" Text="{Binding Path=Name}" Width="110"/>
            </StackPanel>
          </DataTemplate>
        </ListBox.ItemTemplate>
        <ListBox.ItemsPanel>
          <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
          </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
      </ListBox>

Xaml proposal 2:

<ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Visible">
      <ItemsControl x:Name="list" ItemsSource="{Binding}">
        <ItemsControl.ItemTemplate>
          <DataTemplate>
            <ListBox>
              <Label Content="{Binding Path=Name}"/>
              <Label Content="{Binding Path=Phone}"/>
              <Label Content="{Binding Path=Email}"/>
              <TextBox Height="20" DataContext="{Binding Path=Contact1}" Text="{Binding Path=Name}" Width="110"/>
            </ListBox>
          </DataTemplate>
        </ItemsControl.ItemTemplate>
        <ItemsControl.ItemsPanel>
          <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
          </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
      </ItemsControl>
    </ScrollViewer>

Answer 4

Your itemscontrol doesn't provide a custom ItemsPanel, then a StackPanel is used as a default with vertical Orientation.

Try add:

<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
        <StackPanel Orientation="Horizontal"/>
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

Answer 5

<ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto">
    <ItemsControl x:Name="list" ItemsSource="{Binding Items}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <HierarchicalDataTemplate>
                <Border Padding="5,0,0,2">
                    <ListBox Name="mylistBox"
                             Width="200"
                             Height="200">
                        <Label Content="{Binding name}" />
                        <Label Content="{Binding phone}" />
                        <Label Content="{Binding email}" />
                        <TextBox Name="NameTxt"
                                 Width="20"
                                 Height="20"
                                 Text="{Binding Path=Contact1.name}" />
                    </ListBox>
                </Border>
            </HierarchicalDataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</ScrollViewer>