Skip to content

ListBox 实现多行多列定制内容显示

L edited this page Dec 12, 2020 · 1 revision

效果如图
20201212_111240

关键代码

<ListBox Name="imageListBox" ItemsSource="{Binding }"
            Width="{Binding ElementName=listBoxShowImages,Path=Width,Mode=OneWay}" Loaded="imageListBox_Loaded">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="6"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <!--定制样式-->
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Vertical">
                <TextBlock Margin="3" Text="{Binding Name}" Width="100"/>
                <Image Margin="3" Source="{Binding Path}" Width="100" Height="100"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

单行Item个数设置

<UniformGrid Columns="6"/>

示例代码

ListBoxShowImages

Clone this wiki locally