• 【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

      


  • 相关阅读:
    maven
    Antd@4.x Form的常用方法
    数组排序 js
    链式调用
    react 非登陆页面得公共部分配置方法
    react异常处理
    Field 输入框的bug
    promise的用法
    异步return公共数据方法,
    小程序打开pdf文件
  • 原文地址:https://www.cnblogs.com/klkucan/p/2719891.html
Copyright © 2020-2023  润新知