wpf - 显示来自超链接源的图像

Question

我有一个使用 MVVM 的应用程序。

我在以下超链接http://b-i.forbesimg.com/spleverage/files/2013/04/silver-apple-logo-apple-picture.jpg中有一个图像，我想将其绑定为列表框上的源。

请参阅下面的列表框数据模板，我正在绑定图像源（这是一个超链接），如下所示。我希望在列表框中看到图像，但是没有加载任何内容。我错过了什么？

<DataTemplate x:Key="UserDataTemplate">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>

            <Grid Grid.Column="0">
                <Image Source="{Binding Image}"></Image>
            </Grid>

            <Grid Grid.Column="1">
                <TextBlock Text="{Binding Name}"/>
            </Grid>
        </Grid>
    </DataTemplate>

{Binding Image} 中传递的值是“ http://bi.forbesimg.com/spleverage/files/2013/04/silver-apple-logo-apple-picture.jpg ”。知道为什么图像无法加载吗？

Answer 1

我做了一个快速测试，图像很大，它有可能在那里，但是因为你的尺寸没有限制，Grid它只DataTemplate显示全尺寸的图像，你可以看到它，只是一个空的角落。

使用您的DataTemplete我添加了一个MaxHeight，它显示正常。

测试代码：

代码：

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent(); 
        Items.Add(new Item{Name = "Stack", Image = "http://b-i.forbesimg.com/spleverage/files/2013/04/silver-apple-logo-apple-picture.jpg"});
        Items.Add(new Item { Name = "Overflow", Image = "http://b-i.forbesimg.com/spleverage/files/2013/04/silver-apple-logo-apple-picture.jpg" });
    }

    private ObservableCollection<Item> _items = new ObservableCollection<Item>();
    public ObservableCollection<Item> Items
    {
        get { return _items; }
        set { _items = value; }
    }
}

public class Item
{
    public string Image { get; set; }
    public string Name { get; set; }
}

xml:

 <Window x:Class="WpfApplication13.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="428" Width="738" Name="UI" >
    <Grid DataContext="{Binding ElementName=UI}">
        <Grid.Resources>
            <DataTemplate x:Key="UserDataTemplate">
                <Grid MaxHeight="25">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Grid Grid.Column="0">
                        <Image Source="{Binding Image}" />
                    </Grid>
                    <Grid Grid.Column="1">
                        <TextBlock Text="{Binding Name}"/>
                    </Grid>
                </Grid>
            </DataTemplate>
        </Grid.Resources>
        <ListBox ItemsSource="{Binding Items}" ItemTemplate="{StaticResource UserDataTemplate}" />
    </Grid>
</Window>

结果：