Question

我正在创建一个Windows Phone应用程序，我在其中显示movie list in a ListBox。列表项模板中的Image control绑定到电影image url address，以便电影图像显示在图块中。

但是，因为它来自使用互联网的图像网址，所以在每个图块中加载和显示图像会有一些时滞。所以我决定显示一个进度条，直到图像加载。

查看我的课程结构和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事件中的进度条只有一个图像，我知道如何处理此问题。但是这种情况我对此非常不确定。

有人可以帮我做这件事吗？

Answer 1

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

上面的图像加载事件将被激活列表中的每个图像（加载图像后）和代码中我获取列表项中进度条的引用并将其IsIndeterminage属性设置为false以停止进度条动画。

希望这有帮助。

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

1 个答案: