在列表中加载图像时如何处理进度条
本文关键字:处理 何处理 列表 加载 图像 | 更新日期: 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以停止进度条动画。