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"//列寬自適應
結果
如果你按照這個一步一步的教程，你得到的應用程序看起來應該像下面這樣。
