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

数据是从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控件的更多相关文章

  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. maven指定部署的服务器类型

    <!-- 指定部署的服务器类型 --> <plugins> <!-- <plugin> <groupId>org.apache.tomcat.ma ...

  2. CodeForces - 796B 模拟

    思路:模拟移动即可,如果球落入洞中停止移动.注意:有可能第一个位置就是洞!! AC代码 #include <cstdio> #include <cmath> #include ...

  3. nyoj913 取石子(十) SG函数 + Nimm博弈

    思路: 第一堆:SG = n % 3; 第二堆:无规律,打表即可,用hash比set快很多; 第三堆:SG = n; 第四堆:无规律 第五堆:SG = n % 2; 第六堆:SG = n % (i + ...

  4. HDU - 3567 Eight II (bfs预处理 + 康托) [kuangbin带你飞]专题二

    类似HDU1430,不过本题需要枚举X的九个位置,分别保存状态,因为要保证最少步数.要保证字典序最小的话,在扩展节点时,方向顺序为:down, left, right, up. 我用c++提交1500 ...

  5. 对ios、android开发程序员的14条忠告

    ————————本文摘自千锋教育(http://www.mobiletrain.org/)对ios\android开发程序员的14条忠告————————— 1.不要害怕在工作中学习. 只要有电脑,就可 ...

  6. 2015最新iOS学习线路图

    iOS是由苹果公司开发的移动操作系统,以xcode为主要开发工具,具有简单易用的界面.令人惊叹的功能,以及超强的稳定性,已经成为iPhone.iPad 和iPod touch 的强大基础:iOS 内置 ...

  7. strcpy、strncpy与memcpy的区别与使用方法

    strcpy.strncpy.memcpy这三个C语言函数我们在主机代码编写中会很频繁的使用到,但是三个函数的区别.使用时该注意什么还是有必要说下的. 本文参考<C 标准库>编写. 一.函 ...

  8. 沉淀,再出发——手把手教你使用VirtualBox搭建含有三个虚拟节点的Hadoop集群

    手把手教你使用VirtualBox搭建含有三个虚拟节点的Hadoop集群 一.准备,再出发 在项目启动之前,让我们看一下前面所做的工作.首先我们掌握了一些Linux的基本命令和重要的文件,其次我们学会 ...

  9. 实战DeviceIoControl 之六:访问物理端口

    Q 在NT/2000/XP中,如何读取CMOS数据? Q 在NT/2000/XP中,如何控制speaker发声? Q 在NT/2000/XP中,如何直接访问物理端口? A 看似小小问题,难倒多少好汉! ...

  10. Java的Random总结

    /** * @Title:RandomNum.java * @Package:com.yhd.chart.model * @Description:Java产生随机数 * @author:Youhai ...