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

Question

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

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

令人惊讶的是，我在博客圈中没有找到此问题的解决方案，因此我编写了一个派生类来解决此问题。

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

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

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

Answer 1

如果不是InitialImage="/MyProject;component/Images/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));

更新：

您必须绑定到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 事件。

希望这有帮助。