Wp8—LongListSelector控件使用

              其實從去年后半年起，自己就開始學習windows phone 8 的開發，主要是自己感興趣同時我也很看好這個系統（現在還是感覺自己認識的有點晚了）。工作日的話基本很忙，所以當時想到然的認為用晚上時間可以看資料，但是實際到晚上以后已經沒心情看電腦了，有一些日子是強迫自己學習的，可是到現在看來已經忘了很多，當然周末也用上一些了（我認為程序員應該利用周末時間多去外面轉轉，畢竟有時候周末還加班什么的，而不是依舊盯着電腦玩游戲，這樣的話不僅對身體而言，還有對自己緊張的大腦都起不了真正休息的效果。）。不過還好應該算有些進步了吧，如果順利的話，過段時間就能發布自己的第一個window phone8 app了。當然這其中也學習一些新的知識，我想有時間慢慢總結寫出了，這樣不僅對自己是個鞏固，對想學習的人希望也是個幫助。

             windows phone 系統界面，是扁平化的磁貼 組成，個性十足，個人超級喜歡（我順便也把自己的博客主題風格也改成了簡潔版，希望大家吐槽哦）。 其中用來顯示列表信息的控件有listbox和LongListSelector兩個，其中longlistselector控件功能強大，展示效果也很符合windows phone 風格。所以我想最先拿出來練練手(現學現賣)，下面是就着自己做的一個實例展開的。

 

 

　　xmal代碼：

 <phone:LongListSelector x:Name="LLSContacts" Margin="480,20,480,0"  Width="480"  LayoutMode="List" IsGroupingEnabled="true" HideEmptyGroups ="true" Padding="0,0,0,10" >
                            <!--head-->
                            <phone:LongListSelector.GroupHeaderTemplate>
                                <DataTemplate>
                                    <StackPanel Margin="12,0,0,0" Width="432" Height="90" >
                                        <Border Background="Transparent" Margin="0" Padding="0,0,0,10"  >
                                            <Border Background="#008AFF" BorderBrush="#008AFF" BorderThickness="2" Width="80" Height="80" HorizontalAlignment="Left" Margin="0" >
                                                <TextBlock Text="{Binding Key}" FontSize="48" Padding="6" 
            FontFamily="{StaticResource PhoneFontFamilySemiLight}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Foreground="White"/>
                                            </Border>
                                        </Border>
                                    </StackPanel>
                                </DataTemplate>
                            </phone:LongListSelector.GroupHeaderTemplate>
                            <!--body-->
                            <phone:LongListSelector.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal" Margin="12,0,0,0" Height="90" Width="432" >
                                <!--用圖像替換矩形-->
                                <!--<Image  Width="80" Height="80" Source=""/>-->
                                        <Border Width="80" Height="80" CornerRadius="0">
                                            
                                            <Border.Background>
                                                <ImageBrush Stretch="Fill"  ImageSource="{Binding Images}"/>
                                            </Border.Background>
                                        </Border>
                                        <StackPanel Width="311" Margin="8,0,0,0" >
                                            <TextBlock Text="{Binding DisplayName}" TextWrapping="Wrap" Margin="10,5,10,0" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeLarge}" Foreground="#FF555555" />
                                            <TextBlock Text="{Binding PhoneNumbers}" TextWrapping="Wrap" Margin="10,5,10,0" Style="{StaticResource PhoneTextSubtleStyle}" Foreground="#FF9B9A9A" />
                                        </StackPanel>
                            </StackPanel>
                        </DataTemplate>
                            </phone:LongListSelector.ItemTemplate>
                            <phone:LongListSelector.JumpListStyle>
                                <Style   TargetType="phone:LongListSelector">
                                    <Setter Property="GridCellSize"  Value="113,113"/>
                                    <Setter Property="LayoutMode" Value="Grid" />
                                    <Setter Property="ItemTemplate">

                                        <Setter.Value>
                                            <DataTemplate>

                                                <Border Background="{Binding Converter={StaticResource BackgroundConverter}}" Width="113" Height="113" Margin="6" >
                                                    <TextBlock Text="{Binding Key}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" FontSize="48" Padding="6" 
               Foreground="{Binding Converter={StaticResource ForegroundConverter}}" VerticalAlignment="Center"/>
                                                </Border>
                                            </DataTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </phone:LongListSelector.JumpListStyle>
                        </phone:LongListSelector>

      1.GroupHeaderTemplate：該模板字面上理解為組頭部模板，也就是顯示列表內容分組的頁眉，通常默認列是以你設定分組字段的手字母為依據進行分組，如果是漢字默認是單詞拼音的第一個字母，功能上可以理解為組的節點吧。

      2.ItemTemplate：列表項模板，是LongListSelector控件最基本的，里面就是顯示動態列表項單行，根據傳進來的集合顯示一嘩啦子。

      3.JumpListStyle：設置跳轉列表的樣式，在里面設置跳轉后節點界面的內容和風格。常用情況是呈現分組選項頁，也就是點分組頁眉內容跳轉到一個只有組頭部想內容的頁面，用戶可選擇點擊然后定位到列表該分組的地方，方便實用。

      4.StaticResource:靜態資源，實際上是為XAML 屬性特性提供值的標簽擴展，我們可以理解為綁定標簽屬性的一種語法把。比如 FontFamily="{StaticResource PhoneFontFamilySemiLight}" ，字體為系統內定動態屬性，我啥樣你就啥樣。

      5.還有個地方設置標簽屬性特殊點，在jumplistStyle中你們可以看到這個Background="{Binding Converter={StaticResource BackgroundConverter}}"，這是實際上是設置我們自己定義的樣式，對應的resource代碼如下

<phone:PhoneApplicationPage.Resources>
        <phone:JumpListItemBackgroundConverter x:Key="BackgroundConverter" Enabled="#FF008AFF"/>
        <phone:JumpListItemForegroundConverter x:Key="ForegroundConverter" Enabled="White"/>
    </phone:PhoneApplicationPage.Resources>

前台的代碼即是這樣，其他也沒什么特殊，相信沒學過xaml的人也看得懂吧，

       還有一點要注意:如果要實現今天所展示功能，請在LongListSelector中加上 IsGroupingEnabled=“true”和 HideEmptyGroup="true"這兩個屬性。因為默認情況下不帶有的

 

 

 

          后台代碼

          后台我直接綁定一個集合到控件既可

 List<AlphaKeyGroup<MyContacts>> DataSource = AlphaKeyGroup<MyContacts>.CreateGroups(ListContact,
               System.Threading.Thread.CurrentThread.CurrentUICulture,
               (MyContacts s) => { return s.DisplayName; }, true);

                LLSContacts.ItemsSource = DataSource;

         前台對應的{bing=***}即是對象的屬性

 

 

         展示效果圖

               

   

 

           最后想說一下，如果有喜歡wp8開發的朋友，請叫上我吧，因為我也一樣。目前只是我一個人摸索開發中，中間肯定很累且少不了走彎路，不過我相信以后肯定有更多人參與的，大家一起加油。