如何在Windows Phone 8的LongListSelector中將數組的指定元素綁定到圖像源

Question

我有示范文章。 Article具有ImagePath屬性，而ImagePath是Uri string數組。

在指定的頁面中。 我只想顯示ImagePath列表的第一個圖像。 所以我像下面那樣做，沒有圖像顯示。

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

其他屬性顯示良好，有人可以幫助我嗎？

型號如下：

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

而且我在XAML中的longlistselector中有圖像控制

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

Answer 1

可能會幫到您，我遇到了同樣的問題，並且將BitmapImage綁定為Image源解決了我的問題。

您的模特班

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

您的xaml應該是

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

Answer 2

我將遵循@Depechie注釋並為此使用特殊屬性。 當ImagePath[0]可能已更改時，我還將擴展您的Article類以通知UI。 我認為它可能像這樣：

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

如您所見，我已經將List更改為ObservableCollection ，因此可以在構造函數中訂閱CollectionChanged事件。 因此，當ImagePath更改時，將引發PropertyChanged並可以更新您的Image 。

我還使用get訪問器創建了提到的屬性FirstImage ，以便您的Image可以從中獲取Uri。 用法：

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

我還設置了“ Subject和“ Words屬性，並為它們添加了在更改UI后更新UI的機會。

最后但也許是最重要的事情 -獲取映像取決於映像的位置-如果映像已下載並且是IsolatedStorageFile或內容的內置文件。 我懷疑我已經編輯了答案，以便從IsolatedStorage進行設置，因為我懷疑您在那里有映像。 如果它們是內容的內置內容，則請取消注釋上面的行。

Answer 3

這對我有用..這是代碼段

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

Answer 4

問題在於Image的Source屬性的綁定。 嘗試刪除點：

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

Answer 5

嘗試將BitmapImage或WriteableBitmap用作另一個屬性

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

並像這樣使用它。

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

articleList.ItemsSource = ArticleCollection;

Answer 6

在這里編輯得出這個問題的結論

首先，我必須說：“非常感謝那些回答我問題的人”

1. 添加一個額外的屬性是正確的答案，我做了建議

2. 為什么BitmapImage包含綁定到圖像源的Web URL無效，我將在另一個線程中詢問。

3. 為什么ImagePath [0]無法根據http://msdn.microsoft.com/zh-cn/library/system.windows.data.binding.path.aspx起作用。 我也會問另一個線程。