我需要列表框的水平视图

Question

我正在处理 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>

我的程序如图所示（垂直） 谁能告诉我如何改变视图？ 提前致谢。

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

Answer 2

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

尝试添加：

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

Answer 3

您可以根据需要使用 WrapPanel 或 StackPanel。

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

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

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

Answer 4

尝试使用 WrapPannel，它会将物品水平放置，直到没有更多空间，然后移动到下一行。

您也可以使用 UniformGrid，它将项目按设定的行数或列数排列。

我们使用 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>

Answer 5

出于提供信息的目的，我发布此答案作为另一种做事方式：

实体/类：

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

代码背后：

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