25/04/2021 xaml - How to make WPF listview display Images and Labels dynamically - Stack Overflow

How to make WPF listview display Images and Labels dynamically

Asked 5 years, 1 month ago Active 6 months ago Viewed 34k times

I'm having quite a difficult time trying to create the UI for a WPF Window. I'm trying to display
(dynamically) a bunch of Movie Posters with the name of the movie directly under the image.
8 ItemsSource is assigned to a list of Images via foreach iteration. The Image files themselves
may be different sizes, but as shown below I will be setting a uniform size.

Basically, my goal is for it to look something like this:

8

So far, My code only displays a window with one large horizontal row(?) with the image in the
center and no label. Here's my XAML code:

<Window x:Name="TVWindow" x:Class="PACS_Pre_Alpha.TV"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="TV" Height="746" Width="1000" ResizeMode="NoResize">
<Grid x:Name="TVGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition />
</Grid.RowDefinitions>
<ListView x:Name="TvBox" HorizontalAlignment="Left" Height="648"
VerticalAlignment="Top" Width="994" Grid.Row="5" Grid.Column="5">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="5" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
Your privacy <ListView.ItemTemplate>
<DataTemplate>
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose
<StackPanel Orientation="Vertical" VerticalAlignment="Stretch">
information in accordance with<Image
our Cookie Policy
Source .
="{Binding ImageData}" HorizontalAlignment="Center"
VerticalAlignment="Top" />
<TextBlock Text="{Binding Title}" HorizontalAlignment="Center"
Accept all cookies
VerticalAlignment Customize
="Bottom"settings
/>
Join Stack Overflow to learn, share knowledge,
</StackPanel > and build your career. Sign up
</DataTemplate>

https://stackoverflow.com/questions/35786002/how-to-make-wpf-listview-display-images-and-labels-dynamically/35786257 1/5
25/04/2021 xaml - How to make WPF listview display Images and Labels dynamically - Stack Overflow
</ListView.ItemTemplate>
</ListView>
</Grid>

My movies are added with this C# code:

foreach (string tvf in ContentFiles)

{
string ContentTitle = System.IO.Path.GetFileNameWithoutExtension(tvf);
MovieData cnt = new MovieData();
cnt.ImageData = LoadImage(ActualImage);
cnt.Title = ContentTitle;
ContentDataList.Add(cnt);

}
TvBox.ItemsSource = ContentDataList;

Edit: I have changed my XAML Markup as @MarkFeldman suggested, but now nothing
appears. Edit: It currently looks like this:

wpf xaml listview

Your Share
privacy
Improve this question edited Mar 8 '16 at 2:51 asked Mar 4 '16 at 0:46
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on yourLuke
device and disclose
Dinkler
Follow
information in accordance with our Cookie Policy. 581 2 14 31

Accept all cookies Customize settings

Join Stack
1 canOverflow
you post to learn,
your share code
full source knowledge,
for this? and
I ambuild your
wanting to career.
do something similar and thisSign up be a
would
great building block for me! – StealthRT Oct 26 '16 at 18:10
https://stackoverflow.com/questions/35786002/how-to-make-wpf-listview-display-images-and-labels-dynamically/35786257 2/5
25/04/2021 xaml - How to make WPF listview display Images and Labels dynamically - Stack Overflow

2 Answers Active Oldest Votes

You're going to provide more info about the data itself i.e. what's it's format, how are you
assigning it to the ItemsSource etc. For one thing you're not setting the ItemTemplate, so you
17 might want to look at that first. For example if you have a class containing your movie data
that looks like this:

public class MovieData

