将 WPF 中的图像源绑定到 Url答案

【问题标题】：Bind Image Source in WPF to a Url将 WPF 中的图像源绑定到 Url
【发布时间】：2013-01-16 09:51:21
【问题描述】：

我一直在浏览不同的帖子，试图找出我的问题出了什么问题。基本上，我的用户控件上有一个 Image 标签，而我想绑定到一个 url 的 Source。但是，这不起作用。我尝试使用返回 BitmapImage(new Uri((string)value)); 的 ValueConverter 但这不起作用。我唯一能得到的是你不能绑定到一个url，你必须下载你想要绑定的图像。我不想下载我搜索的所有图像。是否有解决方法来完成此任务而无需在本地下载图像。我认为 ValueConverter 方法通过返回 BitmapImage 是最好的。请帮忙？

public class MyViewModel
{
    private string _posterUrl;
        public string PosterUrl
        {
            get
            {
                //Get Image Url, this is an example and will be retrieved from somewhere else.
                _posterUrl = "http://www.eurobuzz.org/wp-content/uploads/2012/08/logo.jpg";
                return _posterUrl;    
            }
            set 
            { 
                _posterUrl = value;
                NofityPropertyChanged(p => p.PosterUrl);
            }
        }
}

这是我的 ValueConverter：

public class BitmapImageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if(value is string)
            return new BitmapImage(new Uri((string)value, UriKind.RelativeOrAbsolute));

        if(value is Uri)
            return new BitmapImage((Uri)value);

        throw new NotSupportedException();
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotSupportedException();
    }
}

这是我的 XAML：

<Image Source="{Binding PosterUrl, Converter={StaticResource bitmapImageConverter}}" Width="100" Height="100" />

所以 this 绑定到包含 imageurl 的 PosterUrl 属性，并将其转换为位图图像。有什么想法吗？

【问题讨论】：

请在上面找到我的代码
这一切都应该完美无缺。也许对该 URL 的请求没有通过您的网络代理。您可以在 Internet Explorer 中检索图像吗？
幸运的是，我没有代理，它确实会在 IE 中弹出
即使不使用转换器，字符串也会通过内置的 TypeConverter 自动转换为 BitmapSource。你能尝试（只是为了测试）像var data = (new WebClient()).DownloadData("<your url>");这样的东西吗？应该给你一个包含图像缓冲区的字节数组，只是为了看看下载是否有效。
这行得通。我没有提到的另一件事是这是一个 Windows 8 应用程序。可能是在 WinRT 中这种行为是不同的。请指教？

标签： c# .net data-binding winrt-xaml

【解决方案1】：

试试看

<Image Helpers:ImageAsyncHelper.SourceUri="{Binding Url, IsAsync=True}" x:Name="img" />

在哪里

using System;
using System.Windows;
using System.Windows.Data;
using System.Windows.Controls;

public class ImageAsyncHelper : DependencyObject {
    public static Uri GetSourceUri(DependencyObject obj){
        return (Uri)obj.GetValue(SourceUriProperty);
    }

    public static void SetSourceUri(DependencyObject obj, Uri value){
        obj.SetValue(SourceUriProperty, value);
    }

    public static readonly DependencyProperty SourceUriProperty =
        DependencyProperty.RegisterAttached("SourceUri",
            typeof(Uri),
            typeof(ImageAsyncHelper),
            new PropertyMetadata { PropertyChangedCallback = (obj, e) =>
                ((Image)obj).SetBinding(
                    Image.SourceProperty,
                    new Binding("VerifiedUri"){
                        Source = new ImageAsyncHelper{
                            _givenUri = (Uri)e.NewValue
                        },
                        IsAsync = true
                    }
                )
            }
        );

    private Uri _givenUri;
    public Uri VerifiedUri {
        get {
            try {
                System.Net.Dns.GetHostEntry(_givenUri.DnsSafeHost);
                return _givenUri;
            }
            catch (Exception) {
                return null;
            }
        }
    }
}

还有

public Uri Url {
    get {
        return new Uri(SomeString, UriKind.Absolute);
    }
}

【讨论】：

【解决方案2】：

你想这样做吗？

<UserControl x:Class="WpfApplication1.UserControl1"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">
<StackPanel Orientation="Vertical">
    <Image Height="100" Width="100" Source="{Binding}" />

    <Image Height="100" Width="100" Source="http://www.eurobuzz.org/wp-content/uploads/2012/08/logo.jpg"/>
</StackPanel>

后面的代码：

public partial class UserControl1 : UserControl
{
    public UserControl1()
    {
        this.DataContext = "http://www.eurobuzz.org/wp-content/uploads/2012/08/logo.jpg";
        InitializeComponent();
    }
}

【讨论】：