CODEWITHSUNDEEP
c#windows-phone-7data-bindingwindows-phone-8longlistselector
max
max

Reputation: 645

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

I have a model Article. Article has a property ImagePath, and ImagePath is array of Uri string.

In a specified page. I just want to show the first Image of the ImagePath list. So I do it like below and no image displays. 

 <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">

Other properties display well, anyone can help me on this?

Model is as follow: 

public class Article
{
    public List<string> ImagePath = new List<string>();
    public string Subject;
    public string Words;
}

and i have image control in a longlistselector in my xaml

<phone:LongListSelector 
                    x:Name="articleList"
                    Grid.Row="1"   
                    Margin="0,0,-12,0" 
                    DataContext="{StaticResource viewModel}"
                    ItemTemplate="{StaticResource ResultItemTemplate}"   
                    ItemsSource="{Binding ArticleCollection}"
                    ItemRealized="articleList_ItemRealized"
                    SelectionChanged="LongListSelector_SelectionChanged"

                    >

                </phone:LongListSelector>

<DataTemplate x:Key="ResultItemTemplate">
            <Grid Margin="0,6,0,0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Rectangle Fill="Gray" Height="50" Width="50" Grid.Row="0" Grid.Column="0" 
                         VerticalAlignment="Top" Margin="0,7,7,0"
                       Grid.RowSpan="2">

                </Rectangle>
                <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">

                </Image>
                <TextBlock Text="{Binding Path=Subject, Mode=TwoWay}" Grid.Row="0" Grid.Column="1"
                                 Foreground="{StaticResource PhoneAccentBrush}" VerticalAlignment="Top"/>

                <TextBlock Text="{Binding Path=Words, Mode=TwoWay}" TextWrapping="Wrap"
                               Grid.Row="1" Grid.Column="1"
                               VerticalAlignment="Top"
                               />

            </Grid>
        </DataTemplate>

Upvotes: 0

Views: 501

Answers (6)

max
max

Reputation: 645

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"

  1. add an extra property is the right answer here, i did as suggestions

  2. why a BitmapImage contains web url bind to Image source does not work, i will ask in another thread.

  3. 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.

Upvotes: 0

stackamar
stackamar

Reputation: 214

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;

Upvotes: 1

Jaihind
Jaihind

Reputation: 2778

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">

Upvotes: 1

Romasz
Romasz

Reputation: 29792

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.

Upvotes: 1

stackamar
stackamar

Reputation: 214

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;

Upvotes: 0

anderZubi
anderZubi

Reputation: 6424

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">

Upvotes: 0

Related Questions