需要展示列表项,从https://github.com/jdscodelab/File-Manager-UI-Wpf这个项目,只有前端UI。 复用了其文件内容列表
 
主要源码:

<StackPanel Orientation="Vertical">
<Button Style="{DynamicResource ButtonStyle1}">
<Button.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="140"/>
<ColumnDefinition Width="120"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Image Margin="5,0,0,0" Width="50" Stretch="Uniform" Source="/assets/folder.png" HorizontalAlignment="Left"/>
<TextBlock Margin="5,0,0,0" Text="Collection 1" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" FontWeight="Bold" Foreground="LightSlateGray"/>
</StackPanel>
<TextBlock Grid.Column="1" Text="21 Items" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
<TextBlock Grid.Column="2" Text="Jan 3, 2019" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
<TextBlock Grid.Column="3" Text="15 Gb" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
</Grid>
</Button.Content>
</Button>
<Button Style="{DynamicResource ButtonStyle1}">
<Button.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="140"/>
<ColumnDefinition Width="120"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Image Margin="5,0,0,0" Width="50" Stretch="Uniform" Source="/assets/folder.png" HorizontalAlignment="Left"/>
<TextBlock Margin="5,0,0,0" Text="Collection 2" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" FontWeight="Bold" Foreground="LightSlateGray"/>
</StackPanel>
<TextBlock Grid.Column="1" Text="40 Items" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
<TextBlock Grid.Column="2" Text="Jan 10, 2020" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
<TextBlock Grid.Column="3" Text="45 Gb" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
</Grid>
</Button.Content>
</Button>
<Button Style="{DynamicResource ButtonStyle1}">
<Button.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="140"/>
<ColumnDefinition Width="120"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Image Margin="5,0,0,0" Width="50" Stretch="Uniform" Source="/assets/folder.png" HorizontalAlignment="Left"/>
<TextBlock Margin="5,0,0,0" Text="Collection 3" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" FontWeight="Bold" Foreground="LightSlateGray"/>
</StackPanel>
<TextBlock Grid.Column="1" Text="90 Items" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
<TextBlock Grid.Column="2" Text="Mar 10, 2020" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
<TextBlock Grid.Column="3" Text="82 Gb" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
</Grid>
</Button.Content>
</Button>
<Button Style="{DynamicResource ButtonStyle1}">
<Button.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="140"/>
<ColumnDefinition Width="120"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Image Margin="5,0,0,0" Width="50" Stretch="Uniform" Source="/assets/Video.png" HorizontalAlignment="Left"/>
<TextBlock Margin="5,0,0,0" Text="File Manager UI Part-1 by Jd's Code Lab" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" FontWeight="Bold" Foreground="LightSlateGray"/>
</StackPanel>
<TextBlock Grid.Column="1" Text="1 Item" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
<TextBlock Grid.Column="2" Text="Jun 14, 2020" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
<TextBlock Grid.Column="3" Text="1 Gb" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
</Grid>
</Button.Content>
</Button>
<Button Style="{DynamicResource ButtonStyle1}">
<Button.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="140"/>
<ColumnDefinition Width="120"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Image Margin="5,0,0,0" Width="50" Stretch="Uniform" Source="/assets/Video.png" HorizontalAlignment="Left"/>
<TextBlock Margin="5,0,0,0" Text="File Manager UI Part-2 by Jd's Code Lab" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" FontWeight="Bold" Foreground="LightSlateGray"/>
</StackPanel>
<TextBlock Grid.Column="1" Text="1 Item" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
<TextBlock Grid.Column="2" Text="Jun 17, 2020" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
<TextBlock Grid.Column="3" Text="4 Gb" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
</Grid>
</Button.Content>
</Button>
<Button Style="{DynamicResource ButtonStyle1}">
<Button.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="140"/>
<ColumnDefinition Width="120"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Image Margin="5,0,0,0" Width="50" Stretch="Uniform" Source="/assets/Music.png" HorizontalAlignment="Left"/>
<TextBlock Margin="5,0,0,0" Text="Some music track" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" FontWeight="Bold" Foreground="LightSlateGray"/>
</StackPanel>
<TextBlock Grid.Column="1" Text="1 Item" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
<TextBlock Grid.Column="2" Text="March 19, 2019" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
<TextBlock Grid.Column="3" Text="5 Mb" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
</Grid>
</Button.Content>
</Button> </StackPanel>
现在需要动态绑定数据,需要使用到数据模板,写在Resource节点里面:

