• 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子类)可用于在网格控制使用:TextColumnNumberColumnDateColumnSwitchColumnImageColumn

    建立相应的列对象,采用每列绑定到相应的数据字段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.IsGroupedGridColumn.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.FilterExpressionGridControl.FilterString作为必要的属性。

    一旦过滤器已经被应用,则DevExpress的网格自动显示在其容器底部的过滤板。面板提供了旨在暂时禁用或清除过滤器的当前应用的过滤条件,按键的反馈。控制面板的知名度,使用GridControl.FilterPanelVisibility属性。

    列宽自适应

    AllowResizeColumns="True"//用户用手指手势拖动列宽

    AllowHorizontalScrollingVirtualization="True" //是否支持横向滚动 需要配合 columnsautowidth

    ColumnsAutoWidth="True"//列宽自适应

    结果

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

      

  • 相关阅读:
    N46期第一周作业
    马哥博客作业第五周
    马哥博客作业第四周
    马哥博客作业第三周
    04go条件和循环
    03go运算符
    01go变量和常量
    02vue指令-1
    01vue初识
    05django模板层
  • 原文地址:https://www.cnblogs.com/sephiroth-wzc/p/5304261.html
Copyright © 2020-2023  润新知