为WPF图像类提供初始图像占位符

Question

当我运行项目时出现运行时错误ocure： 错误：属性'UriSource'或属性'StreamSource'必须设置。 因为this.ImageUri为null，我不知道为什么this.ImageUri为null！帮我

我一直在使用WPF ListBox使用图像作为我的列表框项目。源图像路径指向托管这些图像的服务器。在快速网络中，图像没有任何明显的延迟。然而，慢速链接显示用户体验下降，我真的想在图像下载和解码时显示占位符图像。

令人惊讶的是，我没有在这个问题的博客上找到解决方案，所以我编写了一个派生类来解决这个问题。

下面的示例XAML来自我的项目容器样式。我用本地的本地类实现替换了Image：ImageLoader。

<Window.Resources> 
<DataTemplate DataType="{x:Type local:MyData}"> 
... 
<StackPanel Grid.Column="0" Margin="5"> 
<Border BorderThickness="0"> 
<MyControl:ImageLoader Width="50" Height="50" ImageUri="{Binding Path=profile_image_url_https, FallbackValue=profile_image_url_https}" InitialImage="/MyProject;component/Images/nopic.png" HorizontalAlignment="Left"></imgz:ImageLoader> 
</Border> 
</StackPanel> 
... 
</DataTemplate> 
</Window.Resources> 

<Grid> 
<ListBox ItemsSource="{Binding Source = {StaticResource MyData}}" /> 
</Grid> 

的处理为初始图像的心脏是在onLoaded（）方法，其中，我使用的BitmapImage作为源和UriSource设置为派生类的ImageUri依赖属性，其允许数据绑定。当下载完成或接收到故障事件时，初始映像会更新为实际映像。该类还可以选择性地允许您指定“LoadFailedImage”。

public class ImageLoader : Image 
{ 
    public static readonly DependencyProperty ImageUriProperty = DependencyProperty.Register(
     "ImageUri", typeof(Uri), typeof(ImageLoader), new PropertyMetadata(null, null)); 

    private BitmapImage loadedImage; 

    public ImageLoader() 
    { 
     this.Loaded += this.OnLoaded; 
    } 

    public string LoadFailedImage 
    { 
     get; 
     set; 
    } 

    public Uri ImageUri 
    { 
     get {return this.GetValue(ImageUriProperty) as Uri;} 
     set {this.SetValue(ImageUriProperty, value);} 
    } 

    public string InitialImage 
    { 
     get; 
     set; 
    } 

    private new ImageSource Source 
    { 
     get {return base.Source;} 
     set {base.Source = value;} 
    } 

    private void OnLoaded(object sender, RoutedEventArgs e) 
    { 
     // Loading the specified image    
     this.loadedImage = new BitmapImage(); 
     this.loadedImage.BeginInit(); 
     this.loadedImage.CacheOption = BitmapCacheOption.OnDemand; 
     this.loadedImage.DownloadCompleted += this.OnDownloadCompleted; 
     this.loadedImage.DownloadFailed += this.OnDownloadFailed; 
     this.loadedImage.UriSource = this.ImageUri; 
     this.loadedImage.EndInit(); 

     // The image may be cached, in which case we will not use the initial image 
     if (!this.loadedImage.IsDownloading) 
     { 
      this.Source = this.loadedImage; 
     } 
     else 
     { 
      // Create InitialImage source if path is specified 
      if (!string.IsNullOrWhiteSpace(this.InitialImage)) 
      { 
       BitmapImage initialImage = new BitmapImage(); 

       // Load the initial bitmap from the local resource 
       initialImage.BeginInit(); 
       initialImage.UriSource = new Uri(this.InitialImage, UriKind.Relative); 
       initialImage.DecodePixelWidth = (int)this.Width; 
       initialImage.EndInit(); 

       // Set the initial image as the image source 
       this.Source = initialImage;     
      } 
     } 

     e.Handled = true; 
    } 

    private void OnDownloadFailed(object sender, ExceptionEventArgs e) 
    { 
     if (!string.IsNullOrWhiteSpace(this.LoadFailedImage)) 
     { 
      BitmapImage failedImage = new BitmapImage(); 

      // Load the initial bitmap from the local resource 
      failedImage.BeginInit(); 
      failedImage.UriSource = new Uri(this.LoadFailedImage, UriKind.Relative); 
      failedImage.DecodePixelWidth = (int)this.Width; 
      failedImage.EndInit(); 
      this.Source = failedImage; 
     } 
    } 

    private void OnDownloadCompleted(object sender, EventArgs e) 
    { 
     this.Source = this.loadedImage; 
    } 
} 

当我运行该项目运行时错误ocured： 错误：属性“UriSource”或财产“的StreamSource”必须设置。 因为this.ImageUri为null，我不知道为什么this.ImageUri为null！帮我

Answer 1

如果不是在InitialImage =分号错字 “/ MyProject的;组件/图片/ nopic.png”，
也许这是更好地设置您的InitialImage为默认的ImageUri

public static readonly DependencyProperty ImageUriProperty = DependencyProperty.Register(
    "ImageUri", typeof(Uri), typeof(ImageLoader), new PropertyMetadata(new Uri("/MyProject/component/Images/nopic.png"), null)); 

UPDATE：

你必须绑定到Image.Source，你可以使用PriorityBinding显示的占位符。

<Image.Source> 
    <PriorityBinding> 
     <!--highest priority sources are first in the list--> 
     <Binding Path="YourImageUri" 
      IsAsync="True" /> 
     <Binding Path="InitialImageUri" 
      IsAsync="True" /> 
    </PriorityBinding> 
</Image.Source> 

对于“LoadFailedImage”，将会潜水到Image.ImageFailed事件。

希望这会有所帮助。