web-dev-qa-db-fra.com

ItemsControl avec une orientation horizontale

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

c#wpfwpf-controls
210
user101375

Il suffit de changer le panneau utilisé pour héberger les éléments:

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

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

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

La réponse est bonne, mais je ne pouvais pas le faire fonctionner avec UserControls. Si vous avez besoin de UserControls, cela devrait vous aider.

ItemsControl with Horizontal Usercontrols

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 lier des données, vous devrez ajouter un ItemsSource au ItemsControl du code XAML ou du code en retard. Notez également que uc: serait le xmlns:uc="NamespaceOfMyControl" déclaré en haut du fichier.

8
HockeyJ

Voici un exemple de défilement horizontal dans 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>

En fonction de la hauteur/largeur de votre zone cliente, cela entraînera ce type de présentation, de débordement d'éléments défilant horizontalement:

enter image description here

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

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

6
AndyUK