还是老规矩,看一下最终效果。

数据是从SQLite中读取,然后绑定到DataGrid中显示的。

先看一下XAML

开头引用—————— xmlns:grid="using:Telerik.UI.Xaml.Controls.Grid"

  1. <grid:RadDataGrid Grid.Row="1" x:Name="radDataGrid"
  2. Background="Transparent"
  3. BorderThickness="1" GridLinesThickness="1"
  4. UserEditMode="Inline" UserSortMode="Multiple"
  5. SelectionUnit="Row" CanUserChooseColumns="True"
  6. AutoGenerateColumns="False"
  7. IsRightTapEnabled="True" RightTapped="radDataGrid_RightTapped"
  8. IsHoldingEnabled="True" Holding="radDataGrid_Holding"
  9. CurrentItemChanged="radDataGrid_CurrentItemChanged"
  10. CurrentItemChanging="radDataGrid_CurrentItemChanging">
  11.  
  12. <grid:RadDataGrid.Columns>
  13. <grid:DataGridTextColumn x:Name="columnId" x:Uid="columnId" Header="Id" IsVisible="False" PropertyName="Id"/>
  14. <grid:DataGridTextColumn x:Name="columnGuid" x:Uid="columnGuid" Header="Guid" IsVisible="False" PropertyName="Guid"/>
  15. <grid:DataGridTextColumn x:Name="columnFaceSetId" x:Uid="columnFaceSetId" Header="FaceSetId" IsVisible="False" PropertyName="FaceSetId"/>
  16. <grid:DataGridTextColumn x:Name="columnPersonId" x:Uid="columnPersonId" Header="PersonId" PropertyName="PersonId"/>
  17. <grid:DataGridTextColumn x:Name="columnName" x:Uid="columnName" Header="Name" PropertyName="Name"/>
  18.  
  19. <grid:DataGridTemplateColumn x:Name="columnHead" x:Uid="columnHead" Header="Head">
  20. <grid:DataGridTemplateColumn.CellContentTemplate>
  21. <DataTemplate>
  22. <Ellipse Width="50" Height="50" Margin="2">
  23. <Ellipse.Fill>
  24. <ImageBrush ImageSource="{Binding Head}"/>
  25. </Ellipse.Fill>
  26. </Ellipse>
  27. </DataTemplate>
  28. </grid:DataGridTemplateColumn.CellContentTemplate>
  29. </grid:DataGridTemplateColumn>
  30. <grid:DataGridTextColumn x:Name="columnSignInItemName" x:Uid="columnSignInItemName" Header="SignInItemName" PropertyName="SignInItemName"/>
  31. <grid:DataGridNumericalColumn x:Name="columnSignInItemTimes" x:Uid="columnSignInItemTimes" Header="SignInItemTimes" PropertyName="SignInItemTimes"/>
  32. <grid:DataGridNumericalColumn x:Name="columnSignInAttendanceRate" x:Uid="columnSignInAttendanceRate" Header="SignInAttendanceRate" PropertyName="SignInAttendanceRate" CellContentFormat="{}{0:P0}"/>
  33. <grid:DataGridDateColumn x:Name="columnSignInDateTime" x:Uid="columnSignInDateTime" Header="SignInDateTime" PropertyName="SignInDateTime"/>
  34. <grid:DataGridTextColumn x:Name="columnSignInState" x:Uid="columnSignInState" Header="SignInState" PropertyName="SignInState"/>
  35. </grid:RadDataGrid.Columns>
  36.  
  37. <!--<grid:RadDataGrid.SortDescriptors>
  38. <core:PropertySortDescriptor PropertyName="PersonId" SortOrder="Ascending" />
  39. <core:PropertySortDescriptor PropertyName="SignInItemName" SortOrder="Ascending" />
  40. <core:PropertySortDescriptor PropertyName="SignInItemTimes" SortOrder="Ascending" />
  41. </grid:RadDataGrid.SortDescriptors>-->
  42.  
  43. </grid:RadDataGrid>

其中,我在 <grid:RadDataGrid.Resources 中定义了右键菜单,你自己根据需要删减。

属性 说明
  1. Background
背景色
  1. UserEditMode
用户编辑模式,Inline是行内编辑模式,External是弹出一个浮窗编辑
  1. UserSortMode
用户排序模式,Multiple可以允许设置多个字段排序
  1. SelectionUnit
选择单位,Row表示选择整行,Cell则是选择一个单元格
  1. CanUserChooseColumns
是否允许用户选择列
  1. AutoGenerateColumns
