Xamarin表单自定义数据网格

Question

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

img

Answer 1

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

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

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

Answer 2

我准备了一个样本来满足您的要求。请参考以下代码片段以实现要求，

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-未绑定行的数据

https://help.syncfusion.com/xamarin/datagrid/row-height-customization#customize-所有行的行高