从WinForms中的`ImageList`迁移到WPF

时间:2013-02-21 16:33:27

标签: c# wpf winforms imagelist

我想将项目移动到WPF,在其中我有一个ImageList(在设计视图中选择25个图像加载),我用它来创建按钮,如下所示: 我已将项目简化为以下代码。 这是我的整个项目(除了.Designer.cs中自动生成的代码):

public partial class Form1 : Form
{
    Button[] buttonList = new Button[25];
    Size buttonSize = new Size(140, 140);
    public Form1()
    {
        InitializeComponent();
        this.ClientSize = new Size(142 * 5, 142 * 5);
        for (int i = 0; i < buttonImages.Images.Count; i++)
        {
            buttonList[i] = new Button();
            buttonList[i].Size = buttonSize;
            buttonList[i].Location = new Point(
                (i % 5) * (buttonSize.Width + 2) + 1,
                (i / 5) * (buttonSize.Height + 2) + 1);
            buttonList[i].Image = buttonImages.Images[i];
        }
        SuspendLayout();
        Controls.AddRange(buttonList);
        ResumeLayout(false);
    }
}

我似乎无法理解如何在WPF中完成这个简单的任务。我最好能从这里的答案中看出(like this)我应该

  • 使用图片填充文件夹
  • 创建引用它们的ResourceDictionary
  • 创建引用ResourceDictionary引用的另一个文件
  • 创建一个通过ResourceDictionary访问图像的其他东西(我无法弄清楚是什么)将它们加载到按钮(但是按钮类甚至没有构造函数...... ??? !!!)

有人可以帮助将其转换为WPF吗?老实说,我只是无法弄清楚从哪里开始。

如果重要的话,这就是它运行时的样子: enter image description here

1 个答案:

答案 0 :(得分:3)

我们将使用MVVM。

首先我们将制作一个模型。

public class MyModel
{
   public BitmapSource Picture { get; set; }
   public string Description { get; set; }
}

然后我们的ViewModel

public class MyViewModel
{
   public ObservableCollection<MyModel> Images { get; set; }

   public ICommand ButtonClicked { get; set; }

   ... Logic to populate the images
}

然后是我们的观点

<Window x:Class="TestWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:loc="clr-namespace:TestWPF"
        Title="MainWindow"
        Height="350"
        Width="525">
    <Window.Resources>
        <loc:MyViewModel x:Key="ViewModel" />
    </Window.Resources>
    <Grid DataContext="{StaticResource ViewModel}">
        <ListView ItemsSource="{Binding Images}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Button Command="{Binding ButtonClicked, RelativeSource=Parent}"
                            CommandParameter="{Binding Description}">
                        <Image Width="50"
                               Height="50"
                               Source="{Binding Picture}"></Image>
                    </Button>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</Window>

这将创建一个应该以相同方式起作用的列表。