文件夹中的多个图像

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>

可能会Margin向DataTemplate中的Image控件添加一些内容.

在后面的代码中,在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>