How to bind to a specified element of an array to image source in LongListSelector in windows phone 8

Question 1

Try using BitmapImage or WriteableBitmap as Another property

public List<String> ImagePath = new List<String>();
public BitmapImage SelectedImage;

And use it like this.

Article ArticleCollection = new Article();
ArticleCollection.BitmapImage = new BitmapImage(new Uri(ArticleCollection.Imagepath[0]));

articleList.ItemsSource = ArticleCollection;

Question 2

I would follow @Depechie comment and use special property for this. I would also extend your Article class a little to notify UI when there is a chance that ImagePath[0] might have changed. I think it could look like this:

public class Article : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    public ObservableCollection<string> ImagePath = new ObservableCollection<string>();
    private string subject;
    public string Subject
    {
       get { return subject; }
       set { subject = value; RaiseProperty("Subject"); }
    }
    private string words;
    public string Words
    {
       get { return words; }
       set { words = value; RaiseProperty("Words"); }
    }
    public Article()
    {
       ImagePath.CollectionChanged += (sender, e) => { RaiseProperty("FirstImage"); };
    }

    // public Uri FirstImage // this can work if your image is a content of your App
    // {
    //    get
    //    {
    //         return new Uri(ImagePath.FirstOrDefault(), UriKind.Relative);
    //    }
    // }

   public BitmapImage FirstImage // getter - BitmapImage
   {
        get
        {
           if (String.IsNullOrEmpty(ImagePath[0])) return null;
           BitmapImage temp = new BitmapImage();

           using (IsolatedStorageFile ISF = IsolatedStorageFile.GetUserStoreForApplication())
           using (IsolatedStorageFileStream file = ISF.OpenFile(ImagePath[0], FileMode.Open, FileAccess.Read))
                temp.SetSource(file);
           return temp;
        }
    }


    public void RaiseProperty(string property = null)
    {
        if (this.PropertyChanged != null)
            this.PropertyChanged(this, new PropertyChangedEventArgs(property));
    }
}

As you can see I've changed your List to ObservableCollection, and thus I'm able to subscribe in constructor to CollectionChanged event. So when the ImagePath changes, PropertyChanged is raised and your Image can be updated.

I've also created mentioned property FirstImage with get accessor, so that your Image can get Uri from it. Usage:

<Image Source="{Binding FirstImage}" Height="50" Width="50" Grid.Row="0" 
       Grid.Column="0" VerticalAlignment="Top" Margin="0,7,7,0" Grid.RowSpan="2">

I've also made your Subject and Words properties and added them a chance to update UI when they have changed.

And last but maybe the most important thing - getting an image depends on where it is - if it was downloaded and is an IsolatedStorageFile or it is a build in content. I've edited my answer to set it from IsolatedStorage, as I suspect, that you have your images there. If they are a build in content then uncomment lines above.

Question 3

May be this will help you, I had same problem and bind BitmapImage as Image source solves my problem.

Your model class

  public class Article
            {
                public List<string> ImagePath = new List<string>();
                public string Subject;
                public string Words;
                BitmapImage _image;
                public BitmapImage BindImage
                {
                   **Edits**
                    get{
                        return _image ;
                       }
                    set
                    {
                        if (ImagePath.Any())
                           {
                            value = new BitmapImage(new Uri(ImagePath.FirstOrDefault(), UriKind.Relative));
                         _image = value;
                           }
                    }
                }
            }

Your xaml should be

<Image Source="{Binding BindImage}" Height="50" Width="50" Grid.Row="0" Grid.Column="0" VerticalAlignment="Top" Margin="0,7,7,0" Grid.RowSpan="2">

Question 4

This works for me.. this is the code snippet

// your model class
public class Article
{
         public WiteableBitmap[] ImagePath { get; set; }
public string Subject { get; set; }
public string Words { get; set; }
}


//your xaml
<Image Source="{Binding ImagePath[0]}".../>

//your cs
WriteableBitmap writeableBitMap;
BitmapImage bmp = new BitmapImage(yourimageuri);
bmp.CreateOptions = BitmapCreateOptions.None;
bmp.ImageOpened += (sender, event) =>
{

    writeableBitMap = new WriteableBitmap((BitmapImage)sender);
};

Article ArticleCollection = new Article();
ArticleCollection.ImagePath = new WriteableBitmap[yourarraysize];
ArticleCollection.ImagePath[0] = writeableBitMap;

articleList.ItemsSource = ArticleCollection;

Question 5

The problem is in the Binding of Source property of the Image. Try by removing the dot:

<Image Source="{Binding ImagePath[0]}" Height="50" Width="50" Grid.Row="0" Grid.Column="0" VerticalAlignment="Top" Margin="0,7,7,0" Grid.RowSpan="2">

Question 6

EDIT here to come a conclusion of this question

First of all, i need to say "Thank you so much for those guys who answer my question"

add an extra property is the right answer here, i did as suggestions
why a BitmapImage contains web url bind to Image source does not work, i will ask in another thread.
why ImagePath[0] does not work according to http://msdn.microsoft.com/en-us/library/system.windows.data.binding.path.aspx. i will also ask in another thread.