{
private string _Title;
public string Title
{
get { return this._Title; }
set { this._Title = value; }
}

private BitmapImage _ImageData;

public BitmapImage ImageData
{
get { return this._ImageData; }
set { this._ImageData = value; }
}

Then you would display it with something like this:

<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" VerticalAlignment="Stretch">
<Image Source="{Binding ImageData}" HorizontalAlignment="Center"
VerticalAlignment="Top"/>
<TextBlock Text="{Binding Title}" HorizontalAlignment="Center"
VerticalAlignment="Bottom"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>

UPDATE:

Sorry, I thought it was obvious that you still needed to use a UniformGrid. Here is what your
full XAML should look like:

<ListView x:Name="TvBox" HorizontalAlignment="Stretch" VerticalAlignment="Top">

<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="5" HorizontalAlignment="Stretch"/>
</ItemsPanelTemplate>
Your privacy
</ItemsControl.ItemsPanel>
By clicking “Accept all cookies”, you agree
<ListView.ItemTemplate > Stack Exchange can store cookies on your device and disclose
information in accordance with >our Cookie Policy.
<DataTemplate
<StackPanel Orientation="Vertical" VerticalAlignment="Stretch"
HorizontalAlignment="Stretch">
Accept all cookies Customize settings
<Image Source ="{Binding ImageData}" HorizontalAlignment="Stretch"
VerticalAlignment = "Top" Stretch
Join Stack Overflow to learn, share knowledge,="UniformToFill"
and build/>
your career. Sign up
<TextBlock Text="{Binding Title}" HorizontalAlignment="Stretch"

https://stackoverflow.com/questions/35786002/how-to-make-wpf-listview-display-images-and-labels-dynamically/35786257 3/5
25/04/2021 xaml - How to make WPF listview display Images and Labels dynamically - Stack Overflow
VerticalAlignment="Bottom" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

I've already provided you with the MovieData class, so here's what your Window code should
look like:

public partial class Window1 : Window

{
public Window1()
{
InitializeComponent();

this.TvBox.ItemsSource = new MovieData[]

{
new MovieData{Title="Movie 1", ImageData=LoadImage("image.jpg")},
new MovieData{Title="Movie 2", ImageData=LoadImage("image.jpg")},
new MovieData{Title="Movie 3", ImageData=LoadImage("image.jpg")},
new MovieData{Title="Movie 4", ImageData=LoadImage("image.jpg")},
new MovieData{Title="Movie 5", ImageData=LoadImage("image.jpg")},
new MovieData{Title="Movie 6", ImageData=LoadImage("image.jpg")}
};
}

// for this code image needs to be a project resource

private BitmapImage LoadImage(string filename)
{
return new BitmapImage(new Uri("pack://application:,,,/" + filename));
}
}

In this example I'm assuming there is an image in your project called "image.jpg" which has
been set to build action "Resource", if your images come from elsewhere then you'll need to
modify the LoadImage code accordingly.

Share Improve this answer edited Mar 7 '16 at 22:01 answered Mar 4 '16 at 1:15
Follow Mark Feldman
13.8k 1 24 47

This looks good, but how do I set the individual movies from c# code via the MovieData class? –
Luke Dinkler Mar 4 '16 at 13:36

I created a MovieData object for each movie I add (assigning the class variables) using a foreach
iteration but nothing happens. – Luke Dinkler Mar 5 '16 at 16:10

I haven't seen your code, so no. It could be anything. If you add your code to the question I'll be happy
to have a look at it again. – Mark Feldman Mar 7 '16 at 21:31

1 You can declare those in XAML, you don't need to specifically set everything up in code-behind. In fact
with WPF you should be relying on data-binding as much as possible, even if you're not doing full-
blown MVVM. Just add MouseDown="Image_MouseDown" to your Image in the XAML and add the
Your privacy
Image_MouseDown handler in your main window. The handler's sender parameter will point to the
By clicking “Accept
Image all cookies”,
control you agree Stack
and its DataContext will beExchange
set to the can store cookies
associated on your
MovieData device
object. andFeldman
– Mark discloseMar
information in accordance
7 '16 at 23:41 with our Cookie Policy.

1 No problem....it's because you've used a ListView , which ultimately inherits ItemsControl but adds
Accept all cookiesfunctionality
additional Customize settings and item selection etc. If you don't want those features then change
like scrolling
Overflowtoto
Join StackListView anlearn,
ItemsControl . If you stilland
share knowledge, wantbuild
scrolling
yourthen you'll also have to wrap itSign
career. in a up
<ScrollViewer> . – Mark Feldman Mar 8 '16 at 4:06

https://stackoverflow.com/questions/35786002/how-to-make-wpf-listview-display-images-and-labels-dynamically/35786257 4/5
25/04/2021 xaml - How to make WPF listview display Images and Labels dynamically - Stack Overflow

I have done something very similar with UniformGrid I see you did not set the Rows of your
UniformGrid. I did this In my Game App. Good approach but difficult to get right. Set an
1 ItemTemplate. And try an ItemsControl Outer Object instead of listview

<ItemsControl IsEnabled="{Binding GameBoardEnabled}"

x:Name="_board"
ItemsSource ="{Binding Board}"
ItemTemplate= "{DynamicResource GamePieceTemplate}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<!--<StackPanel/>-->
<UniformGrid
Columns="{Binding Columns}"
Rows ="{Binding Rows}" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>

Share Improve this answer edited Mar 4 '16 at 1:50 answered Mar 4 '16 at 1:22
Follow Mark Wardell
363 2 16

Unless the SO wants item selection and keyboard navigation etc in which case ListView is probably
correct . – Mark Feldman Mar 4 '16 at 2:04

UniformGrids always have to Have Rows+Columns I am pretty sure. So that is probably most of the
answer. – Mark Wardell Mar 4 '16 at 2:08

If you mean that the items have to specify the row and column number then no, that's only Grids.
UniformGrids just take a regular collection and do the row/collumn layout automatically. And if it's in a
ListView then keyboard arrow buttons will be interpreted corrected as well for changing the currently
selected item. – Mark Feldman Mar 4 '16 at 2:19

You are Right Mark. No need for both the Rows/Cols. But there is Rows/Cols On a grid - but that is a
side issue. – Mark Wardell Mar 4 '16 at 2:51

1 @Luke yes! Rows is a ViewModel Variable describing the Row Count in a UniformGrid. Similarly
Columns performs the same task for Columns. I learned while answering your Question, and fm Mark
Feldman's input, that you need only set one or the other. In your Case I say you need to decide in your
Vm how many Columns you want. Also the GamePiece Template draws a Rectangle and Fills it with an
Image: for a full example that uses this technique: codeproject.com/Articles/991634/… – Mark Wardell
Mar 4 '16 at 21:45

Your privacy
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose
information in accordance with our Cookie Policy.

Accept all cookies Customize settings

Join Stack Overflow to learn, share knowledge, and build your career. Sign up

https://stackoverflow.com/questions/35786002/how-to-make-wpf-listview-display-images-and-labels-dynamically/35786257 5/5