【万里征程——Windows App开发】ListView&GridView之分组

最新推荐文章于 2024-04-22 09:38:56 发布
最新推荐文章于 2024-04-22 09:38:56 发布
阅读量7k 收藏 1
点赞数 5
分类专栏： Windows 10 Windows App开发 文章标签： 数据 windows 控件 app开发 添加
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nomasp/article/details/44926753
版权

本文承接【万里征程——Windows App开发】ListView&GridView之添加数据。

在上一篇中我们已经了解了怎样将数据绑定到ListView或GridView，但既然要用到这两个控件往往是因为数据繁多，那么几乎就不可避免的要让其能够分组。我们所绑定的数据源可能是项列表，其中的每个项甚至还有其自己的项，那么问题就来了。

一时不会也想不出什么宏伟的例子，就做一个简单的闹钟的时间表的ListView和GridView吧。那么先在项目中添加一个类，最好在Shared下。内容都是很简易的，闹钟的标题、时间、备注等，为了增加一级目录就加了一个AlarmMode，就算作学习和生活吧，学习生活两不误……

public class Alarm
{
    public string Title { get; set; }
    public DateTime AlarmClockTime { get; set; }
    public string Description { get; set; }
    public string AlarmMode { get; set; }
}
public class AlarmMode
{
   public AlarmMode()
   {
       alarmMode = new ObservableCollection<Alarm>();
   }
   public string Name { get; set; }
   public ObservableCollection<Alarm> alarmMode { get; private set; }
}

首先嘛，先来定义一个全局的时间，然后在页面加载时加载两个函数（将在下一步定义）。

    DateTime globalTime;
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    DateTime.TryParse("1/1/2115", out globalTime);
    AddAlarm();
    AddAlarmMode();
}

一大波数据正在靠近！

        private void AddAlarm()
        {
            List<Alarm> listAlarm = new List<Alarm>();

            listAlarm.Add(new Alarm()
            {
                Title = "Alarm1",
                Description = "First Alarm",
                AlarmClockTime = globalTime.AddHours(1),
                AlarmMode = "Alarm In Life"
            });
            listAlarm.Add(new Alarm()
            {
                Title = "Alarm2",
                Description = "Second Alarm",
                AlarmClockTime = globalTime.AddHours(11),
                AlarmMode = "Alarm In Life"
            });
            listAlarm.Add(new Alarm()
            {
                Title = "Alarm3",
                Description = "Third Alarm",
                AlarmClockTime = globalTime.AddDays(1),
                AlarmMode = "Alarm In Life"
            });

            listAlarm.Add(new Alarm()
            {
                Title = "Alarm1",
                Description = "First Alarm",
                AlarmClockTime = globalTime.AddHours(12),
                AlarmMode = "Alarm In Study"
            });
            listAlarm.Add(new Alarm()
            {
                Title = "Alarm2",
                Description = "Second Alarm",
                AlarmClockTime = globalTime.AddHours(15),
                AlarmMode = "Alarm In Study"
            });
            listAlarm.Add(new Alarm()
            {
                Title = "Alarm3",
                Description = "Third Alarm",
                AlarmClockTime = globalTime.AddMonths(1),
                AlarmMode = "Alarm In Study"
            });

            ar alarmSetting = from ala in listAlarm
                               group ala
                               by ala.AlarmMode
                               into alaSetting
                               orderby alaSetting.Key
                               select alaSetting;
            collectionVSAlarm.Source = alarmSetting;
        }

        private void AddAlarmMode()
        {
            List<AlarmMode> listAlarmMode = new List<AlarmMode>();

            AlarmMode am1 = new AlarmMode();
            am1.Name = "Alarm In Life";
            am1.alarmMode.Add(new Alarm()
            {
                Title = "Alarm1",
                Description = "First Alarm",
                AlarmClockTime = globalTime.AddHours(1),
            });
            am1.alarmMode.Add(new Alarm()
            {

                Title = "Alarm2",
                Description = "Second Alarm",
                AlarmClockTime = globalTime.AddHours(11),
            });
            am1.alarmMode.Add(new Alarm()
            {
                Title = "Alarm3",
                Description = "Third Alarm",
                AlarmClockTime = globalTime.AddDays(1),
            });
            listAlarmMode.Add(am1);

            AlarmMode am2 = new AlarmMode();
            am2.Name = "Alarm In Study";
            am2.alarmMode.Add(new Alarm()
            {
                Title = "Alarm1",
                Description = "First Alarm",
                AlarmClockTime = globalTime.AddHours(12),
            });
            am2.alarmMode.Add(new Alarm()
            {
                Title = "Alarm2",
                Description = "Second Alarm",
                AlarmClockTime = globalTime.AddHours(15),
            });
            am2.alarmMode.Add(new Alarm()
            {
                Title = "Alarm3",
                Description = "Third Alarm",
                AlarmClockTime = globalTime.AddMonths(1),
            });
            listAlarmMode.Add(am2);

            collectionVSAlarmMode.Source = listAlarmMode;
        }

