如何將ObservableCollection中的圖像綁定到視圖

Question

我想將OservableCollection中的特定圖像綁定到我的視圖。我試圖爲此使用LINQ，並且我相信我正在獲取正確的圖像，儘管View沒有顯示任何內容。到目前爲止，我有如下：

ImagePage.xaml

<Image x:Name="photo" Grid.Row="0" Source="{Binding}" Margin="12" 
        HorizontalAlignment="Center" VerticalAlignment="Center" 
        toolkit:TiltEffect.IsTiltEnabled="True"/> 

App.xaml.cs

public static PictureRepository PictureList 
    { 
     get 
     { 
      //Gets the ObservableCollection of images from IsolatedStorage 
      return PictureRepository.Instance; 
     } 
    } 

ImagePage.xaml.cs

private void GetImage(string fileDate) 
    { 
     //if (fileName != null) 
     if(fileDate != null) 
     {     
      var p = App.PictureList.Pictures.Where(x => x.DateTaken.ToString() == fileDate).FirstOrDefault(); 
      if (p != null) 
      { 
       photo.DataContext = p; 
      } 
    } 

PictureRepository.cs

#region Constants 

    public const string IsolatedStoragePath = "Pictures"; 

    #endregion 

    #region Fields 

    private readonly ObservableCollection<Picture> _pictures = new ObservableCollection<Picture>(); 

    #endregion 

    #region Properties 

    public ObservableCollection<Picture> Pictures 
    { 
     get { return _pictures; } 
    } 

    #endregion 

    #region Singleton Pattern 

    private PictureRepository() 
    { 
     LoadAllPicturesFromIsolatedStorage(); 
    } 

    public static readonly PictureRepository Instance = new PictureRepository(); 

    #endregion 

    /// <summary>   
    /// Saves to local storage 
    /// This method gets two parameters: the captured picture instance and the name of the pictures folder in the isolated storage 
    /// </summary> 
    /// <param name="capturedPicture"></param> 
    /// <param name="directory"></param> 
    public void SaveToLocalStorage(CapturedPicture capturedPicture, string directory) 
    { 
     //call IsolatedStorageFile.GetUserStoreForApplication to get an isolated storage file 
     var isoFile = IsolatedStorageFile.GetUserStoreForApplication(); 
     //Call the IsolatedStorageFile.EnsureDirectory extension method located in the Common IsolatedStorageFileExtensions class to confirm that the pictures folder exists. 
     isoFile.EnsureDirectory(directory); 

     //Combine the pictures folder and captured picture file name and use this path to create a new file 
     string filePath = Path.Combine(directory, capturedPicture.FileName); 
     using (var fileStream = isoFile.CreateFile(filePath)) 
     { 
      using (var writer = new BinaryWriter(fileStream)) 
      { 
       capturedPicture.Serialize(writer); 
      } 
     } 
    } 

    /// <summary> 
    /// To load all saved pictures and add them to the pictures list page 
    /// </summary> 
    public CapturedPicture LoadFromLocalStorage(string fileName, string directory) 
    { 
     //To open the file, add a call to the IsolatedStorageFile.GetUserStoreForApplication 
     var isoFile = IsolatedStorageFile.GetUserStoreForApplication(); 

     //Combine the directory and file name 
     string filePath = Path.Combine(directory, fileName); 
     //use the path to open the picture file from the isolated storage by using the IsolatedStorageFile.OpenFile method 
     using (var fileStream = isoFile.OpenFile(filePath, FileMode.Open, FileAccess.Read)) 
     { 
      //create a BinaryReader instance for deserializing the CapturedPicture instance 
      using (var reader = new BinaryReader(fileStream)) 
      { 
       var capturedPicture = new CapturedPicture(); 
       //create a new instance of the type CapturedPicture called CapturedPicture.Deserialize to deserialize the captured picture and return it 
       capturedPicture.Deserialize(reader); 
       return capturedPicture; 
      } 
     } 
    } 

    /// <summary> 
    /// To load all the pictures at start time 
    /// </summary> 
    private void LoadAllPicturesFromIsolatedStorage() 
    { 
     //add call to the IsolatedStorageFile.GetUserStoreForApplication to open an isolated storage file 
     var isoFile = IsolatedStorageFile.GetUserStoreForApplication(); 
     //Call the IsolatedStorageFile.EnsureDirectory extension method located in the Common IsolatedStorageFileExtensions class to confirm that the pictures folder exists 
     isoFile.EnsureDirectory(IsolatedStoragePath); 

     //Call the IsolatedStorageFile.GetFileNames using the pictures directory and *.jpg as a filter to get all saved pictures 
     var pictureFiles = isoFile.GetFileNames(Path.Combine(IsolatedStoragePath, "*.jpg")); 

     //Iterate through all the picture files in the list and load each using the LoadFromLocalStorage you created earlier 
     foreach (var pictureFile in pictureFiles) 
     { 
      var picture = LoadFromLocalStorage(pictureFile, IsolatedStoragePath); 
      _pictures.Add(picture); 
     } 
    } 

個

Picture.cs

[DataMember] 
    public string Address 
    { 
     get { return GetValue(() => Address); } 
     set { SetValue(() => Address, value); } 
    } 

    [DataMember] 
    public string Note 
    { 
     get { return GetValue(() => Note); } 
     set { SetValue(() => Note, value); } 
    } 

    [DataMember] 
    public DateTime DateTaken 
    { 
     get { return GetValue(() => DateTaken); } 
     set { SetValue(() => DateTaken, value); } 
    } 

    [IgnoreDataMember] 
    public BitmapSource Source 
    { 
     get 
     { 
      return CreateBitmapSource(); 
     } 
    } 

    protected abstract BitmapSource CreateBitmapSource(); 

    //In the Serialize method, store the Position, Address, Note, and DateTaken properties 
    public virtual void Serialize(BinaryWriter writer) 
    {    
     writer.Write(DateTaken.ToString()); //writer.WriteString(DateTaken); 
    } 

    //In the Deserialize method, read the data in the same order you’ve written it 
    public virtual void Deserialize(BinaryReader reader) 
    { 
     DateTaken = DateTime.Parse(reader.ReadString()); 
    } 

調試時，我可以看到p包含圖像的正確的日期，它是不是空的，但我沒有看到什麼看法？

Answer 1

您的綁定需要指向Picture類中的正確屬性，在您的案例中爲Source。

嘗試此XAML

<Image x:Name="photo" Grid.Row="0" Source="{Binding Source}" Margin="12" 
       HorizontalAlignment="Center" VerticalAlignment="Center" 
       toolkit:TiltEffect.IsTiltEnabled="True"/>