如何在 Windows Phone 8.1 的列表视图中更新 <image> 的图像

Question

这是我的列表视图

<ListView x:Name="Diary" Margin="0,0,0,0" >
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <StackPanel x:Name="diaryTemplate" Margin="18,10,18,0" Background="White">
                            <Image Name="arrowImage" Source="{Binding img, Mode=OneWay}"   ></Image>
                            <TextBlock x:Name="DiscriptionOfImage" Height="40" Foreground="#FF070719" Text="{Binding title}" FontSize="26.667" FontWeight="Bold" Margin="15,0"/>
                            <TextBlock x:Name="DateAndTime" Text="{Binding date}" HorizontalAlignment="Left" Height="60" Foreground="#FF919192" Margin="10,25,0,0" FontSize="30" VerticalAlignment="Top"></TextBlock>
                            <Button x:Name="readMoreButton" Background="#FF121213" Content="Read More" Margin="0,0,0,0" Height="60" Click="read_Click"></Button>
                        </StackPanel>

                    </DataTemplate>
                </ListView.ItemTemplate>

            </ListView>

我已经绑定了

 List<ArrowItem> items = new List<ArrowItem>();
 Diary.ItemsSource = items;
 public class ArrowItem
 {
    public string title { get; set; }
    public String date { get; set; }
    public String img_link { get; set; }
    public ImageSource img { get; set; }             
 }

我有一个包含标题、日期、img_link 的列表现在我正在尝试更新列表视图中的图像。我正在尝试这段代码

  private async void getImage()
    {
        int a = items.Count();
        for (int i = 0; i< a; i++)
       { 
            var httpClient = new HttpClient();
            Stream st = await httpClient.GetStreamAsync(items[2].img_link);
            var memoryStream = new MemoryStream();
            await st.CopyToAsync(memoryStream);
            memoryStream.Position = 0;
            BitmapImage bitmap = new BitmapImage();
            bitmap.SetSource(memoryStream.AsRandomAccessStream());
           // items[i].img = bitmap;

        }
    }

但我的 UI 上没有显示图像。

Answer 1

首先您的所有ArrowItem 类需要实现INotifyPropertyChanged 接口，以便在更新图像时通知UI，因此将其更改为：

public class ArrowItem:INotifyPropertyChanged
{
    private string _title;
    private string _date;
    private string _imgLink;
    private ImageSource _img;

    public string Title
    {
        get { return _title; }
        set
        {
            if (value == _title) return;
            _title = value;
            OnPropertyChanged();
        }
    }

    public String Date
    {
        get { return _date; }
        set
        {
            if (value == _date) return;
            _date = value;
            OnPropertyChanged();
        }
    }

    public String ImgLink
    {
        get { return _imgLink; }
        set
        {
            if (value == _imgLink) return;
            _imgLink = value;
            OnPropertyChanged();
        }
    }

    public ImageSource Img
    {
        get { return _img; }
        set
        {
            if (Equals(value, _img)) return;
            _img = value;
            OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

其次要将您的ListView 正确绑定到列表，创建一个ObservableCollection 来保存listView 的所有项目（使用ObservableCollection 而不是List 以便当从集合中添加或删除项目时，将通知 UI）：

 private ObservableCollection<ArrowItem> _items  =new ObservableCollection<ArrowItem>()
    {
        new ArrowItem()
        {
            Date = "date",
            ImgLink="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSwJFp_3SZyTiHkkJpQYHsjJc99M_fJByivuuhqIdzMTo4lBgpH",
            Title = "Fruits"
        }
    };

    public ObservableCollection<ArrowItem> Itmes
    {
        get
        {
            return _items;
        }

        set
        {
            if (_items.Equals(value))
            {
                return;
            }

            _items = value;               
        }
    }

Third 将GetImages 更新为以下内容：

private async Task GetImages()
    {            
        foreach (var item in Itmes)           
        {
            var httpClient = new HttpClient();
            Stream st = await httpClient.GetStreamAsync(item.ImgLink);
            var memoryStream = new MemoryStream();
            await st.CopyToAsync(memoryStream);
            memoryStream.Position = 0;
            BitmapImage bitmap = new BitmapImage();
            bitmap.SetSource(memoryStream.AsRandomAccessStream());
            item.Img = bitmap;                
        }
    }

然后调用它，比如说 MainPage 的加载：

 private async void MainPage_OnLoaded(object sender, RoutedEventArgs e)
    {
        await GetImages();
    }

最后设置DataContext并在Xaml中添加loaded事件处理程序

DataContext="{Binding RelativeSource={RelativeSource Self}}" Loaded="MainPage_OnLoaded">

<Grid>
    <ListView x:Name="Diary" Margin="0,0,0,0" ItemsSource="{Binding Itmes}">
        <ListView.ItemTemplate>
            <DataTemplate>
                 <StackPanel x:Name="diaryTemplate" Margin="18,10,18,0" Background="White">
                    <Image Name="arrowImage" Height="100"  Source="{Binding Img, Mode=OneWay}"></Image>
                    <TextBlock x:Name="DiscriptionOfImage" Height="40" Foreground="#FF070719" Text="{Binding Title}" FontSize="26.667" FontWeight="Bold" Margin="15,0"/>
                    <TextBlock x:Name="DateAndTime" Text="{Binding Date}" HorizontalAlignment="Left" Height="60" Foreground="#FF919192" Margin="10,25,0,0" FontSize="30" VerticalAlignment="Top"></TextBlock>
                    <Button x:Name="readMoreButton" Background="#FF121213" Content="Read More" Margin="0,0,0,0" Height="60" Click="read_Click"></Button>
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>

    </ListView>
</Grid>

你现在应该看到图像了：