自动生成列,我设置的false,因为我数据库有很多字段,不想都显示在上面,所以需要自己定义。如果是true,则把所有字段都显示的

然后 grid:DataGridTemplateColumn 自定义模板。

后台C#读取数据库绑定的代码。

public ObservableCollection<SignInSummaryData> SampleItems { get; private set; } = new ObservableCollection<SignInSummaryData>();

代码绑定以下,然后加了一个排序,因为之前指定了 UserSortMode 为Multiple

  1. private async Task LoadDataAsync()
  2. {
  3. SampleItems.Clear();
  4.  
  5. List<UserSignInInfo> list = await SQLiteHelper.GetAllUserSignInInfoAsync();
  6. //this.DataContext = SampleItems = new ObservableCollection<UserSignInInfo>(list);
  7.  
  8. foreach (var item in list)
  9. {
  10. UserItemSQLite uis = await SQLiteHelper.GetUserAsync("Remark", item.PersonId);
  11. if (uis == null)
  12. continue;
  13.  
  14. BitmapImage thumbBi = new BitmapImage();
  15. if (uis.Head0 != null)
  16. {
  17. StorageFolder storageFolder = ApplicationData.Current.TemporaryFolder;
  18. StorageFile thumbFile = await storageFolder.CreateFileAsync("signInHeadthumbFile.jpg", CreationCollisionOption.ReplaceExisting);
  19. await FileIO.WriteBytesAsync(thumbFile, uis.Head0);
  20. StorageItemThumbnail sit = await thumbFile.GetThumbnailAsync(ThumbnailMode.DocumentsView, );
  21. IRandomAccessStream ras = sit.AsStream().AsRandomAccessStream();
  22.  
  23. await thumbBi.SetSourceAsync(ras);
  24. }
  25.  
  26. SignInSummaryData sid = new SignInSummaryData
  27. {
  28. Id = item.Id,
  29. Guid = uis.Guid,
  30. FaceSetId = uis.FaceSetId,
  31. PersonId = item.PersonId,
  32. Name = uis.Name,
  33.  
  34. SignInItemName = item.SignInItemName,
  35. SignInItemTimes = item.SignInItemTimes,
  36. SignInAttendanceRate = item.SignInAttendanceRate,
  37. SignInDateTime = Convert.ToDateTime(item.SignInDateTime),
  38. SignInState = item.SignInState,
  39.  
  40. Head = thumbBi,
  41. Head0 = uis.Head0,
  42. Head1 = uis.Head1,
  43. Head2 = uis.Head2,
  44. Head3 = uis.Head3,
  45. Head4 = uis.Head4,
  46. Head5 = uis.Head5,
  47. Head6 = uis.Head6,
  48. Head7 = uis.Head7,
  49. Head8 = uis.Head8,
  50. Head9 = uis.Head9,
  51.  
  52. Area1 = uis.Area1,
  53. Area2 = uis.Area2,
  54. Area3 = uis.Area3,
  55. Area4 = uis.Area4,
  56. Area5 = uis.Area5,
  57. Area6 = uis.Area6,
  58. Area7 = uis.Area7,
  59. Area8 = uis.Area8,
  60.  
  61. Gender = uis.Gender,
  62. Mobile = uis.Mobile,
  63. Email = uis.Email,
  64. RemarkReal = uis.RemarkReal,
  65.  
  66. };
  67.  
  68. SampleItems.Add(sid);
  69.  
  70. radDataGrid.ItemsSource = SampleItems;// = new ObservableCollection<SignInSummaryData>(list);
  71. }
  72.  
  73. radDataGrid.SortDescriptors.Add(new PropertySortDescriptor() { PropertyName = "PersonId", SortOrder = SortOrder.Ascending });
  74. radDataGrid.SortDescriptors.Add(new PropertySortDescriptor() { PropertyName = "SignInItemName", SortOrder = SortOrder.Ascending });
  75. radDataGrid.SortDescriptors.Add(new PropertySortDescriptor() { PropertyName = "SignInItemTimes", SortOrder = SortOrder.Ascending });
  76. }

这样就可以实现开头的效果了。

下一篇说以下环形图的制作。

