WPF - 将列表绑定到ListView

Question

我正在创建一个WPF应用程序，并从我的USB摄像头捕获图像。我尝试的方法是将所有捕获的图像存储在List中，并在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>

请问有人可以帮我吗，我错过了什么？

- user7899755

Answer 1

非常感谢大家的帮助，我已经通过你们的帮助解决了我的问题。我想分享我的工作代码，以便其他可能遇到相同问题的人。这是可行的代码：

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();
        }

我还添加了this.DataContext = this;。

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

最后是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>

- user7899755

Answer 2

您绑定的是字段而不是属性。

请更改为:

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

to

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

ObservableCollection 是一种集合，当您添加项目时，它将通知其内容已更改，并且绑定将在此后更新。而 List 则不会这样做。

还包括一些显示图像的项：Image

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

- Rafal

---

你的回答很好，但是关于图像控制的观点缺乏任何上下文。 - MikeT

Answer 3

一些问题。

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

- Nikhil Agrawal

---

Xaml怎么样？我也需要在那里做出改变吗？ - user7899755

Tadej 已经解决了 Xaml 的问题，这个（部分）解决了后台代码的问题，它们一起涵盖了所有的事情。 - MikeT

Answer 4

您的DataTemplate应该包含Image控件。这是我正在使用的：

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

- tadej

---

你忽略了绑定的问题，但是准确地指出了 XAML 的问题。 - MikeT