What
You've AccomplishedIn the last step, you added the C1ListBox control to the application. In this step, you will add code to display images from a photo stream.
Complete the following steps to add data to the control programmatically:
1. Right-click the Window and select View Code to switch to the Code Editor.
2. Add the following imports statements to the top of the page:
Imports System.Linq
Imports System.Windows.Controls
Imports System.Windows
Imports System.Collections.Generic
Imports System.Net
Imports System.Xml.Linq
Imports System
Imports C1.WPF
•C#
using System.Linq;
using System.Windows.Controls;
using System.Windows;
using System.Collections.Generic;
using System.Net;
using System.Xml.Linq;
using System;
using C1.WPF;
3. Add the following code inside the initial event handler:
DataContext = Enumerable.Range(0, 100)
AddHandler Loaded, AddressOf ListBoxSample_Loaded
•C#
DataContext = Enumerable.Range(0, 100);
Loaded += new System.Windows.RoutedEventHandler(ListBoxSample_Loaded);
4. Add the following code below within the MainWindow class:
Private Sub ListBoxSample_Loaded(sender As Object, e As RoutedEventArgs)
LoadPhotos()
End Sub
Private Sub LoadPhotos()
Dim flickrUrl = "http://api.flickr.com/services/feeds/photos_public.gne"
Dim AtomNS = "http://www.w3.org/2005/Atom"
loading.Visibility = Visibility.Visible
retry.Visibility = Visibility.Collapsed
Dim photos = New List(Of Photo)()
Dim client = New WebClient()
AddHandler client.OpenReadCompleted, Function(s, e)
Try
'#Region "** parse flickr data"
Dim doc = XDocument.Load(e.Result)
For Each entry In doc.Descendants(XName.[Get]("entry", AtomNS))
Dim title = entry.Element(XName.[Get]("title", AtomNS)).Value
Dim enclosure = entry.Elements(XName.[Get]("link", AtomNS)).Where(Function(elem) elem.Attribute("rel").Value = "enclosure").FirstOrDefault()
Dim contentUri = enclosure.Attribute("href").Value
photos.Add(New Photo() With { _
.Title = title, _
.Content = contentUri, _
.Thumbnail = contentUri.Replace("_b", "_m") _
})
Next
'#End Region
listBox.ItemsSource = photos
loading.Visibility = Visibility.Collapsed
listBox.Visibility = Visibility.Visible
retry.Visibility = Visibility.Collapsed
Catch
MessageBox.Show("There was an error when attempting to download data from Flickr.")
listBox.Visibility = Visibility.Collapsed loading.Visibility = Visibility.Collapsed
retry.Visibility = Visibility.Visible
End Try
End Function
client.OpenReadAsync(New Uri(flickrUrl))
End Sub
Private Sub Retry_Click(sender As Object, e As RoutedEventArgs)
LoadPhotos()
End Sub
#Region "** public properties"
Public Property Orientation() As Orientation
Get
Return listBox.Orientation
End Get
Set(value As Orientation)
listBox.Orientation = value
End Set
End Property
Public Property ItemWidth() As Double
Get
Return listBox.ItemWidth
End Get
Set(value As Double)
listBox.ItemWidth = value
End Set
End Property
Public Property ItemHeight() As Double
Get
Return listBox.ItemHeight
End Get
Set(value As Double)
listBox.ItemHeight = value
End Set
End Property
Public Property ZoomMode() As ZoomMode
Get
Return listBox.ZoomMode
End Get
Set(value As ZoomMode)
listBox.ZoomMode = value
End Set
End Property
#End Region
•C#
void ListBoxSample_Loaded(object sender, RoutedEventArgs e)
{
LoadPhotos();
}
private void LoadPhotos()
{
var flickrUrl = "http://api.flickr.com/services/feeds/photos_public.gne";
var AtomNS = "http://www.w3.org/2005/Atom";
loading.Visibility = Visibility.Visible;
retry.Visibility = Visibility.Collapsed;
var photos = new List<Photo>();
var client = new WebClient();
client.OpenReadCompleted += (s, e) =>
{
try
{
#region ** parse flickr data
var doc = XDocument.Load(e.Result);
foreach (var entry in doc.Descendants(XName.Get("entry", AtomNS)))
{
var title = entry.Element(XName.Get("title", AtomNS)).Value;
var enclosure = entry.Elements(XName.Get("link", AtomNS)).Where(elem => elem.Attribute("rel").Value == "enclosure").FirstOrDefault();
var contentUri = enclosure.Attribute("href").Value;
photos.Add(new Photo() { Title = title, Content = contentUri, Thumbnail = contentUri.Replace("_b", "_m") });
}
#endregion
listBox.ItemsSource = photos;
loading.Visibility = Visibility.Collapsed;
listBox.Visibility = Visibility.Visible;
retry.Visibility = Visibility.Collapsed;
}
catch
{
MessageBox.Show("There was an error when attempting to download data from Flickr.");
listBox.Visibility = Visibility.Collapsed;
loading.Visibility = Visibility.Collapsed;
retry.Visibility = Visibility.Visible;
}
};
client.OpenReadAsync(new Uri(flickrUrl));
}
private void Retry_Click(object sender, RoutedEventArgs e)
{
LoadPhotos();
}
#region ** public properties
public Orientation Orientation
{
get
{
return listBox.Orientation;
}
set
{
listBox.Orientation = value;
}
}
public double ItemWidth
{
get
{
return listBox.ItemWidth;
}
set
{
listBox.ItemWidth = value;
}
}
public double ItemHeight
{
get
{
return listBox.ItemHeight;
}
set
{
listBox.ItemHeight = value;
}
}
public ZoomMode ZoomMode
{
get
{
return listBox.ZoomMode;
}
set
{
listBox.ZoomMode = value;
}
}
#endregion
5. The code above pulls images from Flickr's public photo stream and binds the C1ListBox to the list of images.
6. Add the following code just below the MainPage class:
Public Class Photo
Public Property Title() As String
Get
Return m_Title
End Get
Set(value As String)
m_Title = Value
End Set
End Property
Private m_Title As String
Public Property Thumbnail() As String
Get
Return m_Thumbnail
End Get
Set(value As String)
m_Thumbnail = Value
End Set
End Property
Private m_Thumbnail As String
Public Property Content() As String
Get
Return m_Content
End Get
Set(value As String)
m_Content = Value
End Set
End Property
Private m_Content As String
End Class
•C#
public class Photo
{
public string Title { get; set; }
public string Thumbnail { get; set; }
public string Content { get; set; }
}
What
You've Accomplished
You have successfully added data to C1TileListBox. In the next step, Step 3 of 3: Running the ListBox Application, you'll examine the ListBox for WPF features.