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

有關價值轉換器的更多信息