Edit this page

Bind to XML

This section will explain how to bind RadCoverFlow to an XML data. In particular we will create an application that will call a Flickr web-service and based on what is specified in the search text box a result will be returned.

There are many approaches to achieve the result above. For this particular section I have chosen to pass an observable collection as a data context to the RadCoverFlow control.

private ObservableCollection<ImageInfo> imagesCollection = new ObservableCollection<ImageInfo>();
public Default_Cs()
{
    InitializeComponent();
    this.coverFlow.DataContext = imagesCollection;
    //So how do we actually fill the imagesCollection? It is done using the WebClient entity.Basically we call the DownloadStringAsync method of a WebClient instance and as soon as the result arrives, we handle it in the DownloadStringCompleted event handler.
    WebClient webClient = new WebClient();
    webClient.DownloadStringCompleted += new DownloadStringCompletedEventHandler(this.webClient_DownloadStringCompleted);
    // search string is composed by combining http://api.flickr.com/services/feeds/photos_public.gne?tags=&#13;    // and the value in the search textbox
    webClient.DownloadStringAsync(new Uri("searchUri", UriKind.Absolute));
}
//As you can see, the imagesCollection is filled with ImageInfo objects.The ImageInfo represents an image from Flickr.It has 2 properties –ImageTitle and ImageUrl, both of them string.This is how the ImageInfo class looks like this:
public class ImageInfo : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    private string imageTitle, imageUrl;
    public string ImageTitle
    {
        get { return this.imageTitle; }
        set
        {
            if (value != this.imageTitle)
            {
                this.imageTitle = value;
                this.FirePropertyChanged("ImageTitle");
            }
        }
    }
    public string ImageUrl
    {
        get { return this.imageUrl; }
        set
        {
            if (value != this.imageUrl)
            {
                this.imageUrl = value;
                this.FirePropertyChanged("ImageUrl");
            }
        }
    }
    private void FirePropertyChanged(string propertyName)
    {
        if (this.PropertyChanged != null)
        {
            this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}
private void webClient_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
    // remove any images from previous searches
    this.imagesCollection.Clear();
    XDocument feed = XDocument.Parse(e.Result);
    // 10 images should be enough for demonstrative purposes
    int numberOfPictures = 10;
    // Code bellow might vary when calling different services. The one bellow parses the result
    // returned by a Flickr service
    foreach (XElement entry in feed.Root.Elements(XName.Get("entry", "http://www.w3.org/2005/Atom")))&#13;    {
        string[] links = (from link in entry.Elements(XName.Get("link", "http://www.w3.org/2005/Atom"))&#13;                          where string.Compare(link.Attribute(XName.Get("rel")).Value, "enclosure") == 0
                          select link.Attribute(XName.Get("href")).Value).ToArray<string>();
        if (links.Length > 0)
        {
            // Add a new instance of the ImageInfo class
            imagesCollection.Add(new ImageInfo()
            {
                ImageTitle = entry.Element(XName.Get("title", "http://www.w3.org/2005/Atom")).Value,&#13;                ImageUrl = links[0]
            });
            // Decrement exit if 10 images are already created
            numberOfPictures -= 1;
            if (numberOfPictures == 0)
            {
                break;
            }
        }
    }
}

Then you should create your RadCoverFlow as follows:

<telerik:RadCoverFlow x:Name="coverFlow" ItemsSource="{Binding}">
  <telerik:RadCoverFlow.ItemTemplate>
    <DataTemplate>
      <Image Source="{Binding ImageUrl}" Width="300" Height="225" Stretch="Uniform" telerik:RadCoverFlow.EnableLoadNotification="True" />
    </DataTemplate>
  </telerik:RadCoverFlow.ItemTemplate>
</telerik:RadCoverFlow>