Question

我有WrapPanel图标。我想逐行创建它（每行5个项目）。

所以，我的代码：

<WrapPanel Grid.Row="3"
        Grid.RowSpan="2"
        Grid.Column="4"
        x:Name="wpIcons">
</WrapPanel>


foreach(var ic in obj.Icons)
{
    BitmapImage bi = new BitmapImage();
    bi.BeginInit();
    bi.StreamSource = new MemoryStream(ic.image);
    bi.EndInit();

    Image im = new Image();
    im.Source = bi;
    wpIcons.Children.Add(im);
}

所以，它可以有效但不是逐行的。

如何逐行制作图标？

Answer 1

如果您想要每行5个项目，则可以指定Image元素的固定宽度和WrapPanel：

<WrapPanel x:Name="wpIcons" Grid.Row="3"
            Grid.RowSpan="2"
            Grid.Column="4"
            Width="100">
</WrapPanel>

foreach (var ic in obj.Icons)
{
    BitmapImage bi = new BitmapImage();
    bi.BeginInit();
    bi.StreamSource = new MemoryStream(ic.image);
    bi.EndInit();

    Image im = new Image();
    im.Width = 20; //<-- = 100 / 5
    im.Source = bi;
    wpIcons.Children.Add(im);
}

Answer 2

要控制单个项目的数量，我建议您使用 UniformGrid 。这是一个例子：

  <UniformGrid Columns="2" Rows="2" Name="uniformGrid1" >
            <Image Source="pic1.jpg"></Image>
            <Image Source="pic2.jpg"></Image>
            <Image Source="pic3.jpg"></Image>
            <Image Source="pic4.jpg"></Image>
  </UniformGrid>

在给定的示例中，图片将显示在2行和2列中（在您的情况下，您可以设置Rows =＆＃34; 5＆＃34;不设置列）。您可以根据需要修改列和/或行。

如何逐行制作WrapPanel项目？

2 个答案: