Xamarin devexpress Grid

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"//列宽自适应

结果

如果你按照这个一步一步的教程，你得到的应用程序看起来应该像下面这样。