WPF-动态显示上面有文本的图像

在我的.net4-0 C#应用程序中，我有一个由8x5按钮组成的网格。它们中的每一个都应该在图像（左上角）上显示一个图像和一个字母（要按下的热键）。因为图像依赖于我的数据，所以它必须是动态的。所有图像都具有相同的大小（100x100像素）。图像应该很好地填充按钮

我怎样才能做到这一点？

---

到目前为止，我的想法是，每次我加载数据并更改显示图像时，我都会手动创建一个Stackpanel，上面有一个图像和文本块。但是这并不适合。

使用

列表框

并将数据列表放入

列表框。ItemSource

然后您可以创建自己的

数据模板

请指定如何在该

列表框中显示数据

<ListBox ItemSource="{Binding Games}"/>

例如，您可以指定希望您的

列表框

显示为8x5网格。当然，这取决于您是否知道始终使用8x5单元格显示网格

具体来说，你想有一个按钮，上面有一个字母，正如你说的，我会这样做

<!--Resource-->
<DataTemplate DataType={x:YourViewModel}>
  <StackPanel>
    <TextBlock Content="{binding SomeText}"/>
    <Button>
      <Button.Content>
        <Image Source="{binding YourImageSource}" Width="100px" Height="100px"/>
      </Button.Content>        
    </Button>
  </StackPanel>
</DataTemplate>

然后我们需要一个视图模型。通常，ViewModel不会创建新数据，因为数据应该来自模型（可能来自数据库），但出于本例的考虑，我们在ViewModel中创建它

public class GameViewModel
{
    Public ObservableCollection<Game> Games {get; set;} //<--- This is where the View is binding to
    public GameViewModel
    {
        ObservableCollection<Game> Games = new ObservableCollection<Game>(); //ObservableCollection is used to notify if we have added or removed or updated an item in the list.
        Games.Add(new Game() {Title = "Warcraft 3", Image=//Where you have your images );
        Games.Add(new Game() {Title = "Overwatch", Image=//Where you have your images );
        this.Games = Games;
    }
}

要使其工作，您需要在视图中设置

Datacontext

。通常在创建新的WPF项目时，该视图称为MainWindow.xaml

public class Game
{
    private string _title {get; set;}
    private string _imagepath {get; set;} //We are not getting the image but the imagepath

    Public string Title {get{return _title;} set{_title = value;}
    Public string Imagepath set{_imagepath = value;}
}

将ViewModel添加到datacontext，如下所示

/*Normally you want to avoid doing anything in code-behind with MVVM 
  If you want to avoid that you have to look into DI and IoC But it is way 
  to much to do in this example*/

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = new GameViewModel();
    }
}

---

从这里开始阅读：。谢谢。这个链接帮助我理解WPF的某些方面，感谢您的回答。你能告诉我“放置”它们的代码（一个就足够了）以及我如何在运行时通过代码访问文本块或图像数据吗？你是说将一个对象（

image

和

Textblock

）放入

网格.Column

和

网格.Row

）我想是这样的。让我问更多的问题。上面的代码是MVVM的视图吗？我的图像+文本组合的一种可重用样式定义。然后，在xaml中的资源块之后，我们放置其中一个（在我的例子中，是5x8网格中的多个）。这是ViewModel吗？然后我需要一个带有模型实现的.cs类？如何将文本和/或图像更改为其中一个按钮？嗯，我不确定您对您的评论有何看法，但XAML代码是MVVM中的视图。否ViewModel也是一个类（.cs），它与您的模型“对话”，并具有绑定到视图的属性。模型就是包含您的业务逻辑的东西。@norca添加了一个关于MVVM如何工作的“简单”示例。希望它能解释你需要什么。

/*Normally you want to avoid doing anything in code-behind with MVVM 
  If you want to avoid that you have to look into DI and IoC But it is way 
  to much to do in this example*/

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = new GameViewModel();
    }
}