UWP 使用Telerik Grid控件的更多相关文章

  1. UWP 使用Telerik Chart控件

    Telerik开发的chart功能异常强大 用户可以自行在商店搜索"UI for uwp demos". 下面我就结合以下我的软件,来说明一下饼状图的实现. 看看效果: 先看一下X ...

  2. WPF平台Grid控件性能比较

    WPF官方发布第一个版本至今已经有10年了, 我们几乎在同时也开始了XAML开发.即使经过多年打造,我们依旧尝试提高:我们真的成功打造了高效灵活的控件吗?我没有在其他地方找到任何关于优秀的WPF表格性 ...

  3. Win10 UWP开发系列——开源控件库:UWPCommunityToolkit

    在开发应用的过程中,不可避免的会使用第三方类库.之前用过一个WinRTXamlToolkit.UWP,现在微软官方发布了一个新的开源控件库—— UWPCommunityToolkit 项目代码托管在G ...

  4. 完全使用一组 DSL 来操作 Grid 控件

    最近尝试了一下将 XtraGrid 的初始化工作封装成内部 DSL,例如一个普通的基础数据的增删改查操作的代码会像下面这样: public partial class UserForm : XtraF ...

  5. FineUI Grid控件高度自适应

    引言 页面里使用f:Grid控件,添加分页功能,然后高度填充整个页面. 如何使用 使用FineUI 控件的每个页面都有一个f:PageManager控件,它包含属性:AutoSizePanelID,设 ...

  6. 【Telerik】<telerik:RadGridView/>控件的使用

    学习Telerik第三方控件中的WPF时,对于RadGridView控件做的一些记录. AutoGenerateColumns:启动时是否生成列 ShowGroupPanel:是否显示表格的分组名称 ...

  7. FineUI Grid控件右键菜单的实现

    FineUI官方Demo上一直没有Grid右键菜单的实现,其实从4.1.x的版本开始,允许添加自定义的事件监听(Listeners),所以要实现这个功能已经相当容易了. ExtJs右键菜单有很多种,对 ...

  8. 实现控件WPF(4)----Grid控件实现六方格

    PS:今天上午,非常郁闷,有很多简单基础的问题搞得我有些迷茫,哎,代码几天不写就忘.目前又不当COO,还是得用心记代码哦! 利用Grid控件能很轻松帮助我们实现各种布局.上面就是一个通过Grid单元格 ...

  9. 扩展ToolBarManager、ListView和Grid控件以实现气球式的ToolTip

    原文:扩展ToolBarManager.ListView和Grid控件以实现气球式的ToolTip infragistics是全球领先的UI工具和用户体验的专家,Infragistics开发了一系列的 ...

随机推荐

  1. MySql全国省市区SQL语句

    CREATE TABLE IF NOT EXISTS `province` (   `id` int(11) NOT NULL auto_increment,   `provinceID` int(1 ...

  2. 第十八章 DjangoWeb开发框架

    第十八章 DjangoWeb开发框架 第一课 内容概要: 1.JS正则 -登录注册验证 2.组件 1.BootStrap -css -js 学习BootStrap规则 2.jQueryUI -css ...

  3. Hadoop编译方法

    伪分布式: hadoop-env.sh core-site.xml hdfs-site.xml mapred-site.xml 1.在hadoop官网下载hadoop的源码(同步跟踪最新源代码) mv ...

  4. ios学习- 10大iOS开发者最喜爱的类库

    该10大iOS开发者最喜爱的库由“iOS辅导团队”成员Marcelo Fabri组织投票选举而得,参与者包括开发者团队,iOS辅导团队以及行业嘉宾.每个团队都要根据以下规则选出五个最好的库: 1)不能 ...

  5. javascript-深入理解&&和||

    先从两个问题看起: 第一个问题 为什么 a && b 返回的是true,b && a 返回的是6 var user = 6; var both = true; cons ...

  6. java字符串替换的问题

    今天工作中遇到一个问题,需要输出mongodbObject中的部分内容,当我转换成字符串以后出现了好像无法替换的问题,经过验证,发现并非是不能替换,只是想法错误而已. package demo; /* ...

  7. Linux查看目录中的文件

    Linux查看目录中的文件 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ ls examples.desktop jdk 公共的 视频 文档 音乐 java ...

  8. java自带的类压缩和下载,以及递归删除动态的文件(shiro项目中来的十)

    详见项目,不用借助于任何外在的jar包,通过jre自带的实现.

  9. 弹出层罩子html(上传照片弹出请等待后面的代码不能修改)

    一,效果 二,素材 三,代码 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> ...

  10. Dockerfile 中的 multi-stage

    在应用了容器技术的软件开发过程中,控制容器镜像的大小可是一件费时费力的事情.如果我们构建的镜像既是编译软件的环境,又是软件最终的运行环境,这是很难控制镜像大小的.所以常见的配置模式为:分别为软件的编译 ...