C#绑定ObservableCollection内List中的图像以显示在LongListSelector中

本文关键字:显示 LongListSelector 图像 ObservableCollection List 绑定 | 更新日期: 2023-09-27 17:58:26

我遇到了一个问题,我试图在我的LongListSelector中显示我的列表中的一些图像,但当我试图将我的LongListSelector绑定到包含我的图像的列表时,它不会显示任何图像。

XAML中的我的LongListSelector:

<phone:PivotItem Header="Images">
        <Grid>
            <phone:LongListSelector LayoutMode="Grid" IsGroupingEnabled="True" GridCellSize="180,180" Margin="0,0,-12,0" ItemsSource="{Binding}">
            <phone:LongListSelector.ItemTemplate>
                <DataTemplate>
                    <Grid Background="{StaticResource PhoneAccentBrush}" Margin="5">
                        <StackPanel>
                                <Image Source="{Binding Images}"></Image>
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </phone:LongListSelector.ItemTemplate>
            </phone:LongListSelector>
        </Grid>
    </phone:PivotItem>

和我的DataContext:

this.DataContext = gd.GetGameItems;

ObservableCollection绑定到我的LongListSelector,其中包含我的列表图像:

private ObservableCollection<GetGame> _GetGameItems = new ObservableCollection<GetGame>();
public ObservableCollection<GetGame> GetGameItems
{
    get
    {
        return this._GetGameItems;
    }
}

用于读取XML和存储数据的代码。GetImages方法是我获取图像并将它们从XML放入我的列表(图像)中的地方,我想在我的LongListSelector中显示它。GetGame类是我存储数据的地方:

var feedXml = XDocument.Parse(e.Result);
        var gameData = feedXml.Root.Descendants("Game").Select(x => new GetGame
        {
            ID = (int)x.Element("id"),
            GameTitle = (string)x.Element("GameTitle"),
            Platform = (string)x.Element("Platform"),
            ReleaseDate = (string)x.Element("ReleaseDate"),
            Images = GetImages(x).ToList(),
        })
          .ToList();
        foreach (var item in gameData) GetGameItems.Add(item);
    }
}
private static IEnumerable<Uri> GetImages(XElement gameNode)
{
    return gameNode
              .Descendants("boxart")
              .Select(t => new Uri("http://thegamesdb.net/banners/" + (string)t.Attribute("thumb")));
}
public class GetGame
{
public int ID { get; set; }
public string GameTitle { get; set; }
public string Platform { get; set; }
public string ReleaseDate { get; set; }
public List<Uri> Images { get; set; }

}这是我的XML:

