WPF - dynamically display Image with Text above - wpf

Question

in my .net4-0 C# application I have a grid of 8x5 buttons. Each of them should display an image and a single letter (the hotkey to press) over the image (top left corner). Because the images depend on my data, it must be dynamically. All Images have the same size (100x100 pixel). The Image should fill the button nicely.
How can i achieve this?
My thoughts so far is, every time I load my data and change the display images, I manually create a Stackpanel, with a Image and TextBlock on it. But this doesn't fit well together.

Answer 1

Use a ListBox and put your list of data into ListBox.ItemSource Then you can create your own DataTemplate do specify how you want to display your data in that ListBox
For Example you can specify that you want your ListBox to be displayed with a 8x5 Grid. This of course depends on if you know that you will always display your Grid with 8x5 cells.
For the specific that you want to have a button with a letter on top as you said I would go with this.
<!--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>
This is assuming that you're using MVVM which is highly recommended when working with WPF.
If you don't know what MVVM then start reading about it cause it will help your development in WPF to become so much better.
If my example is confusing, please provide feedback and I will make it more clearer.
EDIT Simple-MVVM Example
Let's say we want to display a Game with a title and picture
First we create the Model
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;}
}
Then we need a ViewModel. Normally the ViewModel doesn't create new data since the data should come from the Model (From maybe a Database), but for the sake of this example we create it in the 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;
}
}
And now when to have our View to bind to this ViewModel in our XAML-code
<!--Basic xaml-->
<!--Resource-->
<DataTemplate DataType={x:Type local:Game}>
<StackPanel>
<TextBlock Content="{Binding Title}"/>
<Button>
<Button.Content>
<Image Source="{Binding Imagepath}" Width="100px" Height="100px"/>
</Button.Content>
</Button>
</StackPanel>
</DataTemplate>
Then in our ListBox
<ListBox ItemSource="{Binding Games}"/>
To get this to work you need to set the Datacontext in the View. Often when you create a new WPF-project the the View is called MainWindow.xaml
Add the ViewModel to the datacontext like this
/*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();
}
}