【WP8】简单介绍wp8中原生LongListSelector控件的用法

使用原生LongListSelector的原因：

       LongListSelector最初是Microsoft.Phone.Controls.Toolkit中所提供的一个第三方控件，原作者在做这组控件是时候使用了Microsoft.Phone.Controls这个命名空间，但是微软在WP8的Microsoft.Phone.Controls命名空间下提供了一个名称完全相同的LongListSelector，因此在WP8项目中如果使用Toolkit中的LongListSelector会产生歧义。

 

原生LongListSelector的用法：

     其实这两个LongListSelector在很多地方都有相似之处，但是不同之处也十分重要。下面会边介绍用法别说没一些区别点。

 

     用过Toolkit中LongListSelector的人都知道，LongListSelector最重要的是数据结构，这个可以在附件的代码中看，因为每个项目要求都会不一样因此没什么特别说的。而对于控件的展示来说，最重要的就是GroupHeaderTemplate、ItemTemplate、IsGroupingEnabled、HideEmptyGroups4个属性。其中GroupHeaderTemplate是下图中绿色框部分，而ItemTemplate是黄色框部分。分别定义了分组的key及每组中单个项目的模板，这个和Toolkit中的用法基本是一致的。IsGroupingEnabled这个属性很关键，只有当设置为True时才能显示出这样一种分组的效果。HideEmptyGroups这个属性用来设置是否显示没有项目的分组，通常设置为True。IsGroupingEnabled和HideEmptyGroups两个属性是Toolkit中没有的，需要我们自行设置。

 

         LongListSelector中另一个很重要的部分就是JumpList，就是下图所展示的。对于JumpList用过LongListSelector的都不陌生，是非常实用的功能。在Toolkit中需要对JumpList中每个item的模板进行设置，在原生的LongListSelector中也需要，只不过它们使用了不同的属性。在Toolkit中是GroupItemTemplate属性，而在原生LongListSelector用的是JumpListStyle这个是属性。一个是DataTemplate，另一个是style，这点要注意。通常我们都会让JumpList中的item使用类似grid式的展示方式，在Toolkit中需要对LongListSelector.GroupItemsPanel属性进行设置，而在原生LongListSelector中，需要在JumpListStyle中设置一下LayoutMode属性，设置成Grid即可。在JumpListStyle中设置ItemTemplate属性即可对每一项进行设置。对于没有内容的项，我们通常希望是在外观上给人无法使用的感觉，就像图中绿色框所包含的一样。这个外观效果在Toolkit中不需要专门的设置，但是在原生LongListSelector中却需要我们进行设置。

 

< phone:JumpListItemBackgroundConverter  x:Key ="BackgroundConverter" />

< phone:JumpListItemForegroundConverter  x:Key ="ForegroundConverter" />

        <Style x:Key="JumpList" TargetType="phone:LongListSelector">
            <Setter Property="GridCellSize"  Value="113,113"/>
            <Setter Property="LayoutMode" Value="Grid" /> 
            <Setter Property="ItemTemplate">
                <Setter.Value >
                    <DataTemplate >
                        <Grid>      
                            <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>
                        </Grid>
                    </DataTemplate>          
                </Setter.Value>
            </Setter>
        </Style>

 上面的代码中对ItemTemplate中Border的背景色和Textblock的字体原生做了两个Converter，这两个Converter是SDK中自带的，专门用于展示效果。

  

      值得一提是的，原生的LongListSelector提供了一个ScrollTo方法，可以让我们快速的在列表中跳转到指定的item。这个是要比Toolkit做的好，Toolkit虽然有类似的方法但是并没有实现这个功能。在使用ScrollTo方法时，参数需要是LongListSelector的一个项，在实例代码中可以看到。另外，Toolkit除了LongListSelector外其它控件目前还没有发现与系统原生控件有冲突的地方，也就是说大家还能使用，不过很久不更新了。

      Demo：

 /Files/klkucan/PhoneApp.zip