ComponentOne UWP Edition
Basic Library Overview / ListBox for UWP / C1TileListBox Quick Start / Step 2 of 3: Adding Data to the TileListBox
In This Topic
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:

  1. 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.

  1. 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;
  1. Add the following code inside the Page_Loaded event handler:
Visual Basic
Copy Code 
LoadVideos()

C#
Copy Code 
LoadVideos();
  1. 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();
            }       
}

 

  1. The code above pulls images from YouTube and binds the C1TileListBox to the list of videos.
  1. 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;
            }
}
  1. 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
Step 3 of 3: Running the TileListBox Application