<DataTemplate x:Key="UserDataTemplate">
<Button Style="{DynamicResource ButtonStyle1}">
<Button.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="140"/>
<ColumnDefinition Width="120"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Image Margin="5,0,0,0" Width="50" Stretch="Uniform" Source="{Binding Path=FileExtensionImg}" HorizontalAlignment="Left"/>
<TextBlock Margin="5,0,0,0" Text="{Binding Path=FileName}" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" FontWeight="Bold" Foreground="LightSlateGray"/>
</StackPanel>
<TextBlock Grid.Column="1" Text="{Binding Path=ItemsCount}" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
<TextBlock Grid.Column="2" Text="{Binding Path=LastModyTime}" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
<TextBlock Grid.Column="3" Text="{Binding Path=FileSize}" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
</Grid>
</Button.Content>
</Button>
</DataTemplate>
更新后的StackPanel:

<StackPanel Orientation="Vertical">
<ItemsControl x:Name="UserList" ItemTemplate="{StaticResource UserDataTemplate}" />
</StackPanel>
代码绑定:
UserList.ItemsSource = list;
这样做,还是方便。
结果:
 

【WPF】自定义数据集合绑定到UI界面的更多相关文章

  1. WPF自定义依赖集合属性无法触发更新的问题

    通常WPF中通过继承UserControl的来快速创建自定义控件,最近项目上需要设计一个卫星星图显示控件,最终效果如下图所示.完成过程中遇到了自定义集合依赖属性无法触发更新通知的问题,在此记录一下,方 ...

  2. Wpf binging (二) 集合绑定

    除去简单控件的数据绑定,还有集合控件的数据绑定,一下示例 这发现 source 变成了 itemsSource   Path 变成了   DisplayMemberPath itemsSource:代 ...

  3. [WPF 基础知识系列] —— 绑定中的数据校验Vaildation

    前言: 只要是有表单存在,那么就有可能有对数据的校验需求.如:判断是否为整数.判断电子邮件格式等等. WPF采用一种全新的方式 - Binding,来实现前台显示与后台数据进行交互,当然数据校验方式也 ...

  4. WPF 自定义的图表(适用大量数据绘制)下

    原文:WPF 自定义的图表(适用大量数据绘制)下 上一篇文章中讲了WPF中自定义绘制大量数据的图标,思路是先将其绘制在内存,然后一次性加载到界面,在后续的调试过程中,发现当数据量到达10W时,移动鼠标 ...

  5. WPF 自定义的图表(适用大量数据绘制)

    原文:WPF 自定义的图表(适用大量数据绘制) 在WPF中绘制图表比较简单,有很多的第三方控件,但是在绘制大量数据的时候,就显得有些吃力,即便是自己用StreamGeometry画也达不到理想的效果, ...

  6. C#如何在VS2015 2017版本中编写WPF UI界面引入第三方SVG图形

    原文:C#如何在VS2015 2017版本中编写WPF UI界面引入第三方SVG图形 在VS2015 2017版本中编写WPF UI界面引入第三方SVG图形     最近在写WPF界面的时候遇到一个情 ...

  7. Swagger 自定义UI界面

    Swagger 自定义UI界面 Swagger简单介绍 如何使用Swagger 添加自定义UI界面 使用swagger-ui-layer Swagger ui 的原生UI界面如下: 个人感觉原生UI显 ...

  8. Intellij idea插入表数据【在UI界面插入出错】

    使用Intellij idea向数据库插入表数据的时候,如果该表是联合主键的,那么不能使用UI界面来进行插入-- 必须通过SQL语句才能插入-- 至于为什么?我也不知道-.搞了大半天--想省时间不写S ...

  9. 一种WPF在后台线程更新UI界面的简便方法

    WPF框架规定只有UI线程(主线程)可以更新界面,所有其他后台线程无法直接更新界面.幸好,WPF提供的SynchronizationContext类以及C#的Lambda表达式提供了一种方便的解决方法 ...

  10. WPF按钮响应函数中执行操作耗时较长时,UI 界面不能实时更新——问题原因与解决方案

    原因: 一般来说,一个WPF窗口程序,只有一个UI线程, 如果这个线程停在某个函数,UI将会被阻塞,所有其他的界面操作都不能即时响应. 解决方案: 新开一个线程来执行耗时较长的操作,以不阻塞UI.

