我需要列表框的水平视图

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

我正在WPF的列表框上工作。我想在水平方向上显示列表框。我的代码是

<Grid>

    <ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto">
        <ItemsControl x:Name="list" >
            <ItemsControl.ItemTemplate>
                <HierarchicalDataTemplate>
                    <Border Padding="5,0,0,2">
                        <WrapPanel Orientation="Horizontal">
                            <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}"></TextBox>
                            </ListBox>
                        </WrapPanel>
                    </Border>
                </HierarchicalDataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>
</Grid>

and my program looks like in the picture (Vertical) Can anyone tell me how I can change the view? thanks in advance.

我的程序在图片中(垂直)有人能告诉我如何改变视图吗?提前谢谢。

5 个解决方案

#1

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

#2

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

您的itemscontrol不提供自定义的ItemsPanel，然后使用StackPanel作为垂直方向的默认设置。

Try add:

试着添加:

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

#3

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

您可以使用WrapPanel或StackPanel，这取决于您的需求。

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

IsItemsHost的文档中有一个水平列表框的示例。

#4

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.

您还可以使用一个UniformGrid，它将把项目列在一组行或列中。

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、ListBox或任何形式的ItemsControl中的其他面板来获取项目的方式是更改ItemsPanel属性。通过设置ItemsPanel，您可以从ItemsControls使用的默认StackPanel更改它。使用WrapPanel，我们还应该设置如图所示的宽度。

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

#5

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 [phone]{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:

Xaml建议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:

Xaml建议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>