如何更新图片 <image> 在Windows Phone 8.1的ListView中

Question

this is my list view

<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>

i have bind it with

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

I have a list containing title,date,img_link inside items Now I am trying to update the image in my list view. I am trying this code

  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;

        }
    }

but not getting image displayed on my UI.

Answer 1

First of all your ArrowItem class needs to implement the INotifyPropertyChanged Interface so that when the image is updated the UI will be notified so change it to this :

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

Secondly to correctly bind your ListView to the List, create an ObservableCollection that will hold all the listView 's items (use ObservableCollection instead of List so that when an item is added of removed from the Collection the UI will be notified):

 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 update you GetImages to the following :

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

and call it from, lets say the loaded even of the MainPage :

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

Finally set the DataContext and add the loaded event handler in the Xaml

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>

You should now see the image :