今回紹介するLongListSelectorはリストの進化版ともいえるコントロールです。
概要の説明だけでも長くなりそうなので、今回は2回に分けて紹介します。
まずはSilverlight Toolkitをインストールします。
(インストール方法解説はこちら)
続いてxmlnsの追加
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
これで導入準備完了。
まずは構成を理解するためにシンプルな形で導入します。
(XAMLに慣れてない方には、これでもシンプルではない気がしますが・・・)
<toolkit:LongListSelector x:Name="longListSelector" ListHeaderTemplate="{StaticResource listHeader}" ListFooterTemplate="{StaticResource listFooter}" IsFlatList="True" > <toolkit:LongListSelector.ItemTemplate> <DataTemplate> <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="3,3,3,0"> <TextBlock Text="{Binding Title}" FontSize="32" Margin="12,-12,12,6" Foreground="White"/> <TextBlock Text="{Binding Price}" Foreground="#FFC01313" HorizontalAlignment="Right"/> <TextBlock Text="{Binding Publish}" Foreground="#FFFDEB73" HorizontalAlignment="Right" /> </StackPanel> </DataTemplate> </toolkit:LongListSelector.ItemTemplate> </toolkit:LongListSelector>
LongListSelectorの定義は上のような感じ。
別途ListHeaderTemplateと ListFooterTempleteが定義されています。
これはリストの上部に表示するヘッダーと下部のフッターを定義したものです。
IsFlatListの定義が無いと上記のサンプルではItemsSourceに渡したコレクションが表示されないので注意。
<phone:PhoneApplicationPage.Resources> <DataTemplate x:Key="listHeader"> <Border Background="{StaticResource PhoneAccentBrush}" Padding="{StaticResource PhoneTouchTargetOverhang}"> <StackPanel Grid.Column="1" VerticalAlignment="Top"> <TextBlock Text="ListHeader" /> <TextBlock Text="ヘッダーを追加できるよ" /> </StackPanel> </Border> </DataTemplate> <DataTemplate x:Key="listFooter"> <Border Padding="{StaticResource PhoneTouchTargetOverhang}" Background="#FF8D2B2B"> <StackPanel Grid.Column="1" VerticalAlignment="Top"> <TextBlock Text="ListFooter" /> <TextBlock Text="フッターも追加できるよ" /> </StackPanel> </Border> </DataTemplate> </phone:PhoneApplicationPage.Resources>
ヘッダー、フッダーの定義はXAML上部に記述します。 XAMLはここまで、続いてC#で表示するデータを作成します。
public class Books { public string Title { get; set; } public string Price { get; set; } public string Publish { get; set; } }
Bookというクラスのコレクションを渡してあげます、
List<Books> source = new List<Books>(); source.Add(new Books() { Title = "Unity入門", Price ="2700", Publish ="SoftBank" }); source.Add(new Books() { Title = "プログラミングWindowsPhone", Price="3800", Publish="日経BP社" }); source.Add(new Books() { Title = "Windows Phone 7 XNA Cookbook", Price="$44.99", Publish="PACK" }); this.longListSelector.ItemsSource = source;
Please give us your valuable comment