Xamarin 表单自定义数据网格答案

【问题标题】：Xamarin Forms Custom DatagridXamarin 表单自定义数据网格
【发布时间】：2021-10-01 05:44:53
【问题描述】：

我有一个模型，您可以在附件中看到。如图所示，我可以在 datagrid itemsource 中获得输出（syncfusion sfDataGrid）。但我想得到如下输出。我该怎么做？

img

【问题讨论】：

标签： xamarin xamarin.forms datagrid syncfusion

【解决方案1】：

如果你想实现这一点，你可以：

1- 最好的方法是用 syncfusion PivodGrid 替换您的 sfDataGrid。

2- 或者如果你想用一个数据网格来实现它，你必须根据你的数据集合进行转换，集合中的每个元素都是一行，所以你必须自己进行分组。

【讨论】：

感谢您的回答。我猜pivotgrid 在syncfusion 中不可用。我会尝试第二种方式。
不，数据透视表在 syncfusion 中可用，请参阅此演示：github.com/syncfusion/wpf-demos/tree/master/pivotgrid
这是 wpf 但我的项目 Xamarin.Forms。可以用吗？
对不起，我错过了这个细节，不，你是对的，它不适用于 xamarin。

【解决方案2】：

我已经准备了一个样品来满足您的要求。实现需求请参考下面代码sn-ps，

XAML：分别使用 GridUnboundColumn 和 UnboundRows 定义列和行。

<sfgrid:SfDataGrid x:Name="sfGrid"

            ColumnSizer="Star"

            AutoGenerateColumns="False"

            ItemsSource="{Binding OrdersInfo}">

 

    <sfgrid:SfDataGrid.Behaviors>

        <local:DataGridBehavior/>

    </sfgrid:SfDataGrid.Behaviors>

 

    <sfgrid:SfDataGrid.Columns>

        <sfgrid:GridTextColumn HeaderText="Color" MappingName="Color" />

 

        <sfgrid:GridUnboundColumn MappingName="S" HeaderText="S"/>

        <sfgrid:GridUnboundColumn MappingName="M" HeaderText="M"/>

        <sfgrid:GridUnboundColumn MappingName="L" HeaderText="L"/>

        <sfgrid:GridUnboundColumn MappingName="XL" HeaderText="XL"/>

        <sfgrid:GridUnboundColumn MappingName="2XL" HeaderText="2XL"/>

    </sfgrid:SfDataGrid.Columns>

 

    <sfgrid:SfDataGrid.UnboundRows>

        <sfgrid:GridUnboundRow />

        <sfgrid:GridUnboundRow />

    </sfgrid:SfDataGrid.UnboundRows>

</sfgrid:SfDataGrid>

行为：在 SfDataGrid.QueryUnboundRow 事件中，根据模型对象设置值。此外，使用 QueryRowHeight 事件隐藏实际的数据行。

public class DataGridBehavior : Behavior<SfDataGrid>
{

    SfDataGrid DataGrid;

 

    protected override void OnAttachedTo(SfDataGrid bindable)

    {

        DataGrid = bindable;

        DataGrid.QueryUnboundRow += sfGrid_QueryUnboundRow;

        DataGrid.QueryRowHeight += sfGrid_QueryRowHeight;

        base.OnAttachedTo(bindable);

    }

 

    private void sfGrid_QueryUnboundRow(object sender, GridUnboundRowEventArgs e)

    {

       var viewModel = (sender as SfDataGrid).BindingContext as ViewModel;

        if (e.UnboundAction == UnboundActions.QueryData)

        {

            List<Orders> rowOrders = null;

 

            if (e.RowColumnIndex.RowIndex == 1)

            {

                rowOrders = viewModel.OrdersInfo.Where(x => x.Color == "WHITE").ToList();

            }

            else if (e.RowColumnIndex.RowIndex == 2)

            {

                rowOrders = viewModel.OrdersInfo.Where(x => x.Color == "BLACK").ToList();

            }

 

            if (e.RowColumnIndex.ColumnIndex == 0)

            {

                e.Value = rowOrders[0].Color;

                e.Handled = true;

            }

            else

            {

                var item = rowOrders.FirstOrDefault(x => x.Size == e.Column.HeaderText.ToString());

                e.Value = item != null ? item.Stock.ToString() : "-";

                e.Handled = true;

            }

        }

    }

 

 

    private void sfGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e)

    {

        if (e.RowIndex == 0)

        {

            e.Height = 50;

        }

 

        //To hide the actual data rows from the view.

        else if (!DataGrid.IsUnboundRow(e.RowIndex))

        {

            e.Height = 0;

            e.Handled = true;

        }

    }

}

请在以下链接中找到可行的示例。

示例：https://www.syncfusion.com/downloads/support/directtrac/general/ze/GettingStarted-549596453

您可以通过以下链接参考我们关于 UnboundRows 和 UnboundColumns 的用户指南文档，

UG 链接：

https://help.syncfusion.com/xamarin/datagrid/unbound-column

https://help.syncfusion.com/xamarin/datagrid/unbound-row#populating-data-for-unbound-rows

https://help.syncfusion.com/xamarin/datagrid/row-height-customization#customize-rowheight-for-all-rows

【讨论】：

感谢您的回答。但正如我上面提到的，我更喜欢第二种方式并自己开发。