ItemsControl с горизонтальной ориентацией


226

Знаете ли вы какие-либо элементы управления, унаследованные от ItemsControl, которые имеют горизонтальную ориентацию элементов?

Ответы:


464

Просто измените панель, используемую для размещения элементов:

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

Вам не нужно добавлять IsItemsHost = "True" в StackPanel?
Томас Левеск

5
Я считаю, что это необходимо только в том случае, если вы пересматриваете весь контроль. См. Msdn.microsoft.com/en-us/library/…
Кент Бугаарт,

3
Ответ также имеет место для Silverlight
Скотт

как это сделать в файле ресурсов?
Флориан

Чтобы сделать это в файле ресурсов, вам нужно установить ключ x: Key
Tore Aurstad

32

Хотя продвигаемый ответ хорош, вот альтернатива, если вы хотите, чтобы элементы растягивались.

<ItemsControl.ItemsPanel>                              
    <ItemsPanelTemplate>
        <UniformGrid Rows="1" />
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>   

Если вы используете UWP, вам понадобится UWP-UniformGrid отсюда: github.com/rickapps/UWP-UniformGrid-Control . Я только что реализовал это плюс решение NielW выше. Действительно легко и решает проблему.
Гейл Фоад

9

Верхний ответ хорош, но я не смог заставить его работать с UserControls. Если вам нужны UserControls, это должно помочь.

ItemsControl с горизонтальными пользовательскими контролями

Моя версия:

<Window.Resources>
    <DataTemplate x:Key="ItemTemplate2">
        <StackPanel>
            <uc:MyUserControl MinWidth="20" BorderBrush="Black" BorderThickness="0.1" />
        </StackPanel>
    </DataTemplate>

    <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
        <StackPanel Orientation="Horizontal" Margin="0,0,0,0"/>
    </ItemsPanelTemplate>
</Window.Resources>

<StackPanel>
    <ItemsControl x:Name="list_MyControls"
                  HorizontalAlignment="Left"
                  VerticalAlignment="Top"
                  Margin="0,8,0,0"
                  ItemTemplate="{StaticResource ItemTemplate2}"
                  ItemsPanel="{StaticResource ItemsPanelTemplate1}" />
</StackPanel>

Для привязки данных, вам нужно будет добавить ItemsSourceк ItemsControlв XAML или код позади. Также обратите внимание, что uc:это будет xmlns:uc="NamespaceOfMyControl"объявлено в верхней части файла.


Я не привык использовать WPF, так что, может быть, то, что я скажу, это очень простой материал Я обнаружил, что внутри UserControl вы должны использовать «UserControl.Resources» вместо «Window.Resources». В любом случае, спасибо за отличный ответ, решил мою проблему.
Пауло Андре Хааке

9

Это пример того, как сделать горизонтальную прокрутку в ItemsControl.

Во-первых, класс viewmodel главного окна, используемый для получения / установки списка элементов, которые мы хотим отобразить.

MainWindowViewModel.cs

using System.Collections.Generic;

namespace ItemsControl
{
   public class Item
   {
      public Item(string title)
      {
         Title = title;
      }

      public string Title { get; set; }
   }

   public class MainWindowViewModel
   {
      public MainWindowViewModel()
      {
         Titles = new List<Item>()
         {
            new Item("Slide 1"),
            new Item("Slide 2"),
            new Item("Slide 3"),
            new Item("Slide 4"),
            new Item("Slide 5"),
            new Item("Slide 6"),
            new Item("Slide 7"),
            new Item("Slide 8"),
         };
      }

      public List<Item> Titles { get; set; }
   }
}

Главное окно xaml для просмотра:

MainWindow.xaml

    <Window x:Class="ItemsControl.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ItemsControl"      
        mc:Ignorable="d"
        Title="MainWindow" Height="400" Width="400">

    <Window.DataContext>
        <local:MainWindowViewModel />
    </Window.DataContext>

    <Grid Margin="5">
        <ScrollViewer
            VerticalScrollBarVisibility="Disabled"
            HorizontalScrollBarVisibility="Auto">

            <ItemsControl
                x:Name="SearchResultList"                
                ItemsSource="{Binding Titles}">

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

                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Border
                            Margin="5"
                            BorderThickness="1"
                            BorderBrush="Aqua">

                            <TextBlock
                                Text="{Binding Title}"
                                HorizontalAlignment="Center"                               
                                VerticalAlignment="Top"
                                FontSize="12"
                                TextWrapping="Wrap"
                                TextAlignment="Center"
                                FontWeight="DemiBold"  
                                Width="150"
                                Height="150" />
                        </Border>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>

            </ItemsControl>
        </ScrollViewer>

    </Grid>
</Window>

В зависимости от того, насколько высока / широка ваша клиентская область, это приведет к такому типу макета, элементы переполнения прокручиваются горизонтально:

введите описание изображения здесь

Более подробную информацию можно найти по этой ссылке в блоге, включая пример того, как выполнять прокрутку по вертикали:

http://www.technical-recipes.com/2017/how-to-orient-wrappanel-items-within-itemscontrol-lists-vertically-and-horizontally/

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.