如何将数组的指定元素绑定到 Windows Phone 8 中 LongListSelector 中的图像源答案

【问题标题】：How to bind to a specified element of an array to image source in LongListSelector in windows phone 8如何将数组的指定元素绑定到 Windows Phone 8 中 LongListSelector 中的图像源
【发布时间】：2014-03-12 01:01:58
【问题描述】：

我有一篇示范文章。文章有一个属性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>

【问题讨论】：

不确定应该有 .在那里！试试 ImagePath[0]。但我的建议是在 Article 类上添加一个额外的属性 - ImageToDisplay，这将返回列表中的第一个图像。这样您就可以在 XAML 绑定中使用该属性

标签： c# windows-phone-7 data-binding windows-phone-8 longlistselector

【解决方案1】：

编辑这里得出这个问题的结论

首先，我要说“非常感谢那些回答我问题的人”

在这里添加一个额外的属性是正确的答案，我按照建议做了
为什么 BitmapImage 包含绑定到图像源的 web url 不起作用，我将在另一个线程中询问。
为什么 ImagePath[0] 根据http://msdn.microsoft.com/en-us/library/system.windows.data.binding.path.aspx 不起作用。我也会在另一个线程中问。

【讨论】：

【解决方案2】：

这对我有用.. 这是代码 sn-p

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

【讨论】：

【解决方案3】：

这可能会对你有所帮助，我遇到了同样的问题并将 BitmapImage 绑定为图像源解决了我的问题。

你的模型类

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

【讨论】：

编译错误；错误 1 'CollectionApp.Models.Article.BitImage.get' 必须声明一个正文，因为它没有标记为抽象、外部或部分 C:\Users\heyun\Documents\Visual Studio 2012\Projects\CollectionApp\CollectionApp\Models\Article .cs 85 13 收藏应用程序
@max i mdse 我的答案有变化，请看一下。
图片源无法绑定BitmapImage？我将 uri 设为字符串并绑定到图像源，它可以工作。当一个 BitmapImage 类型时，它会失败......

【解决方案4】：

我会关注@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 发生更改时更新它们的机会。

最后但也许是最重要的事情 - 获取图像取决于它的位置 - 如果它是下载的并且是 IsolatedStorageFile 或者它是内置内容。正如我怀疑的那样，我已经编辑了我的答案以将其设置为来自独立存储，您的图像在那里。如果它们是内置内容，请取消注释上面的行。

【讨论】：

【解决方案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;

【讨论】：

我按照你在这里写的那样做，但我遇到了绑定异常。 BindingExpression 路径错误：在“CollectionApp.Models.Article”“CollectionApp.Models.Article”上找不到“BitImage”属性 (HashCode=60828848)。 BindingExpression: Path='BitImage' xaml 是：

【解决方案6】：

问题出在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">

【讨论】：