Controle de itens com orientação horizontal

225

Você conhece algum controle herdado do ItemsControl que possui orientação horizontal de itens?

c# wpf wpf-controls

— user101375
fonte

463

Simplesmente altere o painel usado para hospedar os itens:

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

— Kent Boogaart
fonte

Você não precisa adicionar IsItemsHost = "True" ao StackPanel?

— Thomas Levesque

5

Acredito que isso só é necessário se você estiver redefinindo todo o controle. Veja msdn.microsoft.com/en-us/library/…

— Kent Boogaart

3

Resposta também vale para Silverlight

— Scott

como fazer isso em um arquivo de recurso?

— Florian

Para fazer isso em um arquivo de recurso, você precisa definir a chave x: Key

— Tore Aurstad

32

Embora a resposta promovida seja ótima, aqui está uma alternativa, se você deseja que os itens se expandam.

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

— NielW
fonte

Se você estiver usando o UWP, precisará do UWP-UniformGrid a partir daqui: github.com/rickapps/UWP-UniformGrid-Control . Eu apenas implementei mais a solução do NielW acima. Realmente fácil e resolve o problema.

— Gail Foad

9

A resposta principal é boa, mas não consegui fazê-la funcionar com UserControls. Se você precisar de UserControls, isso deve ajudar.

ItemsControl com controles de usuário horizontais

Minha versão:

<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>

Para vincular a dados, você precisará adicionar um ItemsSourceao ItemsControlno XAML ou atrás de código. Observe também que uc:seria o xmlns:uc="NamespaceOfMyControl"declarado na parte superior do arquivo.

— HockeyJ
fonte

Não estou acostumado a usar o WPF, então talvez o que vou dizer seja algo muito básico. Eu descobri que dentro de um UserControl você deve usar "UserControl.Resources" em vez de "Window.Resources". De qualquer forma, obrigado pela ótima resposta, resolveu meu problema.

— Paulo André Haacke

9

Este é um exemplo de como fazer rolagem horizontal em um ItemsControl.

Primeiramente, a classe viewmodel da janela principal costumava obter / definir a lista de itens que desejamos exibir.

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; }
   }
}

A janela principal xaml para a visualização:

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>

Dependendo da altura / largura da sua área de cliente, isso resultará nesse tipo de layout; os itens de excesso serão rolados horizontalmente:

Mais detalhes podem ser encontrados neste link do blog, incluindo um exemplo de como fazer a rolagem vertical:

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

— AndyUK
fonte