Question

因为我对C＃和WPF很新，所以我无法弄清楚如何做到这一点。我有一个表格，应该在一个表格中显示151张图片（所有口袋妖怪第1代精灵）。我现在这样做的方式是它显示相同的图像151次而不是所有图像只显示一次。我为此写的代码如下：

    public partial class PokeGame : Window
{
    BitmapImage carBitmap = new BitmapImage(new Uri("pack://application:,,,/Images/All_Sprites/001.png", UriKind.Absolute));

    {

        InitializeComponent();

        int imgCount = 151;
        int left = 0;
        int top = 0;
        List<Image> imageList = new List<Image>();
        for (int i = 0; i < imgCount; i++)
        {
            if(i % 10 == 0)
            {
                if (i != 0)
                {
                    top += 175;
                    left = 0;
                } else
                {
                    top = 0;
                    left = 0;
                }
            }

            Image img_ding = new Image();
            img_ding.Source = carBitmap;
            img_ding.Height = 150;
            img_ding.Width = 150;
            img_ding.Margin = new Thickness(left, top ,0 ,0);
            imageList.Add(img_ding);
            left += 175;
        }

        int j = 0;

        foreach (Image img in imageList)
        {
            imageCanvas.Children.Add(img);
            j++;
        }

    }

正如您所看到的，我的代码可能还有很大的改进空间。但是，我的问题是：我怎样才能使它不会显示相同的图像151次，而是所有图像（sprite001.png，sprite002.png，sprite003.png等）？

Answer 1

不是以编程方式将Image控件添加到Canvas，而是编写此XAML：

<ItemsControl x:Name="images">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="10"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Image Width="150" Height="150" Source="{Binding}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

可能会向DataTemplate中的Image控件添加一些Margin。

在代码后面，在MainWindow的构造函数中添加一行：

using System.Linq;
...

public MainWindow()
{
    InitializeComponent();

    images.ItemsSource = Enumerable
        .Range(1, 151)
        .Select(i => string.Format("pack://application:,,,/Images/{0:000}.png", i));
}

现在您可能想要创建一个合适的视图模型，您可以在其中拥有图像的集合类型属性，例如

public class ViewModel
{
    public ObservableCollection<string> Images { get; }
        = new ObservableCollection<string>(Enumerable
            .Range(1, 151)
            .Select(i => string.Format("pack://application:,,,/Images/{0:000}.png", i)));
}

然后，您可以将Window的DataContext分配给视图模型的实例，并绑定到集合属性，如下所示：

public MainWindow()
{
    InitializeComponent();
    DataContext = new ViewModel();
}

XAML

<ItemsControl ItemsSource="{Binding Images}">
    ...
</ItemsControl>

Answer 2

您只需在循环外创建一次carBitmap，并且每次都使用它。而是为每个图像创建一个新图像。

        Image img_ding = new Image();
        BitmapImage carBitmap = new BitmapImage(new Uri("pack://application:,,,/Images/All_Sprites/001.png", UriKind.Absolute));
        img_ding.Source = carBitmap;

我假设以001.jpg结尾的路径每次都应该改变;毫无疑问，你可以搞清楚。它是for循环中的i的值，用零字符串化和左边填充？这看起来像这样：

        Image img_ding = new Image();
        var uri = String.Format("pack://application:,,,/Images/All_Sprites/{0:000}.png", i);
        //  N.B. UriKind.Absolute is redundant, sigh
        BitmapImage carBitmap = new BitmapImage(new Uri(uri, UriKind.Absolute ));
        img_ding.Source = carBitmap;

另外，@ Clemens将提供一个答案，向您展示如何使用ItemsControl重写整个事物，这将比这更好。今天早上我已经写了一些XAML，所以轮到他了。

Answer 3

您需要在循环内定义您的位图，而不是在外部。然后，每次迭代都将使用新路径创建一个新的位图。

如下所示：

for (int i = 0; i < imgCount; i++)
{
   // padding left will give you 001 and 010 and 151
   string img = i.ToString().PadLeft(3, '0');
   BitmapImage carBitmap = new BitmapImage(new Uri("pack://application:,,,/Images/All_Sprites/" + img+".png", UriKind.Absolute));
   // the rest of your code
}

文件夹中的多个图像

3 个答案: