在列表框中显示存根图像,直到图像完全加载

本文关键字:图像 加载 显示 存根 列表 | 更新日期: 2023-09-27 18:16:04

我有一个从url加载图像的列表框,但为了更好的开发,我想显示一个存根图像,直到图像完全加载,但我不知道该怎么做。
有人能帮我吗?请


我的代码如下:
XAML

<phone:PhoneApplicationPage
    x:Class="AnimeWallpapersHD.lista"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d"
    shell:SystemTray.IsVisible="True">
    <!--LayoutRoot è la griglia radice in cui viene inserito tutto il contenuto della pagina-->
    <Grid x:Name="LayoutRoot" Background="#FF0A5BC4">
        <ListBox Margin="0,0,-12,0" ItemsSource="{Binding Items}" Name="listBox_anime" SelectionChanged="listBox_anime_SelectionChanged">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Margin="0,0,0,17">
                        <Image  Height="100" Width="100" Margin="12,0,9,0" Source="{Binding Url_immagine}" ImageFailed="Image_ImageFailed" />
                             <!--<Image.Source>
                                <BitmapImage UriSource="{Binding Url_immagine}" DownloadProgress="BitmapImage_DownloadProgress" CreateOptions="BackgroundCreation"/>
                            </Image.Source>
                        </Image>-->
                            <TextBlock Text="{Binding Nome}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="30"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</phone:PhoneApplicationPage>



using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using System.Windows.Media.Imaging;
using System.Windows.Media;
namespace AnimeWallpapersHD
{
    public partial class lista : PhoneApplicationPage
    {
        public lista()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(lista_loaded);
        }
        private void lista_loaded(object sender, RoutedEventArgs e)
        {
            List<lista_anime> lista_anime = new List<lista_anime>();
            lista_anime.Add(
                new lista_anime("Accel World", new Uri("http://i.imgur.com/RBGzfAT.jpg", UriKind.RelativeOrAbsolute)));
            lista_anime.Add(
                new lista_anime("Air Gear", new Uri("http://i.imgur.com/fDBv3aU.jpg", UriKind.RelativeOrAbsolute)));
            lista_anime.Add(
                new lista_anime("Angel Beats", new Uri("http://i.imgur.com/Bbr9qCh.jpg", UriKind.RelativeOrAbsolute)));
            lista_anime.Add(
                new lista_anime("Ano Hana", new Uri("http://i.imgur.com/9jePWA7.jpg", UriKind.RelativeOrAbsolute)));
            lista_anime.Add(
                new lista_anime("Another", new Uri("http://i.imgur.com/rST128p.jpg", UriKind.RelativeOrAbsolute)));
              listBox_anime.ItemsSource = lista_anime;
        }
        private void listBox_anime_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (listBox_anime.SelectedItem == null)
                return;
            NavigationService.Navigate(new Uri("/griglia.xaml?id=" + listBox_anime.SelectedIndex, UriKind.Relative));
            listBox_anime.SelectedItem = null;
        }
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);
            listBox_anime.SelectedIndex = -1;

        }
        protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgs e)
        {
            String uscita = "Uscita";
            String uscitaTXT = "Sei sicuro di uscire?";
            MessageBoxResult box = MessageBox.Show(uscitaTXT, uscita, MessageBoxButton.OKCancel);
            if (box == MessageBoxResult.Cancel)
                e.Cancel = true;
            else
            {
                if (NavigationService.CanGoBack)
                {
                    while (NavigationService.RemoveBackEntry() != null)
                    {
                        NavigationService.RemoveBackEntry();
                    }
                }
            }
            base.OnBackKeyPress(e);
        }
        private void Image_ImageFailed(object sender, ExceptionRoutedEventArgs e)
        {
            Image bitmap = (Image)sender;
            String imgpath = "/Immagini/failed.png";
            Uri uri = new Uri(imgpath, UriKind.RelativeOrAbsolute);
            BitmapImage bmp = new BitmapImage(uri);
            bitmap.Source = bmp;
        }
    }
}



lista动漫CLASS

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Imaging;
using System.Windows.Resources;
namespace AnimeWallpapersHD
{
    public class lista_anime
    {
        public String Nome { get; set; }
        public Uri Url_immagine { get; set; }
        public lista_anime(String nome, Uri url_immagine)
        {
            this.Nome = nome;
            this.Url_immagine = url_immagine;
        }
    }
}

在列表框中显示存根图像,直到图像完全加载

最简单的模式是将图像放在网格或画布中,并在其后面放置第二张图像(默认图像)。当你的图片加载时,它会覆盖并隐藏默认的"loading"。

还有其他的选择,涉及到你的模型持有一个BitmapImage和一个从URL加载"真实"图像的方法,但有一点涉及到类似的性能在一个小的图像集