Step 2 of 3: Adding Data to the TileListBox
In This Topic
In the last step, you added the C1TileListBox 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:
- Select the Page, navigate to the Properties window, click the lightning bolt Events button to view events, and scroll down and double-click the area next to the Loaded event.
This will open the Code Editor and add the Page_Loaded event.
- Add the following imports statements to the top of the page:
| Visual Basic |
Copy Code
|
Imports C1.Xaml
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Net
Imports System.Xml.Linq
Imports Windows.UI.Popups
Imports Windows.UI.Xaml
Imports Windows.UI.Xaml.Controls
|
| C# |
Copy Code
|
using C1.Xaml;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Xml.Linq;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
|
- Add the following code inside the Page_Loaded event handler:
| Visual Basic |
Copy Code
|
LoadVideos()
|
| C# |
Copy Code
|
LoadVideos();
|
- Add the following code below the Page_Loaded event within the MainPage class:
| Visual Basic |
Copy Code
|
Private Async Function LoadVideos() As Task
Dim youtubeUrl = "https://gdata.youtube.com/feeds/api/videos?q=windows+8&max-results=50"
Dim AtomNS = "http://www.w3.org/2005/Atom"
Dim MediaNS = "http://search.yahoo.com/mrss/"
Dim videos = New List(Of Video)()
Dim client = WebRequest.CreateHttp(New Uri(youtubeUrl))
Dim response = Await client.GetResponseAsync()
Try
#Region "** parse you tube data"
Dim doc = XDocument.Load(response.GetResponseStream())
For Each entry As var In doc.Descendants(XName.[Get]("entry", AtomNS))
Dim title = entry.Element(XName.[Get]("title", AtomNS)).Value
Dim thumbnail = ""
Dim group = entry.Element(XName.[Get]("group", MediaNS))
Dim thumbnails = group.Elements(XName.[Get]("thumbnail", MediaNS))
Dim thumbnailElem = thumbnails.FirstOrDefault()
If thumbnailElem IsNot Nothing Then
thumbnail = thumbnailElem.Attribute("url").Value
End If
Dim alternate = entry.Elements(XName.[Get]("link", AtomNS)).Where(Function(elem) elem.Attribute("rel").Value = "alternate").FirstOrDefault()
Dim link = alternate.Attribute("href").Value
videos.Add(New Video() With { _
Key .Title = title, _
Key .Link = link, _
Key .Thumbnail = thumbnail _
})
Next
#End Region
tileListBox.ItemsSource = videos
loading.Visibility = Visibility.Collapsed
tileListBox.Visibility = Visibility.Visible
Catch
Dim dialog = New MessageDialog("There was an error when attempting to download data from you tube.")
dialog.ShowAsync()
End Try
End Function
|
| C# |
Copy Code
|
private async void LoadVideos()
{
var youtubeUrl = "https://gdata.youtube.com/feeds/api/videos?q=windows+8&max-results=50";
var AtomNS = "http://www.w3.org/2005/Atom";
var MediaNS = "http://search.yahoo.com/mrss/";
var videos = new List<Video>();
var client = WebRequest.CreateHttp(new Uri(youtubeUrl));
var response = await client.GetResponseAsync();
try
{
#region ** parse you tube data
var doc = XDocument.Load(response.GetResponseStream());
foreach (var entry in doc.Descendants(XName.Get("entry", AtomNS)))
{
var title = entry.Element(XName.Get("title", AtomNS)).Value;
var thumbnail = "";
var group = entry.Element(XName.Get("group", MediaNS));
var thumbnails = group.Elements(XName.Get("thumbnail", MediaNS));
var thumbnailElem = thumbnails.FirstOrDefault();
if (thumbnailElem != null)
thumbnail = thumbnailElem.Attribute("url").Value;
var alternate = entry.Elements(XName.Get("link", AtomNS)).Where(elem => elem.Attribute("rel").Value == "alternate").FirstOrDefault();
var link = alternate.Attribute("href").Value;
videos.Add(new Video() { Title = title, Link = link, Thumbnail = thumbnail });
}
#endregion
tileListBox.ItemsSource = videos;
loading.Visibility = Visibility.Collapsed;
tileListBox.Visibility = Visibility.Visible;
}
catch
{
var dialog = new MessageDialog("There was an error when attempting to download data from you tube.");
dialog.ShowAsync();
}
}
|
- The code above pulls images from YouTube and binds the C1TileListBox to the list of videos.
- Add the following code below the code you just added within the MainPage class:
| Visual Basic |
Copy Code
|
Private Sub tileListBox_ItemClick(sender As Object, e As EventArgs)
Dim video = TryCast(TryCast(sender, C1ListBoxItem).Content, Video)
NavigateUrl(video.Link)
End Sub
#Region "** public properties"
Public Property Orientation() As Orientation
Get
Return tileListBox.Orientation
End Get
Set
tileListBox.Orientation = value
End Set
End Property
Public Property ItemWidth() As Double
Get
Return tileListBox.ItemWidth
End Get
Set
tileListBox.ItemWidth = value
End Set
End Property
Public Property ItemHeight() As Double
Get
Return tileListBox.ItemHeight
End Get
Set
tileListBox.ItemHeight = value
End Set
End Property
|
| C# |
Copy Code
|
private void tileListBox_ItemClick(object sender, EventArgs e)
{
var video = (sender as C1ListBoxItem).Content as Video;
NavigateUrl(video.Link);
}
#region ** public properties
public Orientation Orientation
{
get
{
return tileListBox.Orientation;
}
set
{
tileListBox.Orientation = value;
}
}
public double ItemWidth
{
get
{
return tileListBox.ItemWidth;
}
set
{
tileListBox.ItemWidth = value;
}
}
public double ItemHeight
{
get
{
return tileListBox.ItemHeight;
}
set
{
tileListBox.ItemHeight = value;
}
}
|
- Add the following code just below the MainPage class:
| Visual Basic |
Copy Code
|
Public Class Video
Public Property Title() As String
Get
Return m_Title
End Get
Set
m_Title = Value
End Set
End Property
Private m_Title As String
Public Property Thumbnail() As String
Get
Return m_Thumbnail
End Get
Set
m_Thumbnail = Value
End Set
End Property
Private m_Thumbnail As String
Public Property Link() As String
Get
Return m_Link
End Get
Set
m_Link = Value
End Set
End Property
Private m_Link As String
End Class
|
| C# |
Copy Code
|
public class Video
{
public string Title { get; set; }
public string Thumbnail { get; set; }
public string Link { get; set; }
}
|
What You've Accomplished
You have successfully added data to C1TileTileListBox. In the next step, Step 3 of 3: Running the TileListBox Application, you'll examine the TileListBox for UWP features.
See Also
