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

Posted 2023-04-13

【中文标题】如何在 Windows Phone 8.1 的列表视图中更新 <image> 的图像

【英文标题】：how to update image of <image> in listview in windows phone 8.1

【发布时间】：2016-04-19 20:43:04

【问题描述】：

这是我的列表视图

<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 上没有显示图像。

【参考方案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>

你现在应该看到图像了：

【讨论】：

非常感谢您的支持，但在执行您的建议时 [NotifyPropertyChangedInvocator] 显示错误

删除它，这是一个resharper助手，你不需要它，我会更新我的答案

并且由于将列表更改为 observableCollection 我遇到了问题

有什么问题？

var data = await response.Content.ReadAsStringAsync(); JObject obj = JObject.Parse(data); JArray j = (JArray)obj["response"]; items = j.Select(x => new ArrowItem Title = (string)x["title"], Date = (string)x["date"], ImgLink = (string)x["img_link"], Read_more = (string)x["read_more"], ).tolist(); //问题在这里..如何在可观察集合中更改它