MVVM XAML绑定转换器无法转换值错误

Question

我正在尝试将Listview绑定到ObservableCollection。 我收到以下错误。

调试器消息：

错误：转换器无法将类型'System.Collections.ObjectModel.ObservableCollection`1'的值转换为类型'ImageSource'； BindingExpression：Path ='PictureSource'DataItem ='MeetFriends.MainViewModel.View'; 目标元素是“ Windows.UI.Xaml.Controls.Image”（名称=“空”）； 目标属性为“源”（类型为“图像源”）。

我的ListView：

 <ListView ItemsSource="{Binding}" DataContext="{Binding FriendsData, Source={StaticResource view}}" Margin="0,0,2,0" x:Name="ListUI" Loaded="ListUI_Loaded" Background="WhiteSmoke" 
               ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollMode="Enabled" >
            <ListView.Header>
                <Grid Margin="14,0,0,14" >
                    <TextBlock Foreground="Black" TextWrapping="WrapWholeWords">People you are friends with and using MeetFriends:</TextBlock>
                </Grid>
            </ListView.Header>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid HorizontalAlignment="Stretch" Margin="0,14,0,0" >
                        <StackPanel Orientation="Horizontal" >
                            <TextBlock Text="{Binding name}" Margin="0,0,14,0" FontSize="{Binding Fontsize, Source={StaticResource view}}" FontFamily="Segoe UI Black"></TextBlock>
                            <Image Source="{Binding PictureSource, Source={StaticResource view}}" Height="100" Width="100">
                            </Image>
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

绑定是：

   public ObservableCollection<ImageSource> PictureSource
    {
        get { return _pictureSource; }
        set { _pictureSource = value; OnPropertyChanged("_pictureSource"); }
    }

在代码中添加值看起来像这样：

  foreach(object x in f.data) {
                view.FriendsData.Add(f.data[i]);
                view.PictureSource.Add(new BitmapImage() { UriSource = new Uri("https://graph.facebook.com/v2.5/" + view.FriendsData[i].id.ToString() + "/picture?redirect=true") });
                Debug.WriteLine("A new object has been added to friendsdata and picturesource ["+i+"]");
                i++;
            }

Answer 1

错误是不言而喻的，您应该将图像绑定到当前项目（FriendsData集合的项目）的数据上下文字段。

您可以将图像直接绑定到id并使用转换器，该转换器会将字符串转换为ImageSource：

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

转换器：

public class IdToImageConverter: IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return new BitmapImage() { UriSource = new Uri("https://graph.facebook.com/v2.5/" + value.ToString() + "/picture?redirect=true") }
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return null;
    }
}

有关价值转换器的更多信息