Add image to ListView C# WPF (without xaml)

Question

How can I make an image item in ListView? I need to do it without xaml, only C#. I was surfing about 40 min about it and have nothin found. I've tried a lot of things and i stopped here in first column i see just "System.Windows.Controls.StackPanel".

 public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        GridView grView = new GridView();
        GridViewColumn gwCol1 = new GridViewColumn();
        GridViewColumn gwCol2 = new GridViewColumn();
        gwCol1.Header = "Avatar";
        gwCol2.Header = "Name";
        gwCol2.DisplayMemberBinding = new Binding("name");
        gwCol1.DisplayMemberBinding = new Binding("stack");
        grView.Columns.Add(gwCol1);
        grView.Columns.Add(gwCol2);
        listView1.View = grView;
        //
        var list = new List<XData>();
        listView1.ItemsSource = list;
        // 
        BitmapImage image1 = new BitmapImage(new Uri(@"C:\Users\montana\OneDrive\Pictures\Saved Pictures\WVQfZqY.jpg"));
        Image img = new Image();
        img.Width = 100;
        img.Height = 100;
        img.Source = image1;
        StackPanel stackPanel1 = new StackPanel();
        stackPanel1.Orientation = Orientation.Horizontal;
        stackPanel1.Children.Add(img);
        list.Add(new XData() { name="hola", stack=stackPanel1 });

    }
}


class XData
{
    public string name { get; set; }
   // public string url { get; set; }
    public StackPanel stack { get; set; }
}

"without xaml" is contradictory as you have some listView1 here which is simply lacking datatemplate (itemtemplate?). Without it you have to create ListBoxItem explicitly (passing bitmap as its Content) instead of passing some List<> as ItemsSource.. — Sinatr
– Sinatr, Commented Mar 6, 2017 at 12:27
Besides that, you should either use an ObservableCollection instead of a List, or add items before you assign the List to the ItemsSource property. — Clemens
– Clemens, Commented Mar 6, 2017 at 12:32
And why do you create the GridView and its columns in code behind when the ListView itself is declared in XAML? — Clemens
– Clemens, Commented Mar 6, 2017 at 12:36

Community · Accepted Answer · 2017-05-23 12:10:15Z

2

Here is something what produce wanted result.

Change XData definition to avoid having view elements there (you didn't mention MVVM, but it's good to stick to):

class XData
{
    public string Name { get; set; }
    public string Path { get; set; }
}

Now you can either define data template in xaml (common solution) or generate it in code behind like this:

var factory = new FrameworkElementFactory(typeof(Image));
factory.SetValue(Image.SourceProperty, new Binding(nameof(XData.Path)));
factory.SetValue(Image.WidthProperty, 100.0);
factory.SetValue(Image.HeightProperty, 100.0);
var dataTemplate = new DataTemplate { VisualTree = factory };

Data template can be as complicated as you like, but obviously defining it in xaml and then loading with FindResource() is way easier, consider to use this option instead.

And then this datatemplate has to be specified as CellTemplate like this:

GridView grView = new GridView();
grView.Columns.Add(new GridViewColumn { Header = "Avatar", CellTemplate = dataTemplate });
grView.Columns.Add(new GridViewColumn { Header = "Name", DisplayMemberBinding = new Binding(nameof(XData.Name)) });
listView1.View = grView;

Note: you shouldn't use DisplayMemberBinding for column with CellTemplate.

Now, finally, you can fill ListView by setting its ItemSource as usual:

var list = new List<XData>();
list.Add(new XData { Name = "hola", Path = @"c:\temp\1.jpg" });
list.Add(new XData { Name = "hola2", Path = @"c:\temp\2.png" });
listView1.ItemsSource = list;

edited May 23, 2017 at 12:10

CommunityBot

11 silver badge

answered Mar 6, 2017 at 12:57

Sinatr

22.3k18 gold badges108 silver badges349 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

AndrewMontana Over a year ago

Thanks. But, how can I replace nameof? im using visual studio 2012

Sinatr Over a year ago

Instead of nameof(somemember) use "somemember" (in your case it's "Name" and "Path" appropriately).

AndrewMontana Over a year ago

Working) Thanks again!

Collectives™ on Stack Overflow

Add image to ListView C# WPF (without xaml)

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related