WPF-将列表绑定到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?

Answer 1

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>

Answer 2

Couple of problems

1. Use ObservableCollection instead of List . List do not notify View to update itself when an item is added to it. ObservableCollection does that.

2. 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>(); 

Answer 3

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>

Answer 4

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>