-->

C#绑定的ObservableCollection内从列表中图像LongListSelector显示

2019-09-28 04:56发布

我在那里我尝试展示我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;

在IM的ObservableCollection绑定到我的LongListSelector其中包含我列出图像:

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

该代码读取XML和存储数据。 该方法GetImages就是即时得到的图像,并把他们变成我的列表(图像)从中我想在我的LongListSelector以显示XML。 类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; }

所以我希望有一个人可以帮助我,谢谢。

Answer 1:

您正在尝试分配列表作为图象源,它不会工作。 您需要有图片的属性,如果你绑定到一个图像。

这里是你如何可以做一个样本,

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

您的视图模型,

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


文章来源: C# binding images from a List inside a ObservableCollection to show in LongListSelector