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开发了一系列的 ...
随机推荐
- maven指定部署的服务器类型
<!-- 指定部署的服务器类型 --> <plugins> <!-- <plugin> <groupId>org.apache.tomcat.ma ...
- CodeForces - 796B 模拟
思路:模拟移动即可,如果球落入洞中停止移动.注意:有可能第一个位置就是洞!! AC代码 #include <cstdio> #include <cmath> #include ...
- nyoj913 取石子(十) SG函数 + Nimm博弈
思路: 第一堆:SG = n % 3; 第二堆:无规律,打表即可,用hash比set快很多; 第三堆:SG = n; 第四堆:无规律 第五堆:SG = n % 2; 第六堆:SG = n % (i + ...
- HDU - 3567 Eight II (bfs预处理 + 康托) [kuangbin带你飞]专题二
类似HDU1430,不过本题需要枚举X的九个位置,分别保存状态,因为要保证最少步数.要保证字典序最小的话,在扩展节点时,方向顺序为:down, left, right, up. 我用c++提交1500 ...
- 对ios、android开发程序员的14条忠告
————————本文摘自千锋教育(http://www.mobiletrain.org/)对ios\android开发程序员的14条忠告————————— 1.不要害怕在工作中学习. 只要有电脑,就可 ...
- 2015最新iOS学习线路图
iOS是由苹果公司开发的移动操作系统,以xcode为主要开发工具,具有简单易用的界面.令人惊叹的功能,以及超强的稳定性,已经成为iPhone.iPad 和iPod touch 的强大基础:iOS 内置 ...
- strcpy、strncpy与memcpy的区别与使用方法
strcpy.strncpy.memcpy这三个C语言函数我们在主机代码编写中会很频繁的使用到,但是三个函数的区别.使用时该注意什么还是有必要说下的. 本文参考<C 标准库>编写. 一.函 ...
- 沉淀,再出发——手把手教你使用VirtualBox搭建含有三个虚拟节点的Hadoop集群
手把手教你使用VirtualBox搭建含有三个虚拟节点的Hadoop集群 一.准备,再出发 在项目启动之前,让我们看一下前面所做的工作.首先我们掌握了一些Linux的基本命令和重要的文件,其次我们学会 ...
- 实战DeviceIoControl 之六:访问物理端口
Q 在NT/2000/XP中,如何读取CMOS数据? Q 在NT/2000/XP中,如何控制speaker发声? Q 在NT/2000/XP中,如何直接访问物理端口? A 看似小小问题,难倒多少好汉! ...
- Java的Random总结
/** * @Title:RandomNum.java * @Package:com.yhd.chart.model * @Description:Java产生随机数 * @author:Youhai ...