Мне нужно горизонтальное представление списков

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

Я публикую этот ответ из-за информационных целей в качестве альтернативного способа ведения дел:

Объекты / Классы:

  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>

Answer 5

Попробуйте WrapPannel, который разложит элементы по горизонтали, пока не останется свободного места, а затем перейдет к следующей строке.

Вы также можете использовать UniformGrid, который разложит элементы взадайте количество строк или столбцов.

То, как мы размещаем элементы в порядке, используя эти другие панели в ListView, ListBox или любой форме ItemsControl, заключается в изменении свойства ItemsPanel.Установив ItemsPanel, вы можете изменить его со стандартной StackPanel, которая используется ItemsControls.С 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>