WPF- Bind list to listview

Question

I'm creating a wpf application and capturing images from my usb webcam. What I have tried is store all captured images in a List and show them in a Listview

public List<BitmapImage> listOfCapturedImages = new List<BitmapImage>();

private void addNewImageButton_Click(object sender, RoutedEventArgs e)
        {
            CameraWindow cw = new CameraWindow(this);
            cw.newlyCapturedImage += (BitmapImage newImage) =>
            {
                listOfCapturedImages.Add(newImage);
                newlyAddedImage.Source = newImage;
            };
            cw.Show();
        }

XAML:

<ListView ItemsSource="{Binding listOfCapturedImages}" Height="345" Margin="577,10,10,0" VerticalAlignment="Top">            
            <ListView.View>
                <GridView>
                    <GridView.ColumnHeaderContainerStyle>
                        <Style TargetType="GridViewColumnHeader">
                            <Setter Property="Visibility" Value="Collapsed"/>
                        </Style>
                    </GridView.ColumnHeaderContainerStyle>
                    <GridViewColumn x:Name="previewImagesColumn">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Vertical">
                                <Button x:Name="firstImageOflistViewButton" Content="{Binding listOfCapturedImages}" Height="50">
                                    <Button.Template>
                                        <ControlTemplate TargetType="Button">
                                            <ContentPresenter/>
                                        </ControlTemplate>
                                    </Button.Template>
                                </Button>
                                </StackPanel>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                </GridView>
            </ListView.View>

Could someone help me please, what I'm missing?

score 5 · Answer 1 · answered Apr 25 '17 at 08:41

Thanks a lot guys, I have fixed my problem with your helps. I want to share my working code just for someone else who may have the same problem with me. Here is the working code:

public ObservableCollection<BitmapImage> listOfCapturedImages { get; } = 
   new ObservableCollection<BitmapImage>();

private void addNewImageButton_Click(object sender, RoutedEventArgs e)
        {
            CameraWindow cw = new CameraWindow(this);
            cw.newlyCapturedImage += (BitmapImage newImage) =>
            {
                listOfCapturedImages.Add(newImage);
                newlyAddedImage.Source = newImage;
            };
            cw.Show();
        }

I also have added this.DataContext = this;.

public Test(Window window)
        {
            InitializeComponent();
            this.DataContext = this;          
        }

And finally XAML:

<ListView ItemsSource="{Binding listOfCapturedImages}" Height="345" Margin="577,10,10,0" VerticalAlignment="Top">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Columns="1"/>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <ListView.ItemTemplate>
            <DataTemplate>
                <Image Source="{Binding}"/>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

score 3 · Answer 2 · edited Apr 25 '17 at 08:34

You are binding to field not a property.

Change:

public List<BitmapImage> listOfCapturedImages = new List<BitmapImage>();

to

public ObservableCollection<BitmapImage> ListOfCapturedImages {get;} = new ObservableCollection<BitmapImage>();

ObservableCollection is the collection that will notify of changing its contents and the binding will update after you add items to it. List will not do that.

Also include some Image displaying item:

<ListView ItemsSource="{Binding ListOfCapturedImages}" >
    <ListView.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding}"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Good answer bar your point about image control lacks any context — MikeT, Apr 25 '17 at 08:36

Nikhil Agrawal · Answer 3 · 2017-04-25T11:58:36.967

3

Couple of problems

Use ObservableCollection instead of List. List do not notify View to update itself when an item is added to it. ObservableCollection does that.
listOfCapturedImages is a Field. Even if you set is to public, it cannot be used to bind in WPF. Because Field are invisible to XAML, whereas Properties are visible. So do this
```
public ObservableCollection<BitmapImage> listOfCapturedImages { get; } = 
   new ObservableCollection<BitmapImage>();
```

edited Apr 25 '17 at 11:58

answered Apr 25 '17 at 08:11

Nikhil Agrawal

47,018
22
121
208

How about the Xaml? Sould I make changes there as well? – Apr 25 '17 at 08:17
1

Tadej has covered the Xaml issues, this covers the Code behind issues together they cover everything – MikeT Apr 25 '17 at 08:21

score 1 · Answer 4 · answered Apr 25 '17 at 08:10

1

You should have Image control in your DataTemplate. This is what i am using:

<ListView ItemsSource="{Binding listOfCapturedImages}" >
     <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="1"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListView.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding}"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

answered Apr 25 '17 at 08:10

tadej

701
1
5
22

You've misses the issues with the binding but hit the XAML issue on the head – MikeT Apr 25 '17 at 08:25

WPF- Bind list to listview

4 Answers4

Linked