<Data>
  <baseImgUrl>http://thegamesdb.net/banners/</baseImgUrl>
  <Game>
    <id>2</id>
    <GameTitle>Crysis</GameTitle>
     <PlatformId>1</PlatformId>
     <Platform>PC</Platform>
     <ReleaseDate>11/13/2007</ReleaseDate>
     <Overview>
     From the makers of Far Cry, Crysis offers FPS fans the best-looking, most highly-        evolving gameplay, requiring the player to use adaptive tactics and total customization of    weapons and armor to survive in dynamic, hostile environments including Zero-G. Earth, 2019. A team of US scientists makes a frightening discovery on an island in the South China Sea. All contact with the team is lost when the North Korean Government quickly seals off the area. The United States responds by dispatching an elite team of Delta Force Operators to recon the situation. As tension rises between the two nations, a massive alien ship reveals itself in the middle of the island. The ship generates an immense force sphere that freezes a vast portion of the island and drastically alters the global weather system. Now the US and North Korea must join forces to battle the alien menace. With hope rapidly fading, you must fight epic battles through tropical jungle, frozen landscapes, and finally into the heart of the alien ship itself for the ultimate Zero G showdown.
    </Overview>
    <ESRB>M - Mature</ESRB>
    <Genres>
    <genre>Shooter</genre>
    </Genres>
    <Players>4+</Players>
    <Co-op>No</Co-op>
    <Youtube>http://www.youtube.com/watch?v=i3vO01xQ-DM</Youtube>
    <Publisher>Electronic Arts</Publisher>
    <Developer>Crytek</Developer>
    <Rating>8.1111</Rating>
    <Images>
      <fanart>
        <original width="1920" height="1080">fanart/original/2-1.jpg</original>
        <thumb>fanart/thumb/2-1.jpg</thumb>
      </fanart>
      <fanart>
        <original width="1920" height="1080">fanart/original/2-2.jpg</original>
        <thumb>fanart/thumb/2-2.jpg</thumb>
      </fanart>
      <fanart>
        <original width="1920" height="1080">fanart/original/2-3.jpg</original>
        <thumb>fanart/thumb/2-3.jpg</thumb>
      </fanart>
      <fanart>
        <original width="1920" height="1080">fanart/original/2-4.jpg</original>
        <thumb>fanart/thumb/2-4.jpg</thumb>
      </fanart>
      <fanart>
        <original width="1920" height="1080">fanart/original/2-5.jpg</original>
        <thumb>fanart/thumb/2-5.jpg</thumb>
      </fanart>
      <fanart>
        <original width="1920" height="1080">fanart/original/2-6.jpg</original>
        <thumb>fanart/thumb/2-6.jpg</thumb>
      </fanart>
    <boxart side="back" width="1525" height="2162" thumb="boxart/thumb/original/back/2-1.jpg">boxart/original/back/2-1.jpg</boxart>
    <boxart side="front" width="1525" height="2160" thumb="boxart/thumb/original/front/2-1.jpg">boxart/original/front/2-1.jpg</boxart>
    <banner width="760" height="140">graphical/2-g2.jpg</banner>
    <banner width="760" height="140">graphical/2-g3.jpg</banner>
      <screenshot>
        <original width="1920" height="1080">screenshots/2-1.jpg</original>
        <thumb>screenshots/thumb/2-1.jpg</thumb>
      </screenshot>
    <clearlogo width="400" height="95">clearlogo/2.png</clearlogo>
    </Images>
  </Game>
</Data>

所以,问题是让这个带有图像的列表显示在我的LongListSelector中。我不知道这是否与我的列表图像在我的ObservableCollection GetGameItems:中有关

public List<Uri> Images { get; set; }

所以我希望有人能帮助我,谢谢。

C#绑定ObservableCollection内List中的图像以显示在LongListSelector中

您正在尝试将列表分配为图像源,但这不起作用。如果要绑定到图像,则需要具有"图像"的属性。

,这是一个关于如何做到这一点的示例

 public class PhotoItem
    {
        public string Name { get; set; }
        public BitmapImage Photo { get; set; }
        public static List<PhotoItem> getPhotos()
        {
            PhotoItem one = new PhotoItem();
            one.Photo = new BitmapImage(new Uri("",UriKind.Relative));
            one.Name = "Image1";
            PhotoItem two = new PhotoItem();
            two.Photo = new BitmapImage(new Uri("", UriKind.Relative));
            two.Name = "Image1";
            List<PhotoItem> Photos = new List<PhotoItem>();
            Photos.Add(one);
            return Photos;
        }

您的ViewModel,

class PhotoItemViewModel : INotifyPropertyChanged
    {
        private ObservableCollection<PhoneApp1.Model.PhotoItem> _photoList;
        public ObservableCollection<PhoneApp1.Model.PhotoItem> PhotoList
        {
            get
            {
                return _photoList;
            }
            set
            {
                _photoList = value;
                OnPropertyChanged();
            }

        }
        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
        }
        public void LoadData()
        {
            _photoList = new ObservableCollection<Model.PhotoItem>(Model.PhotoItem.getPhotos());
        }
    }

XAML,

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <phone:LongListSelector ItemsSource="{Binding PhotoList}">
            <phone:LongListSelector.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding Name}"></TextBlock>
                        <Image Source="{Binding Photo}"></Image>
                    </StackPanel>           
                </DataTemplate>
            </phone:LongListSelector.ItemTemplate>            
        </phone:LongListSelector>
    </Grid>

代码背后:

public MainPage()
        {
            InitializeComponent();
            ViewModel.PhotoItemViewModel _vm = new ViewModel.PhotoItemViewModel();
            this.DataContext = _vm;
        }