c# WPF 显示每行 3 列的列表框

Question

我想在每行中显示三列，并包含一些图像和文本。但无论我尝试什么，我都无法让列表框水平显示项目。只有列表框本身内的堆栈面板。

<ListBox Name="lsbox" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
    ItemsSource="{Binding Cards}"
    SelectedItem="{Binding SelectedItem}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock Margin="3" Text="{Binding Name}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                <Image Width="200" Height="300" Margin="100" Source="{Binding Path}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                <UniformGrid Columns="3"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

图像显示在彼此下方

我以前能够让图像彼此相邻显示，如下所示：

<ListBox Name="lsbox" ScrollViewer.HorizontalScrollBarVisibility="Disabled" Grid.Row="1">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <UniformGrid Columns="3"/>
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <Image Source="33bfedbf836836cd81108e1e3e57a8e1.jpg"/>
                <Image Source="33bfedbf836836cd81108e1e3e57a8e1.jpg"/>
                <Image Source="33bfedbf836836cd81108e1e3e57a8e1.jpg"/>
            </ListBox>

3 每行水平显示图像

但是这样我只能手动设置图像源，而不能使用绑定来设置项目或图像源。 我刚刚开始使用 wpf，所以我真的达到了极限。

致以诚挚的问候 罗宾

Answer 1

按照与之前相同的方式配置项目面板，然后从数据模板中删除

<UniformGrid />

：

<ListBox Name="lsbox" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
    ItemsSource="{Binding Cards}"
    SelectedItem="{Binding SelectedItem}">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="3"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock Margin="3" Text="{Binding Name}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                <Image Width="200" Height="300" Margin="100" Source="{Binding Path}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>