CODEWITHSUNDEEP
c#wpfimagelistview
Chief Wiggum
Chief Wiggum

Reputation: 121

Dynamically populate ListView with text and Images WPF/C#

I am getting really frustrated with listview controls in .NET 4.0. I want to add text into the first column in a row and then add an image to the second column, and then text to the 3rd (all in the top row), and then do the same for the next row. However my code just adds text to all three columns in the top row, then an image to the next row, and then text to the next. I can't work out how to specify a row/column index (eg[1,2] for second row third column).

I know this appears a quite basic query and there is a lot of info out there but I am new to .NET and the the more I read about it the more confused I get :-(

My c# code is:

  ListViewItem lstItem1 = new ListViewItem();
      lstItem.Content = "Picture 1";
      lstView.Items.Add(lstItem);
      Image lstImage = new Image();
      ListViewItem lstItem2 = new ListViewItem();
      lstItem2.Source = SrcBmp;
      lstItemImage.Content = lstImage;
      lstView.Items.Add(lstItem2);
  ListViewItem lstItem3 = new ListViewItem();
      lstItem3.Content = "Blah blah";
      lstView.Items.Add(lstItem3);

XAML here:

<ListView Height="412" HorizontalAlignment="Left" Margin="312,49,0,0" Name="lstView"     VerticalAlignment="Top" Width="636" ItemsSource="{Binding}" FontSize="12"> 
                              <ListView.View>
                    <GridView>
                            <GridViewColumn Header="Photo No." Width="50"/>
                            <GridViewColumn Header="Photo" Width="150"/>
                        <GridViewColumn Header="Description" Width="300"/>
                    </GridView>
                    </ListView.View>
               </ListView>

Many thanks in advance.

Chief Wiggum

Upvotes: 1

Views: 9400

Answers (2)

paparazzo
paparazzo

Reputation: 45096

You added 3 rows and got 3 rows. Should not be a surprise.

ListViewItem only has a single content.

You need to have a class or a strut with those two properties.
Then add those objects to a collection like a List and bind the ListView to the collection.
Then in GridViewColumn the binding path is to the name of the property. 

public class Album 
{
    public string Title { get; set; }
    public Image Img  { get; set; }
}

Upvotes: 0

Ravindra Bagale
Ravindra Bagale

Reputation: 17655

you have to create a StackPanel for your Content property and add the Image and text to that StackPanel. e.g.

<Window.Resources>
    <DataTemplate x:Key="ItemTemplate">
        <StackPanel Orientation="Horizontal">
            <Image Width="10" Height="10" Stretch="Fill" Source="{Binding Cover}"/>
        <Label Content="{Binding Title}" />
        </StackPanel>
    </DataTemplate>
</Window.Resources>


<Grid x:Name="grid">
    <ListView ItemTemplate="{StaticResource ItemTemplate}" ItemsSource="{Binding Albums}" />
</Grid>

Upvotes: 1

Related Questions