我需要的列表框的水平視圖

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>