Windows Phone Toolkit 紹介 その12 LongListSelector(1)

火曜日 , 20, 3月 2012 Leave a comment

 今回紹介する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の定義は上のような感じ。

 別途ListHeaderTemplateListFooterTempleteが定義されています。

 これはリストの上部に表示するヘッダーと下部のフッターを定義したものです。

 

 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)


Please give us your valuable comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です