现在的位置: 首页 > 综合 > 正文

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

2013年06月14日 ⁄ 综合 ⁄ 共 2955字 ⁄ 字号 评论关闭

使用原生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

 

  

 

抱歉!评论已关闭.