水平布局其项目的 WPF ListBox答案

【问题标题】：WPF ListBox that lays out its items horizontally水平布局其项目的 WPF ListBox
【发布时间】：2010-11-20 12:30:39
【问题描述】：

我正在尝试编写一个 WPF 应用程序来显示选择中的图像。我想在窗口顶部的横幅中显示所有可用的图像，并在主窗口中显示主要的选定图像以供进一步处理。

如果我想要窗口左侧的列表，垂直显示图像，我可以使用数据绑定非常优雅地做到这一点。

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

有没有一种简单的方法可以使这个水平而不是垂直？解决方案的主要要求是：

使用数据绑定填充项目
只需用户单击即可更改所选项目。

【问题讨论】：

标签： wpf data-binding listbox

【解决方案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>

WPF Tutorial

【讨论】：

或 StackPanel with Orientation="Horizontal"
StackPanel 将是 Nir 所说的更好的解决方案。
谢谢！是的，水平方向的 stackPanel 是更好的选择。
代表 andrew megs 给你 +1。谁发现您的代码非常有用，但不想给您“虚构的互联网积分”

【解决方案2】：

ListBox 控件的默认ItemsPanel 是VirtualizingStackPanel，因此如果您想要控件的正常默认体验但只是水平布局，您应该指定它（并更改方向） .

例子：

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

【讨论】：

【解决方案3】：

这是 StackPanel 的示例。带有 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>

【讨论】：