如何在WPF C＃的列视图中显示列表框项目

Question

我在WPF中使用列表框控件以行方式显示列表框项，但我想以列方式显示（类似于引导网格）

XMAL

<ListBox x:Name="lb_items">
   <ListBox.ItemTemplate>
        <DataTemplate>                            
            <StackPanel Margin="10 0 0 0">
                <Image Source="{Binding ImageSource}" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

我从后面的代码绑定列表框

lb_items.ItemsSource = modules.ToList();

Answer 1

试试这个。

    <ListBox x:Name="lb_items">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel IsItemsHost="True" />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Margin="10 0 0 0">
                    <Image Source="{Binding ImageSource}" />
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

Answer 2

ListBox具有称为ItemsPanel的属性，该属性确定如何呈现项目。

在应用程序资源中的某个位置创建不同的ItemsPanelTemplate，因此您可以轻松地重用它：

<ItemsPanelTemplate x:Key="WrapPanelTemplate">
    <WrapPanel />
</ItemsPanelTemplate>

<ItemsPanelTemplate x:Key="HorizontalStackPanelTemplate">
    <StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>

那么您可以轻松地使用它：

<ListBox ItemsPanel="{StaticResource HorizontalStackPanelTemplate}">...
<ItemControl ItemsPanel="{StaticResource WrapPanelTemplate}">...

始终将此类资产放入应用程序资源中，以使视图的代码清晰易读。

---

额外提示：这是动画的WrapPanel，当您调整窗口大小或将项目插入列表时，该项目可以使项目动画化：

<ItemsPanelTemplate x:Key="FluidWrapPanel">
    <WrapPanel>
        <i:Interaction.Behaviors>
            <ei:FluidMoveBehavior AppliesTo="Children" Duration="0:0:0.5">
                <ei:FluidMoveBehavior.EaseY>
                    <SineEase EasingMode="EaseInOut" />
                </ei:FluidMoveBehavior.EaseY>
                <ei:FluidMoveBehavior.EaseX>
                    <CubicEase EasingMode="EaseInOut" />
                </ei:FluidMoveBehavior.EaseX>
            </ei:FluidMoveBehavior>
        </i:Interaction.Behaviors>
    </WrapPanel>
</ItemsPanelTemplate>

不要忘记包括以下xml名称空间：

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"