前の手順では、C1TileListBoxコントロールをアプリケーションに追加しました。この手順では、フォトストリームから画像を表示するコードを追加します。
プログラムでコントロールにデータを追加するには、次の手順に従います。
- ［ページ］を選択して［プロパティ］ウィンドウに移動し、稲妻の［イベント］ボタンをクリックしてイベントを表示します。次に、下にスクロールして、Loaded イベントの横にある領域をダブルクリックします。
これで、コードエディタが開き、Page_Loaded イベントが追加されます。 - 次の imports 文をページの先頭に追加します。
Visual Basic コードの書き方
Visual Basic コードのコピー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# コードの書き方
C# コードのコピー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;
-
Page_Loaded イベントハンドラ内に次のコードを追加します。
Visual Basic コードの書き方
Visual Basic コードのコピーLoadVideos() C# コードの書き方
C# コードのコピーLoadVideos(); -
MainPage クラス内の Page_Loaded イベントの下に次のコードを追加します。
Visual Basic コードの書き方
Visual Basic コードのコピー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# コードの書き方
C# コードのコピー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();
}
} - 上のコードは、YouTube から画像を取得し、C1TileListBox をビデオのリストに連結します。
-
MainPage クラス内で、追加したコードの下に次のコードを追加します。
Visual Basic コードの書き方
Visual Basic コードのコピー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# コードの書き方
C# コードのコピー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;
}
}
-
MainPage クラスの直後に次のコードを追加します。
Visual Basic コードの書き方
Visual Basic コードのコピー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# コードの書き方
C# コードのコピーpublic class Video
{
public string Title { get; set; }
public string Thumbnail { get; set; }
public string Link { get; set; }
}
ここまでの成果
これで、C1TileTileListBox にデータを追加できました。次の「手順3：TileListBox アプリケーションの実行」では、TileListBox for UWP の機能について説明します。