Devexpress 提供了datagrid 控件对于xamarin 进行支持。整个世界美好了,已经无法用语言来形容一个 被列表控件折磨的要死的人看到熟悉的图标时候的激动了。还有一点引用官网的原话:
And yes, it·s free!
好了感慨结束进入正文:
下载dll
https://components.xamarin.com/view/devexpress-grid
下载后:
根据pcl、android、ios不同项目添加右键引用目录很清晰。
初始化
以下初始化代码添加到Android(在MainActivity.cs文件),iOS设备(该AppDelegate.cs文件)和Windows Phone(在MainPage.xaml.cs中的文件)的项目。
DevExpress.Mobile.Forms.Init ();
控件使用
Xaml
创建xaml page 界面代码如下
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="BarCode.Pages.DevExpressDataGrid"
xmlns:dxGrid = "clr-namespace:DevExpress.Mobile.DataGrid;assembly=DevExpress.Mobile.Grid.v15.2" >
<dxGrid:GridControl x:Name="grid">
</dxGrid:GridControl>
</ContentPage>
Cs 数据绑定
在此步骤中,您将创建一个内存中的数据源对象,并使用数据填充它。
注:虽然DevExpress的网格完全支持标准Xamarin数据绑定机制,本教程使用内存中的数据,以避免外部文件或数据库的依赖。
声明顺序类封装一个单独的数据记录。它的公共属性(日期,发货,产品和数量)将作为数据源字段。
/// <summary>
/// 排序类
/// </summary>
public class Order : ModelObject
{
DateTime date;
bool shipped;
Product product;
int quantity;
public Order()
{
this.date = DateTime.Today;
this.shipped = false;
this.product = new Product("", 0);
this.quantity = 0;
}
public Order(DateTime date, bool shipped, Product product, int quantity)
{
this.date = date;
this.shipped = shipped;
this.product = product;
this.quantity = quantity;
}
public DateTime Date
{
get { return date; }
set
{
if (date != value)
{
date = value;
RaisePropertyChanged("Date");
}
}
}
public bool Shipped
{
get { return shipped; }
set
{
if (shipped != value)
{
shipped = value;
RaisePropertyChanged("Shipped");
}
}
}
public Product Product
{
get { return product; }
set
{
if (product != value)
{
product = value;
RaisePropertyChanged("Product");
}
}
}
public int Quantity
{
get { return quantity; }
set
{
if (quantity != value)
{
quantity = value;
RaisePropertyChanged("Quantity");
}
}
}
}
/// <summary>
/// 商品类
/// </summary>
public class Product : ModelObject
{
string name;
int unitPrice;
public Product(string name, int unitPrice)
{
this.name = name;
this.unitPrice = unitPrice;
}
public string Name
{
get { return name; }
set { name = value; }
}
public int UnitPrice
{
get { return unitPrice; }
set { unitPrice = value; }
}
}
public class ModelObject : System.ComponentModel.INotifyPropertyChanged
{
public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;
protected void RaisePropertyChanged(string name)
{
if (PropertyChanged != null)
PropertyChanged(this, new System.ComponentModel.PropertyChangedEventArgs(name));
}
}
/***********************/
public abstract class OrdersRepository
{
readonly System.Collections.ObjectModel.ObservableCollection<Order> orders;
public OrdersRepository()
{
this.orders = new System.Collections.ObjectModel.ObservableCollection<Order>();
}
public System.Collections.ObjectModel.ObservableCollection<Order> Orders
{
get { return orders; }
}
}
public class TestOrdersRepository : OrdersRepository
{
const int orderCount = 100;
readonly List<Product> products;
readonly Random random;
public TestOrdersRepository() : base()
{
this.random = new Random((int)DateTime.Now.Ticks);
this.products = new List<Product>();
GenerateProducts();
for (int i = 0; i < orderCount; i++)
Orders.Add(GenerateOrder(i));
}
Order GenerateOrder(int number)
{
Order order = new Order(new DateTime(2014, 1, 1).AddDays(random.Next(0, 60)),
number % 3 == 0, RandomItem<Product>(products), random.Next(1, 100));
return order;
}
T RandomItem<T>(IList<T> list)
{
int index = (int)(random.NextDouble() * 0.99 * (list.Count));
return list[index];
}
void GenerateProducts()
{
products.Add(new Product("Tofu", 50));
products.Add(new Product("Chocolade", 34));
products.Add(new Product("Ikura", 70));
products.Add(new Product("Chai", 3));
products.Add(new Product("Boston Crab Meat", 36));
products.Add(new Product("Ravioli Angelo", 18));
products.Add(new Product("Ipon Coffee", 10));
products.Add(new Product("Questo Cabrales", 25));
}
}
绑定的DevExpress网格数据和创建新列
设置的BindingContext为内容页的实例TestOrdersRepository类(在.cs中如下证明文件)。
TestOrdersRepository model =new
TestOrdersRepository ();
BindingContext = model;
一旦网格绑定到数据源,创建列,并将其绑定到数据字段。下面列类型(** **的GridColumn子类)可用于在网格控制使用:TextColumn,NumberColumn,DateColumn,SwitchColumn或ImageColumn。
建立相应的列对象,采用每列绑定到相应的数据字段GridColumn.FieldName财产和列添加到GridControl.Columns集合。
您可以创建未绑定列和显示基于对等栏目适用的公式计算值。要启动,相应的列对象添加到GridControl.Columns收集并设置以下列属性。
- GridColumn.FieldName -一个唯一的字符串,一个不匹配网格控制的基础数据源的任何字段名称。
- GridColumn.UnboundExpression -式(字符串表达式)来自动为该列计算的值。
- GridColumn.UnboundType -列数据类型(布尔,日期时间,小数,整数,字符串或对象)。
在下面的例子中,共列绑定和显示产品数量乘以单价。
XAML
<dxGrid:GridControl x:Name="grid" ItemsSource="{Binding Orders}">
<dxGrid:GridControl.Columns>
<dxGrid:TextColumn FieldName="Product.Name" Caption = "Product" Width = "170" />
<dxGrid:NumberColumn FieldName="Product.UnitPrice" Caption = "Price" DisplayFormat="C0"/>
<dxGrid:NumberColumn FieldName="Quantity"/>
<dxGrid:NumberColumn FieldName="Total"
UnboundType="Integer" UnboundExpression="[Quantity] * [Product.UnitPrice]"
IsReadOnly="True" DisplayFormat="C0"/>
<dxGrid:DateColumn FieldName="Date" DisplayFormat="d"/>
<dxGrid:SwitchColumn FieldName="Shipped" />
</dxGrid:GridControl.Columns>
</dxGrid:GridControl>
新建项目行
为了帮助最终用户简化数据输入,该网格的DevExpress包括一个Microsoft Outlook风格的新项目行选项。要激活它,设定GridControl.NewItemRowVisibility属性为true,如下图所示。
<dxGrid:GridControl x:Name="grid" ItemsSource="{Binding Orders}" NewItemRowVisibility = "true">
<!-- ... -->
</dxGrid:GridControl>
数据排序
默认时,DevExpress的电网将针对一列的数据进行排序。要启动排序,设置所需的列的GridColumn.SortOrder属性为Ascending or Descending。一旦排序顺序被选中,电网将首次明确所有以前的规定适用排序操作,然后重新排序的数据。
要针对多个列的数据进行排序,设定GridControl.SortMode属性GridSortMode.Multiple,并指定GridColumn.SortOrder所需的列。要指定排序顺序优先级,使用GridColumn.SortIndex您的排序列的财产。
要禁用最终用户排序,使用GridColumn.AllowSort属性。
下面的例子来排序订单Product.Name和数量,并禁止终端用户排序的发货列。
XAML
<dxGrid:GridControl x:Name="grid" ItemsSource="{Binding Orders}"
NewItemRowVisibility = "true"
CalculateCustomSummary="grid_CustomSummary"
SortMode = "Multiple">
<dxGrid:GridControl.Columns>
<dxGrid:TextColumn FieldName="Product.Name" Caption = "Product" Width = "170"
SortOrder = "Descending" SortIndex = "0"/>
<!-- ... -->
<dxGrid:NumberColumn FieldName="Quantity"
SortOrder = "Ascending" SortIndex = "1"/>
<!-- ... -->
<dxGrid:SwitchColumn FieldName="Shipped" AllowSort = "False"/>
</dxGrid:GridControl.Columns>
</dxGrid:GridControl>
数据分组
该DevExpress的网格控制,您可以针对它的列中显示的值分组。使用日期使用下面的代码组订单GridColumn.IsGrouped和GridColumn.GroupInterval属性
XAML
<dxGrid:GridControl x:Name="grid" ItemsSource="{Binding Orders}" NewItemRowVisibility = "true">
<dxGrid:GridControl.Columns>
<!-- ... -->
<dxGrid:DateColumn FieldName="Date" DisplayFormat="d"
IsGrouped = "true" GroupInterval = "Date"/>
<!-- ... -->
</dxGrid:GridControl.Columns>
</dxGrid:GridControl>
数据摘要
该DevExpress的网格,可以显示全部或组汇总 - 对分别在整个数据集或记录组计算的聚合函数值 - 已启用数据分组时。
总摘要存储在GridControl.TotalSummaries集合。组摘要存储在GridControl.GroupSummaries集合。在这两种情况下,从个人摘要被指定GridColumnSummary对象。要激活汇总计算,你将需要指定数据字段(** ** GridColumnSummary.FieldName),聚合函数类型(** ** GridColumnSummary.Type),并汇总值格式(** ** GridColumnSummary.DisplayFormat)。
预定义的聚合函数类型有计数,最大值,最小值,总和与平均值。
在这个例子中,一组摘要用于显示的最大总为每个记录组值,和一个总摘要在显示所有值的总和总计列。
下面还示例代码演示了如何使用定义的聚合函数的自定义来算的"非运"订单数。聚合函数可以通过设置来实现GridColumnSummary.Type属性自定义和处理GridControl.CalculateCustomSummary事 件。
XAML
<dxGrid:GridControl x:Name="grid" ItemsSource="{Binding Orders}"
NewItemRowVisibility = "true"
CalculateCustomSummary="OnCalculateCustomSummary">
<!-- ... -->
<dxGrid:GridControl.GroupSummaries>
<dxGrid:GridColumnSummary FieldName="Total" Type="Max"
DisplayFormat="Max Total: {0:C0}"/>
</dxGrid:GridControl.GroupSummaries>
<dxGrid:GridControl.TotalSummaries>
<dxGrid:GridColumnSummary FieldName="Total" Type="Sum"
DisplayFormat= "Total: {0:C0}"/>
<dxGrid:GridColumnSummary FieldName="Shipped" Type="Custom"
DisplayFormat= "Not Shipped: {0}"/>
</dxGrid:GridControl.TotalSummaries>
</dxGrid:GridControl>
C#
int count;
// ...
void OnCalculateCustomSummary(object sender, CustomSummaryEventArgs e) {
if (e.FieldName.ToString () == "Shipped")
if (e.IsTotalSummary){
if (e.SummaryProcess == CustomSummaryProcess.Start) {
count = 0;
}
if (e.SummaryProcess == CustomSummaryProcess.Calculate) {
if (!(bool)e.FieldValue)
count++;
e.TotalValue = count;
}
}
}
数据过滤
该DevExpress的电网支持对多列数据过滤。
要应用过滤器针对特定列,使用GridColumn.AutoFilterValue属性。要指定比较运算符,使用GridColumn.AutoFilterCondition属性。
要激活过滤为最终用户,使电网的内置使用自动过滤器面板GridControl.AutoFilterPanelVisibility财产。自动过滤器的功能可以用于经由任何列被禁用GridColumn.AllowAutoFilter属性。
XAML
<dxGrid:GridControl x:Name="grid" ItemsSource="{Binding Orders}"
NewItemRowVisibility = "true"
CalculateCustomSummary="grid_CustomSummary"
SortMode = "Multiple" AutoFilterPanelVisibility="true">
<dxGrid:GridControl.Columns>
<!-- ... -->
<dxGrid:SwitchColumn FieldName="Shipped" AllowSort = "False" AllowAutoFilter="false"/>
</dxGrid:GridControl.Columns>
</dxGrid:GridControl>
要创建一个包含适用于多列多条件筛选表达式,使用GridControl.FilterExpression和GridControl.FilterString作为必要的属性。
一旦过滤器已经被应用,则DevExpress的网格自动显示在其容器底部的过滤板。面板提供了旨在暂时禁用或清除过滤器的当前应用的过滤条件,按键的反馈。控制面板的知名度,使用GridControl.FilterPanelVisibility属性。
列宽自适应
AllowResizeColumns="True"//用户用手指手势拖动列宽
AllowHorizontalScrollingVirtualization="True" //是否支持横向滚动 需要配合 columnsautowidth
ColumnsAutoWidth="True"//列宽自适应
结果
如果你按照这个一步一步的教程,你得到的应用程序看起来应该像下面这样。