将两个不同类型的列表链接到一个 ListView

Question

我正在尝试让 ListView 同时显示图像和所选图像的名称。到目前为止，我已经成功地将 List<BitmapImage> 绑定到显示 Image 元素以及 ItemTemplate 内的 Textblock 元素的 ListView.ItemsSource，我也成功了将每个 Image 的名称添加到单独的 List<string>。现在这就是我遇到的问题，如何将 List<BitmapImage> 和 List<string> 绑定到单个 ListView，从而绑定到每个列表项的相关字段。

代码片段如下：

XAML 列表视图：

<ListView x:Name="listView_ViewPhotos" Visibility="Collapsed">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid Margin="0,5,0,5">
                <Grid.ColumnDefinitions>
                    <!--Image Column-->
                    <ColumnDefinition Width="150"/>
                    <!--Name Column-->
                    <ColumnDefinition MinWidth="{Binding ActualWidth, ElementName=pageRoot, Mode=OneWay}"/>
                </Grid.ColumnDefinitions>
                <Image Source="{Binding ImageList}" Height="100" Width="150" Stretch="UniformToFill" Grid.Column="0"/>
                <TextBlock x:Name="txt_Listimg_Caption" Foreground="{ThemeResource ButtonForegroundThemeBrush}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="WrapWholeWords" Height="40" Margin="15,0,15,0" FontSize="25" Text="{Binding ImageName}" Grid.Column="1" />
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

C#

public  List<string> ImageName = new List<string>();
private async void appBar_GetFiles_Click(object sender, RoutedEventArgs e)
{
    FileOpenPicker filePicker = new FileOpenPicker();
    filePicker.ViewMode = PickerViewMode.List;
    filePicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
    filePicker.FileTypeFilter.Add(".bmp");
    filePicker.FileTypeFilter.Add(".png");
    filePicker.FileTypeFilter.Add(".gif");
    filePicker.FileTypeFilter.Add(".jpg");
    filePicker.FileTypeFilter.Add(".jpeg");

    IReadOnlyList<StorageFile> filelist = await filePicker.PickMultipleFilesAsync();
    foreach (var file in filelist)
    {
        if (file != null)
        {
            string FileName = file.Name;
            //var imageData = await activeFolder.GetFileAsync(FileName);
            //var imageData = await KnownFolders.PicturesLibrary.GetFileAsync(FileName);
            BitmapImage bitmapImage;
            using (var stream = await file.OpenAsync(FileAccessMode.Read))
            {
                bitmapImage = new BitmapImage();
                bitmapImage.SetSource(stream);
            }
            ImageName.Add(FileName);
            ImageList.Add(bitmapImage);
        }
        else break;
    }
    listView_ViewPhotos.ItemsSource = null;
    listView_ViewPhotos.ItemsSource = ???;

    gridView_ViewPhotos.ItemsSource = null;
    gridView_ViewPhotos.ItemsSource = ???;

Answer 1

不用 2 个列表，只需使用 1:

1、新建一个class，暂且称它为ImageDetails。这个class包含2个属性，1是图片本身，1是图片的名字

public class ImageDetails
{
    public BitmapImage Image{get;set:}
    public string ImageName{get;set;}
}

所以现在，您无需加载 2 个列表，只需调用 List<ImageDetails>

添加示例：

List<ImageDetails> list = new List<ImageDetails>();
ImageDetails _imgDetails = new ImageDetails();
_imgDetails.Image = bitmapImage;
_imgDetails.ImageName = FileName;
list.Add(_imgDetails);

GetAll 示例：

foreach(var img in list)
{
    var image = img.Image; //this is your BitmapImage
    var name = img.ImageName; //this is your image Name
    //other work
}

将两个不同类型的列表链接到一个 ListView

Linking two Lists of different types to a ListView

c#

listview

uwp

uwp-xaml