随机推荐

  1. C#实现的下拉多选框,下拉多选树,多级节点

    今天给大家上个硬货,下拉多选框,同时也是下拉多选树,支持父节点跟子节点!该控件是基于Telerik控件封装实现的,所以大家在使用的过程中需要引用Telerik.WinControls.dll.Tele ...

  2. Redis 02 基础命令

    数据库 Redis 默认有 16 个数据库. 默认使用的是第 0 个数据库. 不同数据库存不同的值. 切换数据库 select 127.0.0.1:6379> select 1 OK 127.0 ...

  3. HMS Core 3D精准室内定位技术,打造“店铺级”出行体验

    2022年4月28日,在华为折叠旗舰及全场景新品发布上,华为Mate Xs 2折叠屏手机搭载由HMS Core定位服务(Location Kit)提供的3D精准室内定位技术,为用户提供了"店 ...

  4. openGauss事务机制中MVCC技术的实现分析

    openGauss 事务机制中 MVCC 技术的实现分析 概述 事务 事务是为用户提供的最核心.最具吸引力的数据库功能之一.简单地说,事务是用户定义的一系列数据库操作(如查询.插入.修改或删除等)的集 ...

  5. Java面试题总结:基础及语法篇169道

    下载链接:https://gitee.com/ItBoShao/wechat_applet/blob/master/Java面试题总结:基础及语法篇169道.pdf

  6. MRBS(Meeting Room Booking System)开源的会议室预订系统搭建使用

    前一家公司所有的办公系统都是自己开发的,包括排班.工单.会议室预定等等,很方便. 目前所在的公司,每周部门例会找行政预订了会议室,但多次去都被人占了,很烦,于是网上找了一个评价不错的系统,python ...

  7. 试用阿里云GPU服务器进行深度学习模型训练

    试用阿里云GPU服务器进行深度学习模型训练 最近在用PyTorch时发现在本地训练模型速度一言难尽,然后发现阿里云可以白嫖gpu服务器,只要没有申请过PAI-DSW资源的新老用户都可以申请5000CU ...

  8. 在RockyLinux 9.2环境中编译CockroachDB 23.1

    目的 CockroachDB自 23.1开始,编译模式逐步放弃了Makefile,改用Bazel构建.实际上在23.1代码执行make buildshort 能够成功,但make build应该就会因 ...

  9. 力扣121(java&python)-买卖股票的最佳时机(简单)

    题目: 给定一个数组 prices ,它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格. 你只能选择 某一天 买入这只股票,并选择在 未来的某一个不同的日子 卖出该股票.设计一 ...

  10. 力扣686(java)-重复叠加字符串匹配(中等)

    题目: 给定两个字符串 a 和 b,寻找重复叠加字符串 a 的最小次数,使得字符串 b 成为叠加后的字符串 a 的子串,如果不存在则返回 -1. 注意:字符串 "abc" 重复叠加 ...