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"

如何在WPF c＃列视图中显示列表框项

2 个答案: