この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
今回はListViewを使ったサンプルを作ってみました。サンプルは以下のように左側にListView、右側にWebViewを配置して、リストで選択したページをWebViewに表示するだけの簡単なものです。
画面を実装する
まずは新しくプロジェクトを作成してください。テンプレートは「新しいアプリケーション」にします。
作成できたら MainPage.xaml を開いて以下のように実装してください。
<Page
x:Class="SampleListView.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SampleListView"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="350"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ListView x:Name="MyListView" Margin="0,10,0,0"
ItemTemplate="{StaticResource Standard130ItemTemplate}"
SelectionChanged="MyListView_SelectionChanged"/>
<WebView x:Name="MyWebView" Grid.Column="1"/>
</Grid>
</Page>
ListViewのItemTemplateとは
ItemTemplateとはListViewの1行の中のレイアウトを定義したものです。Adobe FlexでいえばItemRenderer、AndroidではArrayAdapterのようなものでしょうか。
サンプルの ItemTemplate プロパティに設定されている Standard130ItemTemplate はCommonフォルダの中にある StandardStyles.xaml の中で定義されています。
StandardStyles.xamlでは以下のようなテンプレートが用意されています。これらのテンプレートはListViewだけでなく、GridViewなどでも利用できます。
Standard130ItemTemplate
Standard250x250ItemTemplate
正方形のテンプレートです。横幅が固定です。概要(Description)を表示できません。
Standard500x130ItemTemplate
Standard80ItemTemplate
長方形のテンプレートです。概要(Description)を表示できません。
StandardSmallIcon300x70ItemTemplate
長方形のテンプレートです。横幅が固定です。画像のサイズが小さめです。
StandardSmallIcon70ItemTemplate
ItemTemplateはListViewのプロパティから変更できます。右の赤枠の部分をクリックしてください。
データモデルを実装する
次にListViewの行毎に代入するデータ型を定義します。プロジェクトにDataModelというフォルダを追加してその中にSampleDataItem.csというファイルを作成して下さい。
このクラスのインスタンスをObservableCollectionオブジェクトに詰めてListViewのItemsSourceプロパティに代入します。
Title, SubTitle, Image, Descriptionはテンプレートが使う情報です。上記のテンプレートであれば共通で使えます。
今回のサンプルではWebViewに表示するページのURLを持たす必要があるのでUrlプロパティを追加しました。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Imaging;
namespace SampleListView.DataModel
{
class SampleDataItem
{
private static Uri _baseUri = new Uri("ms-appx:///");
public SampleDataItem(String title, String subtitle, String imagePath,
String description, String url)
{
this._title = title;
this._subtitle = subtitle;
this._imagePath = imagePath;
this._description = description;
this._url = url;
}
private string _title = string.Empty;
public string Title
{
get { return this._title; }
set { this._title = value; }
}
private string _subtitle = string.Empty;
public string Subtitle
{
get { return this._subtitle; }
set { this._subtitle = value; }
}
private string _description = string.Empty;
public string Description
{
get { return this._description; }
set { this._description = value; }
}
private ImageSource _image = null;
private String _imagePath = null;
public ImageSource Image
{
get
{
if (this._image == null && this._imagePath != null)
{
this._image = new BitmapImage(new Uri(_baseUri, this._imagePath));
}
return this._image;
}
set
{
this._imagePath = null;
this._image = value;
}
}
public void SetImage(String path)
{
this._image = null;
this._imagePath = path;
}
private string _url = string.Empty;
public string Url
{
get { return this._url; }
set { this._url = value; }
}
}
}
ListViewにデータを代入する処理を実装する
次にMainPage.xaml.csを実装します。 起動時にListViewのItemsSourceに代入するデータを生成しています。
protected override void OnNavigatedTo(NavigationEventArgs e)
{
MyListView.ItemsSource = createItems();
}
private ObservableCollection<SampleDataItem> createItems()
{
var items = new ObservableCollection<SampleDataItem>();
items.Add(new SampleDataItem("WordPressでFacebookページを作ろう(1)",
"WordPressを使ったFacebookページ作成と更新:基礎編",
"Assets/Logo.png",
"企業が活用したいソーシャルサービス、Facebook。WordPressを使ってFacebookページを作る方法を紹介します。",
"http://www.atmarkit.co.jp/fwcr/design/tool/fbpress01/01.html"));
items.Add(new SampleDataItem("Scala+Play 2.0でWebアプリ開発入門(1)",
"Play framework 2.0の概要/5つの特徴とScalaで作るための環境構築",
"Assets/Logo.png",
"2.0からScalaに対応したWebアプリ開発の人気軽量フレームワーク「Play」について解説し、Webアプリの作り方を紹介する入門連載。",
"http://www.atmarkit.co.jp/ait/articles/1210/26/news018.html"));
items.Add(new SampleDataItem("【図解】Xcode 4.5の使い方リファレンス超まとめ",
"WinユーザーがiPhoneアプリを作るためのMacの基礎",
"Assets/Logo.png",
"Mac初心者を対象に基本的なOS Xの使い方などをWindowsと比較しながら解説。",
"http://www.atmarkit.co.jp/ait/articles/1212/05/news022.html"));
return items;
}
ListViewの行を選択した際の処理を実装する
ListViewを選択した際の処理です。ListViewを選択した場合のイベントはSelectionChangedイベントです。
SelectedItemプロパティから選択中のアイテムを取得してWebViewのNavigateメソッドの引数にUriオブジェクトを渡しています。
private void MyListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
SampleDataItem item = (SampleDataItem)MyListView.SelectedItem;
MyWebView.Navigate(new Uri(item.Url));
}