ItemsControl avec orientation horizontale


225

Connaissez-vous des contrôles hérités de ItemsControl qui ont une orientation horizontale des éléments?

Réponses:


463

Modifiez simplement le panneau utilisé pour héberger les éléments:

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

N'avez-vous pas besoin d'ajouter IsItemsHost = "True" au StackPanel?
Thomas Levesque

5
Je crois que cela n'est nécessaire que si vous modifiez à nouveau l'ensemble du contrôle. Voir msdn.microsoft.com/en-us/library/…
Kent Boogaart

3
La réponse est également valable pour Silverlight
Scott

comment faire cela dans un fichier de ressources?
Florian

Pour ce faire, dans un fichier de ressources, vous devez définir la clé x: Key
Tore Aurstad

32

Bien que la réponse promue soit excellente, voici une alternative si vous souhaitez étirer les éléments.

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

Si vous utilisez UWP, vous aurez besoin d'UWP-UniformGrid à partir d'ici: github.com/rickapps/UWP-UniformGrid-Control . Je viens de l'implémenter plus la solution de NielW ci-dessus. Vraiment facile et résout le problème.
Gail Foad du

9

La première réponse est bonne, mais je n'ai pas pu le faire fonctionner avec UserControls. Si vous avez besoin de UserControls, cela devrait vous aider.

Éléments Contrôle avec commandes horizontales

Ma version:

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

Pour vous lier aux données, vous devrez ajouter un ItemsSourceauItemsControl dans le code XAML ou derrière. Notez également que ce uc:serait le xmlns:uc="NamespaceOfMyControl"déclaré en haut du fichier.


Je n'ai pas l'habitude d'utiliser WPF, alors peut-être que je dirai des choses très basiques. J'ai découvert qu'à l'intérieur d'un UserControl, vous devez utiliser "UserControl.Resources" au lieu de "Window.Resources". Quoi qu'il en soit, merci pour la bonne réponse, a résolu mon problème.
Paulo André Haacke

9

Ceci est un exemple de la façon de faire défiler horizontalement dans un ItemsControl.

Premièrement, la classe viewmodel de la fenêtre principale utilisée pour obtenir / définir la liste des éléments que nous souhaitons afficher.

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

La fenêtre principale xaml pour la vue:

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>

Selon la hauteur / largeur de votre espace client, cela se traduira par ce type de mise en page, les éléments de débordement défilant horizontalement:

entrez la description de l'image ici

Plus de détails peuvent être trouvés sur ce lien de blog, y compris un exemple sur la façon de faire défiler verticalement:

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.