这些数据都是乱七八糟啦，大家凑合着看啦。这是两个函数，数据我都是用List<>来定义的，将数据通过Add函数添加到listAlarm和listAlarmMode中即可。最后再从listAlarm中根据AlarmMode挑出数据到alaSetting，同时还要根据Key值进行排序最后选出并连接到collectionVSAlarm的Source属性中。这个是需要在MainPage.xaml中定义的哦，就像

    <UserControl.Resources>
        <CollectionViewSource x:Name="collectionVSAlarm"     IsSourceGrouped="True"/>
        <CollectionViewSource x:Name="collectionVSAlarmMode"     IsSourceGrouped="True" ItemsPath="alarmMode"/>
    </UserControl.Resources>

然后我们还需要创建一个ListGridGroupStyle类来继承GroupStyleSelector，重载它的SelectGroupStyleCore方法，并且返回ListGridGroupStyleResource资源，这个资源在博客后文中有定义，其定义在App.xaml中。相应的代码如下咯：

    public class ListGridGroupStyle : GroupStyleSelector
    {
        protected override GroupStyle SelectGroupStyleCore(object group, uint level)
        {
            return (GroupStyle)App.Current.Resources["ListGridGroupStyleResource"];
        }
    }

方法重载好之后就需要在前面的UserControl.Resources中加上以下这条代码啦。

    <local:ListGridGroupStyle x:Key="ListGridGroupStyleResource"/>

然后我们来一系列的基本样式到App.xaml中就好啦，关于资源文件的使用我们在后面会系统的来学习。这里的DataTemplate和GroupStyle都在资源字典中，前者是Template模板，后者是Style风格。内容的排版大家都随意啦，记得设置好Key值。

    <Application.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="dataTemplateListView">
                <StackPanel Width="700" Margin="10">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Title}" FontWeight="Bold" Margin="12"/>
                        <TextBlock Text="{Binding AlarmClockTime}" TextWrapping="NoWrap" Margin="12"/>
                        <TextBlock Text="{Binding Description}" TextWrapping="NoWrap" Margin="12"/>
                    </StackPanel>

                </StackPanel>
            </DataTemplate>

            <GroupStyle x:Key="ListGridGroupStyleResource">
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <Grid Background="LightGray"  >
                            <TextBlock Text='{Binding Key}' Foreground="CornflowerBlue" Margin="12"  />
                        </Grid>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
            </GroupStyle>
        </ResourceDictionary>
    </Application.Resources>

那么这些各种资源都定义好了之后就在MainPage.xaml把下面这些敲进去。各种资源的调用在这里尤其需要注意，其实对于稍微复杂一丁点的程序而言，名称就已经变得让人崩溃了。所以拥有一个良好的命名习惯很重要。

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition Width="auto"/>
        </Grid.ColumnDefinitions>

        <GridView Grid.Column="0" ItemsSource="{Binding Source={StaticResource collectionVSAlarmMode}}"        
                  Margin="12,120,12,12" MaxHeight="600" >
            <GridView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Margin="18">
                        <TextBlock Text="{Binding Title}" FontWeight="ExtraBold"   />
                        <TextBlock Text="{Binding AlarmClockTime}"  FontWeight="Light" TextWrapping="NoWrap"  />
                        <TextBlock Text="{Binding Description}" TextWrapping="NoWrap"  />
                    </StackPanel>
                </DataTemplate>
            </GridView.ItemTemplate>
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <ItemsWrapGrid MaximumRowsOrColumns="2"/>
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>

            <GridView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <Grid Background="Green" Margin="12">
                                <TextBlock Text='{Binding Name}' 
                                           Foreground="Bisque" Margin="36"/>
                            </Grid>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>    
                </GroupStyle>
            </GridView.GroupStyle>
        </GridView>

        <ListView Grid.Column="1" ItemsSource="{Binding Source={StaticResource collectionVSAlarm}}"     
                  ItemTemplate="{StaticResource dataTemplateListView}"    
                  GroupStyleSelector="{StaticResource ListGridGroupStyleResource}"          
                  Margin="120" />       
    </Grid>

