Win8のListViewとは、iOSのTableViewのことである。
"連絡先"アプリでも使用されている、たくさん行があって、指でフリックするとクルクルとスクロール(kinetic scrollという)をする、あのリストだ。
当然だがこの"ファンシー"なUIは、Windows8/8.1でも存在する。
Windows8/8.1には、さらにGridViewと呼ばれる、似たようなものある。
こちらは文字通り、グリッド上にオブジェクトを配置してグリグリスクロールするものである。
アルバムなどで使われるものだ。
どちらも"モダン"なUIでアプリを作る上で、避けて通れないものだ。
実は、これに昨年12月から着手していたのだが、ドはまりしていたのだ。
理由の一つがこれ。
Standard**ItemTemplateがWindows8.1では廃止
各種書籍やウェッブの紹介資料では、ListViewを使用する際に、"Standard**ItemTemplate"(例えば Standard130ItemTemplate)を使用している。
ところがぎっちょんちょん、これがWindows8.1では使用できず、"could not be resolved"になるのだ。
詳細は、ここにあるが、要は廃止になったのだ。
このため、自分でListView.ItemTemplateを書く必要があるのだ。
では、気を取り直して順番にやっていく。
ListViewを追加
"MainPage.xaml"に以下を追加する。
<ListView x:Name="listview1" ItemsSource="{Binding}" Width="500" VerticalAlignment="Stretch" HorizontalAlignment="Left" CanReorderItems="True" CanDragItems="True">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Width="500" Height="130">
<Border Height="110" Width="110" Margin="10,10,0,10">
<!--<Image Source="/SampleImage.png" Stretch="UniformToFill"/>-->
</Border>
<StackPanel Orientation="Vertical" VerticalAlignment="Top" Margin="0,10,0,0">
<TextBlock Text="{Binding Ttile}" Margin="10,0,0,0" Width="350" Height="20" TextTrimming="WordEllipsis" />
<TextBlock Text="{Binding Summary}" Margin="10,2,0,0" Width="350" Height="14" TextTrimming="WordEllipsis" HorizontalAlignment="Left" FontSize="9" Opacity="0.49"/>
<TextBlock Text="{Binding Body}" Margin="10,2,0,0" Width="350" TextTrimming="WordEllipsis" TextWrapping="Wrap"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>これでListViewが追加される。
ItemsSource="{Binding}"とすることで、表示する各アイテムのソースはC#のソース内で指定(binding)することができる。
また各TextBlockの内容(Text=...で指定している部分)は、そのアイテムのソース内の同名のプロパティとなる。
ちなみにこのListView.ItemTemplateとDataTempleteはここから拝借した。
アイテムになるクラスを追加
"MainPage.xaml.cs"に以下を追加する。
手習い用なので、Summary、Body各プロパティはハードコードだ。
public class testitem
{
public int Number {set; get;}
public string Ttile {set; get;}
public string Summary { set; get; }
public string Body { set; get; }
public testitem()
{
Summary = "this is the test summary.";
Body = "this is the test body.";
}
}
ここで声を大にして注意したいのが、setter/getterの指定だ。
これらのプロパティは表示データとして使用される＝MainPageクラスから呼び出されるので、getterの指定が絶対に必要だ。
さもないと、プロパティの内容がListViewに表示されない。
これが分からなかったばかりに、真っ黒なListViewと2か月ほど格闘するはめになった。
本当に要注意だ。
各アイテムの配列を作成
"MainPage.xaml.cs"に以下を追加する。
これでtestitemのコレクションであるtestitemsが作成される。
ObservableCollectiontestitems; public MainPage()
{
this.InitializeComponent();
//
testitems = new ObservableCollection();
int count;
testitem item;
//
for (count = 0; count < 10; count++)
{
item = new testitem();
item.Number = count;
item.Ttile = string.Format("Item {0, 0:00}", count);
testitems.Add(item);
}
}
最後に、
ListViewのItemSourceにtestitemsをbinding
"MainPage.xaml.cs"に以下を追加
これにて2か月の積み残しが、一件落着。
protected override void OnNavigatedTo(NavigationEventArgs e)
{
listview1.ItemsSource = testitems;
}
