全て展開
すべて折りたたむ前の手順では、C1TileListBox コントロールをアプリケーションに追加しました。この手順では、フォトストリームから画像を表示するコードを追加します。
プログラムでコントロールにデータを追加するには、次の手順に従います。
- ［ページ］を選択して［プロパティ］ウィンドウに移動し、稲妻の［イベント］ボタンをクリックしてイベントを表示します。次に、下にスクロールして、Loaded イベントの横にある領域をダブルクリックします。
これで、コードエディタが開き、Page_Loaded イベントが追加されます。 - 次の imports 文をページの先頭に追加します。
Visual Basic コードの書き方
Visual Basic コードのコピーImports C1.Xaml
Imports System
Imports System.Collections.Generic
Imports System.IO
Imports System.Linq
Imports System.Net
Imports System.Xml.Linq
Imports Windows.Data.Html
Imports Windows.Foundation
Imports Windows.Foundation.Collections
Imports Windows.UI.Popups
Imports Windows.UI.Xaml
Imports Windows.UI.Xaml.Controls
Imports Windows.UI.Xaml.Controls.Primitives
Imports Windows.UI.Xaml.Data
Imports Windows.UI.Xaml.Input
Imports Windows.UI.Xaml.Media
Imports Windows.UI.Xaml.NavigationC# コードの書き方
C# コードのコピーusing C1.Xaml;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net;
using System.Xml.Linq;
using Windows.Data.Html;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation; -
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 FunctionC# コードの書き方
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 PropertyC# コードの書き方
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 ClassC# コードの書き方
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/WinRT XAML の機能について説明します。
関連トピック