title: How to Bind an Image from an ObservableCollection to View
body: <p>I would like to bind a specific image from an OservableCollection to my View. I am attempting to use LINQ for this, and I believe I am getting the correct image, although the View does not show anything. So far what I have is as follows:</p>
  
  <p>ImagePage.xaml</p>
  
  <pre><code>&lt;Image x:Name="photo" Grid.Row="0" Source="{Binding}" Margin="12" 
                     HorizontalAlignment="Center" VerticalAlignment="Center"
                     toolkit:TiltEffect.IsTiltEnabled="True"/&gt;
  </code></pre>
  
  <p>App.xaml.cs</p>
  
  <pre><code>public static PictureRepository PictureList
      {
          get
          {
              //Gets the ObservableCollection of images from IsolatedStorage
              return PictureRepository.Instance;
          }
      }
  </code></pre>
  
  <p>ImagePage.xaml.cs</p>
  
  <pre><code>private void GetImage(string fileDate)
      {
          //if (fileName != null)
          if(fileDate != null)
          {                
              var p = App.PictureList.Pictures.Where(x =&gt; x.DateTaken.ToString() == fileDate).FirstOrDefault();
              if (p != null)
              {
                  photo.DataContext = p;
              }
      }
  </code></pre>
  
  <p>PictureRepository.cs</p>
  
  <pre><code>#region Constants
  
      public const string IsolatedStoragePath = "Pictures";
  
      #endregion
  
      #region Fields
  
      private readonly ObservableCollection&lt;Picture&gt; _pictures = new ObservableCollection&lt;Picture&gt;();
  
      #endregion
  
      #region Properties
  
      public ObservableCollection&lt;Picture&gt; Pictures
      {
          get { return _pictures; }
      }
  
      #endregion
  
      #region Singleton Pattern
  
      private PictureRepository()
      {
          LoadAllPicturesFromIsolatedStorage();
      }
  
      public static readonly PictureRepository Instance = new PictureRepository();
  
      #endregion
  
      /// &lt;summary&gt;        
      /// Saves to local storage
      /// This method gets two parameters: the captured picture instance and the name of the pictures folder in the isolated storage
      /// &lt;/summary&gt;
      /// &lt;param name="capturedPicture"&gt;&lt;/param&gt;
      /// &lt;param name="directory"&gt;&lt;/param&gt;
      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);
              }
          }
      }
  
      /// &lt;summary&gt;
      /// To load all saved pictures and add them to the pictures list page
      /// &lt;/summary&gt;
      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;
              }
          }
      }
  
      /// &lt;summary&gt;
      /// To load all the pictures at start time
      /// &lt;/summary&gt;
      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);
          }
      }
  </code></pre>
  
  <p>Picture.cs</p>
  
  <pre><code>[DataMember]
      public string Address
      {
          get { return GetValue(() =&gt; Address); }
          set { SetValue(() =&gt; Address, value); }
      }
  
      [DataMember]
      public string Note
      {
          get { return GetValue(() =&gt; Note); }
          set { SetValue(() =&gt; Note, value); }
      }
  
      [DataMember]
      public DateTime DateTaken
      {
          get { return GetValue(() =&gt; DateTaken); }
          set { SetValue(() =&gt; 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());
      }
  </code></pre>
  
  <p>When debugging, I can see that <code>p</code> contains the correct date of an image and that it is not null, but I do not see anything in the view?</p>