Question

所以我所拥有的是一个列表框，在移动到下一行之前连续显示3个图像，这是我用来做的代码。

<ListBox Name="lbListOfItemsOnHDD" Grid.Row="1" Grid.Column="0" Width="600" Height="450" Margin="5" BorderThickness="0" ScrollViewer.HorizontalScrollBarVisibility="Hidden" HorizontalAlignment="Left" VerticalAlignment="Top">
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapPanel IsItemsHost="True" Orientation="Horizontal" Width="600" VerticalAlignment="Top" />
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                    <ListBox.ContextMenu>
                        <ContextMenu Name="cmLibraryImages" x:Uid="cmLibraryImages">
                            <MenuItem
                                Name="cmCmdDelete"
                                Header="Delete Selected Image"
                                Click="cmCmdDelete_Click" />
                        </ContextMenu>
                    </ListBox.ContextMenu>
                </ListBox>

图像宽度始终相同所以在移动下一行之前总会显示3个图像，唯一的问题是我想要图像下方的图像标题，这会导致图像顶部对齐的问题不是水平的（见下面的截图）。在运行时使用简单的for循环添加图像，以查看包含图像路径，图像标题等的列表。图像和文本框被添加到堆栈面板，然后将其添加到堆栈面板中。列表框。

Unaligned at the top images in WPF list box

我尝试在各个不同的部件上使用valign top并改变边距，但没有设法将它们对齐在顶部。

任何帮助都将不胜感激。

Answer 1

更灵活的方法是设置ListBox的ItemTemplate并使用Binding来完成。例如：

在代码隐藏（或更好的viewmodel，如果你遵循MVVM）你创建一个类或类似的结构：

public struct Movie
{
  String Title;
  Uri Source;
}

和像这样的ObservableCollection：

public ObservableCollection<Movie> Movies
{
  get;
  set;
}

并将Movies集合设置为ListBox的ItemsSource（在代码隐藏或绑定中）

最后是XAML

<ListBox.ItemTemplate>
  <DataTemplate DataType="{x:Type typeOfTheAddedItem}">
    <StackPanel Height="500" Orientation="Vertical">
      <Image Source="{Binding Path=PathRelativeTotypeOfTheAddedItem}" />
      <TextBlock="{Binding Path=PathRelativeTotypeOfTheAddedItem}" />
    </StackPanel>
  </DataTemplate>
</ListBox.ItemTemplate>

WPF列表框，多行和列顶部对齐问题

1 个答案: