眠るシーラカンスと水底のプログラマー

　今回紹介するLongListSelectorはリストの進化版ともいえるコントロールです。

　概要の説明だけでも長くなりそうなので、今回は2回に分けて紹介します。

導入

　まずはSilverlight Toolkitをインストールします。

　(インストール方法解説はこちら)

　続いてｘｍｌnsの追加

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;

サンプルをダウンロードする(SDK7.1)

Tweet