【WPF】自定义数据集合绑定到UI界面

需要展示列表项，从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界面的更多相关文章

WPF自定义依赖集合属性无法触发更新的问题
通常WPF中通过继承UserControl的来快速创建自定义控件,最近项目上需要设计一个卫星星图显示控件,最终效果如下图所示.完成过程中遇到了自定义集合依赖属性无法触发更新通知的问题,在此记录一下,方 ...
Wpf binging (二) 集合绑定
除去简单控件的数据绑定,还有集合控件的数据绑定,一下示例这发现 source 变成了 itemsSource Path 变成了 DisplayMemberPath itemsSource:代 ...
[WPF 基础知识系列] —— 绑定中的数据校验Vaildation
前言: 只要是有表单存在,那么就有可能有对数据的校验需求.如:判断是否为整数.判断电子邮件格式等等. WPF采用一种全新的方式 - Binding,来实现前台显示与后台数据进行交互,当然数据校验方式也 ...
WPF 自定义的图表（适用大量数据绘制）下
原文:WPF 自定义的图表(适用大量数据绘制)下上一篇文章中讲了WPF中自定义绘制大量数据的图标,思路是先将其绘制在内存,然后一次性加载到界面,在后续的调试过程中,发现当数据量到达10W时,移动鼠标 ...
WPF 自定义的图表（适用大量数据绘制）
原文:WPF 自定义的图表(适用大量数据绘制) 在WPF中绘制图表比较简单,有很多的第三方控件,但是在绘制大量数据的时候,就显得有些吃力,即便是自己用StreamGeometry画也达不到理想的效果, ...
C#如何在VS2015 2017版本中编写WPF UI界面引入第三方SVG图形
原文:C#如何在VS2015 2017版本中编写WPF UI界面引入第三方SVG图形在VS2015 2017版本中编写WPF UI界面引入第三方SVG图形最近在写WPF界面的时候遇到一个情 ...
Swagger 自定义UI界面
Swagger 自定义UI界面 Swagger简单介绍如何使用Swagger 添加自定义UI界面使用swagger-ui-layer Swagger ui 的原生UI界面如下: 个人感觉原生UI显 ...
Intellij idea插入表数据【在UI界面插入出错】
使用Intellij idea向数据库插入表数据的时候,如果该表是联合主键的,那么不能使用UI界面来进行插入-- 必须通过SQL语句才能插入-- 至于为什么?我也不知道-.搞了大半天--想省时间不写S ...
一种WPF在后台线程更新UI界面的简便方法
WPF框架规定只有UI线程(主线程)可以更新界面,所有其他后台线程无法直接更新界面.幸好,WPF提供的SynchronizationContext类以及C#的Lambda表达式提供了一种方便的解决方法 ...
WPF按钮响应函数中执行操作耗时较长时，UI 界面不能实时更新——问题原因与解决方案
原因: 一般来说,一个WPF窗口程序,只有一个UI线程, 如果这个线程停在某个函数,UI将会被阻塞,所有其他的界面操作都不能即时响应. 解决方案: 新开一个线程来执行耗时较长的操作,以不阻塞UI.

随机推荐

DevEco Device Tool 3.1 Beta1版本发布，产品化配置优化添加自定义烧录器
原文:https://mp.weixin.qq.com/s/lVENZqc-1getmkoSgCJiEg,点击链接查看更多技术内容. HUAWEI DevEco Device Tool(以下内容简 ...
pytest接口自动化搭建经验
前言:目前公司的主要产品是一个web类型的产品:需要做一些自动化,目前的想法是只做接口自动化,不做ui的一个自动化,目前的思路是先对主流程做正常校验,后期再对每一个接口做校验: 一.版本信息: pyt ...
力扣1112(MySQL)-每位学生的最高成绩（中等）
题目: 表:Enrollments (student_id, course_id) 是该表的主键. 问题编写一个 SQL 查询,查询每位学生获得的最高成绩和它所对应的科目,若科目成绩并列,取 cour ...
如何在 ACK 中使用 MSE Ingress
简介: 本文将为大家分享一下 Ingress 标准和实现的趋势,介绍一下 MSE Ingress 在这个趋势下的优势和实践,为大家做关键入口选择多一些参考. 作者:彦林随着云原生架构的普及,K8 ...
TiDB、OceanBase、PolarDB-X、CockroachDB二级索引写入性能测评
简介: 二级索引是关系型数据库相较于NoSQL数据库的一个关键差异.二级索引必须是强一致的,因此索引的写入需要与主键的写入放在一个事务当中,事务的性能是二级索引性能的基础.本次测试将重点关注不同分布式 ...
一个 Blink 小白的成长之路
写在前面写过blink sql的同学应该都有体会,明明写的时候就很顺滑,小手一抖,洋洋洒洒三百行代码,一气呵成.结果跑的时候,吞吐量就是上不去.导致数据延迟高,消息严重积压,被业务方疯狂吐槽.这时候 ...
WebAssembly + Dapr = 下一代云原生运行时？
简介: 云计算已经成为了支撑数字经济发展的关键基础设施.云计算基础设施也在持续进化,从 IaaS,到容器即服务(CaaS),再到 Serverless 容器和函数 PaaS (fPaaS 或者 Faa ...
阿里巴巴超大规模Kubernetes基础设施运维体系揭秘
简介:ASI:Alibaba Serverless infrastructure,阿里巴巴针对云原生应用设计的统一基础设施.ASI 基于阿里云公共云容器服务 ACK之上,支撑集团应用云原生化和云产品 ...
凭证管理揭秘：Cookie-Session 与 JWT 方案的对决
概述在上一篇文章我们聊完了授权的过程,在服务器对客户端完成授权之后,服务器会给客户端颁发对应的凭证,客户端持有该凭证访问服务端,服务器便能知道你是谁,你有什么权限等信息.这一章我们具体聊聊常见的凭证 ...
WPF 基础 2D 图形学知识判断点是否在线段上
在知道一个使用两个点表示的线段,和另一个点,求另一个点是否在线段上本文算法属于通用的算法,可以在 WPF 和 UWP 和 Xamarin 等上运行,基本上所有的 .NET 平台都能执行如下图,如果 ...

【WPF】自定义数据集合绑定到UI界面

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

随机推荐

热门专题