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数据绑定机制,本教程使用内存中的数据,以避免外部文件或数据库的依赖。
声明顺序类封装一个单独的数据记录。它的公共属性(日期,发货,产品和数量)将作为数据源字段。
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");}}
}
}
?
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
: INotifyPropertyChanged {
public
event
PropertyChangedEventHandler PropertyChanged;
?
protected
void
RaisePropertyChanged(string name)
{
if
(PropertyChanged !=
null)
PropertyChanged(this,
new
PropertyChangedEventArgs(name));
}
}
?
?
集合订单对象将代表网格的数据源。这个系列是由返回订单的财产TestOrdersRepository类。
?
public
abstract
class
OrdersRepository
{
readonly
ObservableCollection<Order> orders;
?
public
OrdersRepository()
{
this.orders =
new ObservableCollection<Order>();
}
?
public
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属性。
结果
如果你按照这个一步一步的教程,你得到的应用程序看起来应该像下面这样。
?