【万里征程——Windows App开发】ListView&GridView之添加数据

简介:

ListView采用垂直堆叠得方式显示数据,而GridView则采用水平堆叠得方式。

长相的话嘛,它们都差不多啦。

    <Grid Name="grid1" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ListView x:Name="listView1" SelectionChanged="listView1_SelectionChanged">
            <x:String>Item 1</x:String>
            <x:String>Item 2</x:String>
        </ListView>

        <GridView x:Name="gridView1" SelectionChanged="gridView1_SelectionChanged">
            <x:String>Item 1</x:String>
            <x:String>Item 2</x:String>
        </GridView>
    </Grid>

当然啦,也可以在后台代码上添加哦。我只是为了将它们放在一起比较而已哦,这些代码堆一起肯定是很丑的。

            ListView listView1 = new ListView();
            listView1.Items.Add("Item 1");
            listView1.Items.Add("Item 2");
            listView1.Items.Add("Item 3");
            listView1.SelectionChanged += listView1_SelectionChanged;           
            grid1.Children.Add(listView1);        

            GridView gridView1 = new GridView();
            gridView1.Items.Add("Item 1");
            gridView1.Items.Add("Item 2");
            gridView1.SelectionChanged += gridView1_SelectionChanged;                                                                                                                        
            grid1.Children.Add(gridView1);           

如果只是像上面这样来添加内容会不会比较麻烦呢,我们也可以把这些Item 1、Item 2之类的全部放在List中哟。

            List<String> itemsList = new List<string>();
            itemsList.Add("Item 1");
            itemsList.Add("Item 2");

            ListView listView1 = new ListView();
            listView1.ItemsSource = itemsList;
            listView1.SelectionChanged += listView1_SelectionChanged;

            grid1.Children.Add(listView1);

这样一来所显示的ListView就是两行,非常简陋,完全不能够满足要求。那么我们可以用它的ItemTemplate属性来再里面添加一些东西,如下所示,我们可以在Grid中写一个Image绑定头像,用TextBlock绑定用户的ID,再来一个TextBlock绑定用户的消息,还可以来写边框呀什么的。而这些乱七八糟的Binding啥的,以后我们也会一起讲的哦,现在只要它们是数据绑定就好啦。

    <Page.Resources>
        <CollectionViewSource x:Name="collectionVS" Source="{Binding Items}"/>
    </Page.Resources>

    <Grid Name="grid1" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ListView x:Name="listView1"  ItemsSource="{Binding Source={StaticResource collectionVS}}"
          SelectionChanged="listView1_SelectionChanged">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid>

                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>      
    </Grid>

还可以像下面这样哦,通过WrapGrid来决定这些Item的摆放方式。

这里写图片描述

    <Grid Name="grid1" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ListView VerticalAlignment="Bottom">

            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapGrid Orientation="Vertical" MaximumRowsOrColumns="2"/>
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>

            <Rectangle Height="100" Width="100" Fill="Wheat" />
            <Rectangle Height="100" Width="100" Fill="White" />
            <Rectangle Height="100" Width="100" Fill="Gainsboro" />
            <Rectangle Height="100" Width="100" Fill="Violet" />
            <Rectangle Height="100" Width="100" Fill="DarkBlue" />
            <Rectangle Height="100" Width="100" Fill="RosyBrown" />
            <Rectangle Height="100" Width="100" Fill="SaddleBrown" />
            <Rectangle Height="100" Width="100" Fill="AliceBlue" />
            <Rectangle Height="100" Width="100" Fill="Fuchsia" />
            <Rectangle Height="100" Width="100" Fill="Aqua" />
            <Rectangle Height="100" Width="100" Fill="Tan" />
        </ListView>
    </Grid>

当然啦,对于ListView和GridView而言,知道用户选择了哪一项是很重要的。SelectionMode属性决定了ListView和GridView的选择模式:单个、多个、无、扩展。下面这个函数将选择的项给了selectedItems啦。我们还可以通过IsItemClickEnabled来启用ListView和GridView的点击事件,但是务必要注意将SelectionMode设置为None噢。

private void listView1_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
     selectedItems = (List<object>)e.AddedItems;   
}    

有点晚了,剩下的明天再补上啦,感谢大家的支持,下篇见!

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

目录
相关文章
|
3月前
|
缓存 移动开发 JavaScript
如何优化UniApp开发的App的启动速度?
如何优化UniApp开发的App的启动速度?
726 139
|
3月前
|
移动开发 JavaScript weex
UniApp开发的App在启动速度方面有哪些优势和劣势?
UniApp开发的App在启动速度方面有哪些优势和劣势?
393 137
|
3月前
|
数据采集 JavaScript 前端开发
开发比分App?你缺的不是程序员
开发体育比分App,关键不在代码,而在懂体育、懂数据、懂用户。明确定位、理清需求、选好数据源,再找专业的产品、数据与技术人才协同,才能少走弯路。程序员最后入场,效率最高。
252 154
|
4月前
|
移动开发 小程序 Android开发
基于 uni-app 开发的废品回收类多端应用功能与界面说明
本文将对一款基于 uni-app 开发的废品回收类多端应用,从多端支持范围、核心功能模块及部分界面展示进行客观说明,相关资源信息也将一并呈现。
182 0
|
6月前
|
人工智能 文字识别 小程序
旅游社用什么工具收报名 + 资料?不开发 App 也能自动收集信息
本文探讨了旅游行业中报名信息收集的常见痛点及解决方案,重点介绍了二维码表单工具在提升信息收集效率、简化操作流程方面的优势。通过对比多种工具,分析其适用场景与实际应用逻辑,为一线旅游从业者提供高效、低成本的执行参考。
|
7月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
仓颉语言实战分享,教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等,附完整代码示例。轻松掌握Scroll、List等组件使用技巧,提升HarmonyOS应用开发能力。
|
3月前
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
367 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
3月前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
369 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
6月前
|
Rust 安全 前端开发
Github 轻松斩获30k+ Star,桌面应用开发太丝滑啦,Tauri框架能重塑桌面App开发?别错过,抓紧上车
Tauri 是一个基于 Rust 的开源框架,用于构建轻量级、高性能、安全的跨平台桌面及移动应用。它利用系统 WebView 渲染前端界面,后端由 Rust 编写,具备出色的性能和安全性。相比 Electron,Tauri 应用体积更小、启动更快,且默认权限更安全。它支持 React、Vue、Svelte 等主流前端框架,并提供自动更新、CLI 工具链、资源注入优化等功能,适用于生产力工具、开发者工具、数据分析、AI 应用等多种场景。目前 Tauri 在 GitHub 上已获得超过 30,000 Star,社区活跃,是现代桌面应用开发的理想选择。
796 0

热门文章

最新文章