ListBox WPF qui dispose ses éléments horizontalement

Question

J'essaie d'écrire une application WPF pour afficher des images à partir d'une sélection. Je veux afficher toutes les images disponibles dans une bannière en haut de la fenêtre, et afficher l'image principale sélectionnée dans la fenêtre principale pour un traitement ultérieur.

Si je voulais la liste sur le Gauche de la fenêtre, en affichant les images verticalement, je peux le faire de manière assez élégante en utilisant le databinding.

    <ListBox 
        Name="m_listBox"
        IsSynchronizedWithCurrentItem="True"
        ItemsSource="{Binding}"            
        >
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Image Source="{Binding}" Width="60" Stretch="Uniform" />
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

Existe-t-il un moyen simple de faire en sorte qu'il soit horizontal plutôt que vertical ? Les principales exigences d'une solution sont les suivantes :

• Les éléments sont remplis en utilisant le databinding
• L'élément sélectionné est modifié par un simple clic de l'utilisateur.

Answer 1

WrapPanel

 <ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel IsItemsHost="True" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBoxItem>listbox item 1</ListBoxItem>
    <ListBoxItem>listbox item 2</ListBoxItem>
    <ListBoxItem>listbox item 3</ListBoxItem>
    <ListBoxItem>listbox item 4</ListBoxItem>
    <ListBoxItem>listbox item 5</ListBoxItem>
</ListBox>

Tutoriel WPF

Answer 2

La valeur par défaut ItemsPanel pour le ListBox Le contrôle est un VirtualizingStackPanel Par conséquent, si vous souhaitez que l'expérience du contrôle soit normale et par défaut, mais qu'il soit disposé horizontalement, vous devez le spécifier (et modifier l'orientation).

Exemple :

<ListBox>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel IsItemsHost="True" Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>

Answer 3

Voici un exemple de StackPanel. Fil d'Ariane horizontal avec liaison Mvvm

 <ItemsControl
            x:Name="tStack"
            Grid.Row="1"
            Grid.Column="0"
            Height="40"
            Background="Red"
            ItemsSource="{Binding BreadCrumbs}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Button
                        Margin="5"
                        CommandParameter="{Binding .}"
                        Command="{Binding BreadcrumbClickCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}, Path=DataContext.BreadcrumbClickCommand}"
                        Content="{Binding Name}" />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>