这里写图片描述

我这写的真是太丑了哎，做App的时候可得好好调调了，为了不伤了大家的眼睛最后我还是来张漂亮的壁纸吧……下一篇再见咯！

这里写图片描述

为使本文得到斧正和提问，转载请注明出处：
http://blog.csdn.net/nomasp

nomasp
关注
  • 5
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
gridview分组
逗逼程序员的成长之路
12-30 1789
近段时间项目要求gridview分组 大概是这样的效果 然后在网上找到一个开源的项目，叫StickyGridHeadersGridView，超级好用，效果类似android自带的联系人 StickyGridHeadersGridView的adapter也是继承的BaseAdapter，不过要求实现StickyGridHeadersSimpleAdapter这个接口 然后
Android开发之ListView、GridView 详解及示例代码
01-04
ListView与GridView是Android开发中的常用控件，它们和Adapter配合使用能够实现很多界面效果。下面分别以实例说明ListView、GridView的用法。  1.ListView的Android开发实例  ListView 是android开发中最常用的...
listview嵌gridview，并实现grid元素部分显示以及点击展开与折叠
11-02
有时我们需要用GridView显示目录列表，有时甚至是二级的，即listview每一个item里面又各自嵌入一个gridview，但是当二级目录（数据条目）的数量过多时，界面会比较臃肿，这时我们就想要有类似展开与折叠的效果，作者采用的策略是数据分段的分别显示，其中对于显示边界（处于限制显示数目的特定位置）的控件要有数据的动态更新和点击判断操作。
【万里征程——Windows App开发】ListView&GridView之分组
weixin_34194317的博客
04-07 119
本文承接【万里征程——Windows App开发】ListView&GridView之添加数据。 在上一篇中我们已经了解了怎样将数据绑定到ListView或GridView，但既然要用到这两个控件往往是因为数据繁多，那么几乎就不可避免的要让其能够分组。我们所绑定的数据源可能是项列表，其中的每个项甚至还有其自己的项，那么问题就来...
WPF应用实战开发指南 - 如何实现DataGrid分组显示及嵌套明细展示效果
最新发布
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
04-22 495
本文主要介绍在WPF应用中如何实现DataGrid的分组显示以及嵌套明细展示效果，欢迎下载一些三方组件体验~
能分组的GridView
weixin_34130389的博客
10-05 152
　　有天在想工作上的事的时候，看着.net原有的DataGridView，想起以前我写过的一篇文章，总结了一个好的Gird控件应该具备哪些功能，在那里我提及到了分组功能，就像jqGrid那样， 　　其实这样的显示型式很常见，就在平时邮箱的邮件列表就是按这种分组型式显示的，按今天、昨天、上周之类，在购物网站的历史订单处也可以看见这种Grid表的身影。但是原有的DataGridView并不支持这...
GridView分组显示StickyGridHeaders
Android唐浮的专栏
03-17 738
github：https://github.com/TonicArtos/StickyGridHeaders 参考：http://blog.csdn.net/xiaanming/article/details/20481185 有下拉刷新Demo：https://download.csdn.net/download/zczcyc0201/6412097 备注：StickyGridHea...
ListView&GridView万能适配器&万能ViewHold
07-20
总之，“ListView&GridView万能适配器&万能ViewHold”是一个实用的工具，它帮助开发者快速构建列表和网格布局，降低开发复杂度，提高代码复用。通过理解其核心原理和使用方式，开发者可以更高效地处理Android应用中...
Android之ScrollView嵌套ListView和GridView冲突的解决方法
01-05
核心解决方案： 重写ListView或者GridView的OnMesure 方法。 代码如下:public class MyListView extends ListView { public MyListView(Context context) { super(context); } public MyListView(Context ...
关于Android中ListView嵌套GridView的问题
01-04
在Android开发中，遇到一个问题，是ListView嵌套GridView，需要点击整个ListView的Item进行跳转。但是在点击GridView区域时无法进行页面的跳转。这是因为GridView获得了焦点。导致点击无法跳转。 解决方法就是： 1....
【WinForm+DevExpress】GridView设置自定义分组
早起吃虫的博客
04-08 4770
效果图 拖拽orderPrice这一列到黄色区域部分，可以出现图二的效果，分组的规则是orderPrice按照0-10，11-20.....来分组的 实现： 第一步：添加一个GridControl，设置数据源，为GridView添加CustomColumnGroup事件 private void gridView1_CustomColumnGroup(object sender...
Winform中GridView分组排序功能实现方法
09-04
主要介绍了Winform中GridView分组排序功能实现方法,以实例形式详细说明了分组排序的实现方法,并附带完整的DBHelp类代码,是非常实用的技巧,需要的朋友可以参考下
点击ListView的Item实现隐藏与展开
04-11
android类型的listview的item，长按item的时候的时候，展开item，显示里面的内容，再点击的时候就隐藏起来了。
Android GridView 多标题分组显示,上下拉刷新,convertview可重用
10-17
Android GridView 多标题分组显示,上下拉刷新,convertview可重用 效率高，不卡
[WPF] WPF学习分组、对齐、排序、序列化和常用功能
07-29
[WPF] WPF学习分组、对齐、排序、序列化和常用功能
Android下拉刷新以及GridView使用方法详解
01-05
GridView是类似于ListView的控件，只是GridView可以使用多个列来呈现内容，而ListView是以行为单位，所以用法上是差不多的。 主布局文件，因为要做下拉刷新，所以加了一个ProgressBar，GridView的numColumns属性是指每一行有多少列 <RelativeLayout xmlns:android=http://schemas.android.com/apk/res/android xmlns:tools=http://schemas.android.com/tools android:layout_width=match_pare
[UWP控件备忘录]ListView
六兆煮橙不会写代码
08-30 8501
UWP控件备忘录 - ListView
Flutter学习笔记：GridView实现分组显示效果
鲨鱼不会飞的博客
06-04 7379
前言部分 近期继续探索flutter的相关内容，这次介绍的控件是c，是使用率很高的的控件。以前我只是常规的使用其基本的用法，所以也没有做笔记，毕竟flutter中文网上还是有介绍的。 今天的需求稍微不同，需要通过GridView来显示一个列表。但是这个列表还需要有一个额外的功能就是分组。如果以前用Android实现的话，我们通常是使用RecyclerView来实现，可以通过多类型的ViewHol...
UWP ListView添加分割线
weixin_30836759的博客
06-13 140
先看效果： 我并没有找到有设置ListView分割线的属性 下面是一个比较简单的实现，如果有同学有更好的实现，欢迎留言，让我们共同进步。我的叙述不一定准确 实现的方法就是在DataTemplate里包一个Border 1、首先自定义一个UserControl来实现布局，文件名为ItemView.xaml，代码如下 xaml代码 1 <UserControl 2...
Android开发（十三）——全屏滚动与listview
05-25
在Android应用开发过程中，有时候我们需要实现全屏滚动的效果，或者在滚动页面中嵌入ListView等组件。下面就来介绍一下如何实现这些效果。 一、全屏滚动 实现全屏滚动需要用到Android系统提供的ScrollView组件。ScrollView可以包含多个子视图，并且可以在垂直方向上进行滚动。下面是一个简单的例子： ``` <ScrollView android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="这是第一行"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="这是第二行"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="这是第三行"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="这是第四行"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="这是第五行"/> </LinearLayout> </ScrollView> ``` 上面的代码中，我们将ScrollView作为根布局，然后在ScrollView内部添加了一个垂直方向的LinearLayout，这个LinearLayout包含了多个TextView，每个TextView显示一行文本。运行这个应用，可以看到整个页面可以在垂直方向上滚动。 二、在滚动页面中嵌入ListView 有时候我们需要在滚动页面中嵌入ListView，这时候可以使用Android系统提供的NestedScrollView组件。NestedScrollView是ScrollView的子类，可以包含多个子视图，并且可以在垂直方向上进行滚动。和ScrollView不同的是，NestedScrollView可以嵌套其他可滚动的组件，例如ListView等。 下面是一个简单的例子： ``` <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="这是第一行"/> <ListView android:layout_width="match_parent" android:layout_height="wrap_content" android:divider="@null" android:dividerHeight="0dp" android:scrollbars="none"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="这是第三行"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="这是第四行"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="这是第五行"/> </LinearLayout> </android.support.v4.widget.NestedScrollView> ``` 上面的代码中，我们将NestedScrollView作为根布局，然后在NestedScrollView内部添加了一个垂直方向的LinearLayout。这个LinearLayout包含了多个TextView和一个ListView。由于ListView也可以滚动，所以我们需要将它的滚动条隐藏掉，然后就可以在滚动页面中嵌入ListView了。 以上就是Android开发中如何实现全屏滚动和在滚动页面中嵌入ListView的方法。希望对你有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值