Как привязать указанный элемент массива к источнику изображения в LongListSelector в Windows Phone 8
У меня есть модельная статья. Статья имеет свойство 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;
}
и у меня есть контроль изображения в longlistselector в моем 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>
6 ответов
Попробуйте использовать 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;
Это работает для меня.. это фрагмент кода
// 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;
Может быть, это поможет вам, у меня была та же проблема и связать 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">
Я бы следил за комментарием @Depechie и использовал для этого специальное свойство. Я бы тоже продлил Article класс немного, чтобы уведомить пользовательский интерфейс, когда есть шанс, что ImagePath[0] возможно, изменился. Я думаю, что это может выглядеть так:
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 может быть обновлено.
Я также создал упомянутое свойство FirstImage с get Accessor, так что ваш Image может получить от него Ури. Использование:
<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 Свойства и добавили им шанс обновить пользовательский интерфейс, когда они изменились.
И последнее, но, может быть, самое главное - получение изображения зависит от того, где оно находится - если оно было загружено и является IsolatedStorageFile или это встроенный контент. Я отредактировал свой ответ, чтобы установить его из IsolatedStorage, так как я подозреваю, что у вас там есть ваши изображения. Если это встроенный контент, раскомментируйте строки выше.
РЕДАКТИРОВАТЬ здесь, чтобы прийти к заключению этого вопроса
Прежде всего, мне нужно сказать: "Большое спасибо тем парням, которые отвечают на мой вопрос".
добавьте дополнительную собственность - правильный ответ здесь, я сделал как предложения
почему BitmapImage содержит веб-ссылку, привязку к источнику изображения не работает, я спрошу в другой теме.
почему ImagePath[0] не работает в соответствии с http://msdn.microsoft.com/en-us/library/system.windows.data.binding.path.aspx. Я также буду просить в другой теме.
Проблема в связывании Source собственность Image, Попробуйте, удалив точку:
<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">