我需要的列表框的水平视图

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

尝试WrapPannel，这将出水平放置的物品，直到有没有更多的空间，然后移动到下一行。

你也可以使用一个UniformGrid，这将奠定项目出的行或列的定数。

我们得到一个ListView，ListBox中使用这些其他面板的项目，以人气指数的方式，或任何形式的ItemsControl的是通过改变ItemsPanel属性。通过设置ItemsPanel，你可以从ItemControls使用的默认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 3

您的itemscontrol没有提供自定义ItemsPanel，那么StackPanel被用作垂直方向的默认值。

试加：

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

Answer 4

您可以使用一个WrapPanel或根据您的要求一个StackPanel。

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

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

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

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>