在列表中加载图像时如何处理进度条

本文关键字:处理 何处理 列表 加载 图像 | 更新日期: 2023-09-27 18:08:28

我正在创建一个windows phone应用程序,在那里我显示movie list in a ListBox。并且列表项模板中的Image control绑定到Movie image url address,以便电影图像显示在tile中。

但是有一些时间延迟加载和显示图像在每个瓷砖,因为它来自使用互联网的图像url。所以我决定显示一个进度条,直到图像加载。

查看我的类结构和xaml

Public class Movie
{
  Public string MovieName{get;set;}
  Public string MovieImageUrl{get;set;}
} 
private List<Movie> _movieList;
Public  List<Movie> MovieList
{
  get{return _movieList;}
  set 
     {
      _movieList=value;
      RaiseProperty("MovieList");
     }
}

xaml:

 <ListBox ItemSource={Binding MovieList}>
    <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid Height="200" Width="150">
                  <ProgressBar IsIndeterminate="True"></ProgressBar>
                  <Image Source="{Binding MovieImageUrl}"/>
                  <TextBlock Text="{Binding MovieName}"></TextBlock>
                </Grid>
            </DataTemplate>
   </ListBox.ItemTemplate>
</ListBox>

在这个实现中,加载图像后进度条将不可见,但它将继续在图像下运行。我想在每个贴图加载图像后停止进度条运行。

我知道如何处理这个,如果只有一个图像通过停止在Image Loaded事件的进度条。但是这次我不敢肯定。

有人能帮我做这件事吗?

在列表中加载图像时如何处理进度条

Handel加载事件的图像,并尝试这个

Xaml

 <ListBox ItemSource={Binding MovieList}>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid Height="200" Width="150">
              <ProgressBar IsIndeterminate="True"></ProgressBar>
              <Image Source="{Binding MovieImageUrl}" Loaded="Image_Loaded"/>
              <TextBlock Text="{Binding MovieName}"></TextBlock>
            </Grid>
        </DataTemplate>
   </ListBox.ItemTemplate>
</ListBox>

Xaml.cs

  private void Image_Loaded(object sender, RoutedEventArgs e)
    {
        Image img = sender as Image;
        ((ProgressBar)((Grid)img.Parent).Children[0]).IsIndeterminate = false;
    }

上面的image loaded事件将为列表中的每个图像触发(在图像加载之后),并且在代码中,我在列表项中获取进度条的引用并将其IsIndeterminage属性设置为false以停止进度条动画。