UWP 使用Telerik Grid控件
还是老规矩,看一下最终效果。
数据是从SQLite中读取,然后绑定到DataGrid中显示的。
先看一下XAML
开头引用—————— xmlns:grid="using:Telerik.UI.Xaml.Controls.Grid"
<grid:RadDataGrid Grid.Row="1" x:Name="radDataGrid"
Background="Transparent"
BorderThickness="1" GridLinesThickness="1"
UserEditMode="Inline" UserSortMode="Multiple"
SelectionUnit="Row" CanUserChooseColumns="True"
AutoGenerateColumns="False"
IsRightTapEnabled="True" RightTapped="radDataGrid_RightTapped"
IsHoldingEnabled="True" Holding="radDataGrid_Holding"
CurrentItemChanged="radDataGrid_CurrentItemChanged"
CurrentItemChanging="radDataGrid_CurrentItemChanging"> <grid:RadDataGrid.Columns>
<grid:DataGridTextColumn x:Name="columnId" x:Uid="columnId" Header="Id" IsVisible="False" PropertyName="Id"/>
<grid:DataGridTextColumn x:Name="columnGuid" x:Uid="columnGuid" Header="Guid" IsVisible="False" PropertyName="Guid"/>
<grid:DataGridTextColumn x:Name="columnFaceSetId" x:Uid="columnFaceSetId" Header="FaceSetId" IsVisible="False" PropertyName="FaceSetId"/>
<grid:DataGridTextColumn x:Name="columnPersonId" x:Uid="columnPersonId" Header="PersonId" PropertyName="PersonId"/>
<grid:DataGridTextColumn x:Name="columnName" x:Uid="columnName" Header="Name" PropertyName="Name"/> <grid:DataGridTemplateColumn x:Name="columnHead" x:Uid="columnHead" Header="Head">
<grid:DataGridTemplateColumn.CellContentTemplate>
<DataTemplate>
<Ellipse Width="50" Height="50" Margin="2">
<Ellipse.Fill>
<ImageBrush ImageSource="{Binding Head}"/>
</Ellipse.Fill>
</Ellipse>
</DataTemplate>
</grid:DataGridTemplateColumn.CellContentTemplate>
</grid:DataGridTemplateColumn>
<grid:DataGridTextColumn x:Name="columnSignInItemName" x:Uid="columnSignInItemName" Header="SignInItemName" PropertyName="SignInItemName"/>
<grid:DataGridNumericalColumn x:Name="columnSignInItemTimes" x:Uid="columnSignInItemTimes" Header="SignInItemTimes" PropertyName="SignInItemTimes"/>
<grid:DataGridNumericalColumn x:Name="columnSignInAttendanceRate" x:Uid="columnSignInAttendanceRate" Header="SignInAttendanceRate" PropertyName="SignInAttendanceRate" CellContentFormat="{}{0:P0}"/>
<grid:DataGridDateColumn x:Name="columnSignInDateTime" x:Uid="columnSignInDateTime" Header="SignInDateTime" PropertyName="SignInDateTime"/>
<grid:DataGridTextColumn x:Name="columnSignInState" x:Uid="columnSignInState" Header="SignInState" PropertyName="SignInState"/>
</grid:RadDataGrid.Columns> <!--<grid:RadDataGrid.SortDescriptors>
<core:PropertySortDescriptor PropertyName="PersonId" SortOrder="Ascending" />
<core:PropertySortDescriptor PropertyName="SignInItemName" SortOrder="Ascending" />
<core:PropertySortDescriptor PropertyName="SignInItemTimes" SortOrder="Ascending" />
</grid:RadDataGrid.SortDescriptors>--> </grid:RadDataGrid>
其中,我在 <grid:RadDataGrid.Resources 中定义了右键菜单,你自己根据需要删减。
属性 | 说明 |
Background |
背景色 |
UserEditMode |
用户编辑模式,Inline是行内编辑模式,External是弹出一个浮窗编辑 |
UserSortMode |
用户排序模式,Multiple可以允许设置多个字段排序 |
SelectionUnit |
选择单位,Row表示选择整行,Cell则是选择一个单元格 |
CanUserChooseColumns |
是否允许用户选择列 |
AutoGenerateColumns |
自动生成列,我设置的false,因为我数据库有很多字段,不想都显示在上面,所以需要自己定义。如果是true,则把所有字段都显示的 |
然后 grid:DataGridTemplateColumn 自定义模板。
后台C#读取数据库绑定的代码。
public ObservableCollection<SignInSummaryData> SampleItems { get; private set; } = new ObservableCollection<SignInSummaryData>();
代码绑定以下,然后加了一个排序,因为之前指定了 UserSortMode 为Multiple
private async Task LoadDataAsync()
{
SampleItems.Clear(); List<UserSignInInfo> list = await SQLiteHelper.GetAllUserSignInInfoAsync();
//this.DataContext = SampleItems = new ObservableCollection<UserSignInInfo>(list); foreach (var item in list)
{
UserItemSQLite uis = await SQLiteHelper.GetUserAsync("Remark", item.PersonId);
if (uis == null)
continue; BitmapImage thumbBi = new BitmapImage();
if (uis.Head0 != null)
{
StorageFolder storageFolder = ApplicationData.Current.TemporaryFolder;
StorageFile thumbFile = await storageFolder.CreateFileAsync("signInHeadthumbFile.jpg", CreationCollisionOption.ReplaceExisting);
await FileIO.WriteBytesAsync(thumbFile, uis.Head0);
StorageItemThumbnail sit = await thumbFile.GetThumbnailAsync(ThumbnailMode.DocumentsView, );
IRandomAccessStream ras = sit.AsStream().AsRandomAccessStream(); await thumbBi.SetSourceAsync(ras);
} SignInSummaryData sid = new SignInSummaryData
{
Id = item.Id,
Guid = uis.Guid,
FaceSetId = uis.FaceSetId,
PersonId = item.PersonId,
Name = uis.Name, SignInItemName = item.SignInItemName,
SignInItemTimes = item.SignInItemTimes,
SignInAttendanceRate = item.SignInAttendanceRate,
SignInDateTime = Convert.ToDateTime(item.SignInDateTime),
SignInState = item.SignInState, Head = thumbBi,
Head0 = uis.Head0,
Head1 = uis.Head1,
Head2 = uis.Head2,
Head3 = uis.Head3,
Head4 = uis.Head4,
Head5 = uis.Head5,
Head6 = uis.Head6,
Head7 = uis.Head7,
Head8 = uis.Head8,
Head9 = uis.Head9, Area1 = uis.Area1,
Area2 = uis.Area2,
Area3 = uis.Area3,
Area4 = uis.Area4,
Area5 = uis.Area5,
Area6 = uis.Area6,
Area7 = uis.Area7,
Area8 = uis.Area8, Gender = uis.Gender,
Mobile = uis.Mobile,
Email = uis.Email,
RemarkReal = uis.RemarkReal, }; SampleItems.Add(sid); radDataGrid.ItemsSource = SampleItems;// = new ObservableCollection<SignInSummaryData>(list);
} radDataGrid.SortDescriptors.Add(new PropertySortDescriptor() { PropertyName = "PersonId", SortOrder = SortOrder.Ascending });
radDataGrid.SortDescriptors.Add(new PropertySortDescriptor() { PropertyName = "SignInItemName", SortOrder = SortOrder.Ascending });
radDataGrid.SortDescriptors.Add(new PropertySortDescriptor() { PropertyName = "SignInItemTimes", SortOrder = SortOrder.Ascending });
}
这样就可以实现开头的效果了。
下一篇说以下环形图的制作。
UWP 使用Telerik Grid控件的更多相关文章
- UWP 使用Telerik Chart控件
Telerik开发的chart功能异常强大 用户可以自行在商店搜索"UI for uwp demos". 下面我就结合以下我的软件,来说明一下饼状图的实现. 看看效果: 先看一下X ...
- WPF平台Grid控件性能比较
WPF官方发布第一个版本至今已经有10年了, 我们几乎在同时也开始了XAML开发.即使经过多年打造,我们依旧尝试提高:我们真的成功打造了高效灵活的控件吗?我没有在其他地方找到任何关于优秀的WPF表格性 ...
- Win10 UWP开发系列——开源控件库:UWPCommunityToolkit
在开发应用的过程中,不可避免的会使用第三方类库.之前用过一个WinRTXamlToolkit.UWP,现在微软官方发布了一个新的开源控件库—— UWPCommunityToolkit 项目代码托管在G ...
- 完全使用一组 DSL 来操作 Grid 控件
最近尝试了一下将 XtraGrid 的初始化工作封装成内部 DSL,例如一个普通的基础数据的增删改查操作的代码会像下面这样: public partial class UserForm : XtraF ...
- FineUI Grid控件高度自适应
引言 页面里使用f:Grid控件,添加分页功能,然后高度填充整个页面. 如何使用 使用FineUI 控件的每个页面都有一个f:PageManager控件,它包含属性:AutoSizePanelID,设 ...
- 【Telerik】<telerik:RadGridView/>控件的使用
学习Telerik第三方控件中的WPF时,对于RadGridView控件做的一些记录. AutoGenerateColumns:启动时是否生成列 ShowGroupPanel:是否显示表格的分组名称 ...
- FineUI Grid控件右键菜单的实现
FineUI官方Demo上一直没有Grid右键菜单的实现,其实从4.1.x的版本开始,允许添加自定义的事件监听(Listeners),所以要实现这个功能已经相当容易了. ExtJs右键菜单有很多种,对 ...
- 实现控件WPF(4)----Grid控件实现六方格
PS:今天上午,非常郁闷,有很多简单基础的问题搞得我有些迷茫,哎,代码几天不写就忘.目前又不当COO,还是得用心记代码哦! 利用Grid控件能很轻松帮助我们实现各种布局.上面就是一个通过Grid单元格 ...
- 扩展ToolBarManager、ListView和Grid控件以实现气球式的ToolTip
原文:扩展ToolBarManager.ListView和Grid控件以实现气球式的ToolTip infragistics是全球领先的UI工具和用户体验的专家,Infragistics开发了一系列的 ...
随机推荐
- [翻译] 编写高性能 .NET 代码--第二章 GC -- 减少大对象堆的碎片,在某些情况下强制执行完整GC,按需压缩大对象堆,在GC前收到消息通知,使用弱引用缓存对象
减少大对象堆的碎片 如果不能完全避免大对象堆的分配,则要尽量避免碎片化. 对于LOH不小心就会有无限增长,但LOH使用的空闲列表机制可以减轻增长的影响.利用这个空闲列表,我们可以在两块分配区域中间找到 ...
- Spring-Security 自定义Filter完成验证码校验
Spring-Security的功能主要是由一堆Filter构成过滤器链来实现,每个Filter都会完成自己的一部分工作.我今天要做的是对UsernamePasswordAuthenticationF ...
- spring 运行时属性值注入
继续spring学习,今天介绍两种外部属性值注入的方式.当你需要读取配置信息时,可以快速读取. 开始之前先创建属性文件site.properties,放在classpath下面 #数据库配置 ### ...
- JS在线生成二维码
Js代码 百度云公开下载地址:http://pan.baidu.com/s/1nvjTXB7 Html+Php代码 <volist name="huodong_list" i ...
- MongoDB基础介绍安装与使用
MongoDB已经日益成为流程和主流的数据库了,原因有两个:第一个就是技术优势,第二就是便利性,个人使用部署都很方便. MongoDB的优缺点,以及使用场景 优点: 面向文档存储(自由读高,不需要定义 ...
- 生成1~n的排列
直接递归打印. 代码如下 #include<cstdio> void dfs(int *a,int cur,int n) { if(cur==n) { for(int i=0;i<n ...
- Codeforces475D - CGCDSSQ
Portal Description 给出长度为\(n(n\leq10^5)\)的序列\(\{a_n\}\),给出\(q(q\leq3\times10^5)\)个\(x\),对于每个\(x\),求满足 ...
- linux清屏命令(clear,reset)
(1)clear 这个命令将会刷新屏幕,本质上只是让终端显示页向后翻了一页,如果向上滚动屏幕还可以看到之前的操作信息.一般都会用这个命令. (2)reset 这个命令将完全刷新终端屏幕,之前的终端输入 ...
- nginx笔记5-双机热备原理
1动静分离演示: 将笔记3的Demo改造一下,如图所示: 改造完成后,其实就是在网页上显示一张图片 现在启动Tomcat运行起来,如图: 可以看到图片的请求是请求Tomcat下的图片. 现在,通过把静 ...
- CDN中前端层的复制
前端层的复制是为了提高静态内容分发的性能和可扩展性.将静态内容的分发转由边缘服务器来完成是为了解决可扩展性的问题,因为这样做可以避免出现在对等点和广域网链路处的网络拥堵风险,而这两个地方的拥堵是网络延 ...