开发者社区> 杰克.陈> 正文

Wp8—LongListSelector控件使用

简介: 原文:Wp8—LongListSelector控件使用               其实从去年后半年起,自己就开始学习windows phone 8 的开发,主要是自己感兴趣同时我也很看好这个系统(现在还是感觉自己认识的有点晚了)。
+关注继续查看
原文: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>
View Code


      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;
View Code

         前台对应的{bing=***}即是对象的属性

 

 

         展示效果图

               

   

 

           最后想说一下,如果有喜欢wp8开发的朋友,请叫上我吧,因为我也一样。目前只是我一个人摸索开发中,中间肯定很累且少不了走弯路,不过我相信以后肯定有更多人参与的,大家一起加油。刚刚创建了一个交流群-103651626

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云镜像站下载gimp镜像
阿里云镜像站下载gimp镜像
6 0
IDEA安装及使用详细教程
IDEA安装及使用详细教程
5 0
最近这个 GitHub 项目,增长有点猛
今天给大家分享一个 GitHub 刷题项目,也是目前我们 Doocs 成员们在积极维护的一个项目。
5 0
一文看懂开源图化框架中的循环设计逻辑!
相信大家在日常工作中,已经精通各种循环逻辑的实现。就拿我来说吧,多年的工作经验,已经让我可以熟练的使用 C++,Python,英语等多种语言,循环多次输出“hello word”。不过大家有没有想过一个这样的问题:如何在一个有向无环图(Directed Acyclic Graph,简称dag)中实现循环呢?
5 0
Tomcat - 安装 & 配置(Windows)
Tomcat - 安装 & 配置(Windows)
8 0
JDK - 安装 & 配置(Windows)
JDK - 安装 & 配置(Windows)
5 0
手撸一款简单高效的线程池(四)
在前几章的内容中,我们给大家介绍了一些 C++线程池中的优化思路和实现方案。这一章中,我们来聊一聊在编程实现过程中,一些工程层面的优化。让我们的代码执行的速度,跟得上自己的思路。
4 0
JSP - 起源、执行过程、运行原理、生命周期
JSP - 起源、执行过程、运行原理、生命周期
6 0
心中有“树”!图文并茂介绍数据结构中常见的树(三)
在前面两篇文章中,我们简要介绍了数据结构中的各种【树】在搜索、数据库等领域的使用场景,希望对大家有所帮助。
11 0
Win系统 - 重装系统(微PE、MSDN镜像)【绝对纯净】
Win系统 - 重装系统(微PE、MSDN镜像)【绝对纯净】
14 0
+关注
杰克.陈
一个安静的程序猿~
10427
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载