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>

我的程序看起来像图片（垂直） enter image description here 谁能告诉我如何改变观点？提前谢谢。

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>

我需要列表框的水平视图

5 个答案: