如何根据 FluentDataGrid 的值设置各个单元格的样式？

Question

我有一个Blazor Fluent-UI FluentDataGrid，我想实现热图效果。尝试避免编写任何 JavaScript - 有什么方法可以将样式应用于单个单元格以实现此目的吗？

作为最低限度的示例，这是网格定义：

<FluentDataGrid Items="@Items?.AsQueryable()">
    <PropertyColumn Property="@(t => t.MyValue)" Format="F2" Title="Value"/>
</FluentDataGrid>

我想根据 MyValue 的值对各个单元格进行着色，因为这个数字已经在 0 和 1 之间。我希望我可以通过使用 calc() 计算出热图颜色，仅使用 css 来实现这一点，但是如何才能实现我读取了网格中各个单元格的 MyValue？

<PropertyColumn Class="heatmap" Style="--intensity: ????" Property="@(t => t.MyValue)" ...>

任何更好的方法或帮助将不胜感激，谢谢。

Answer 1

您将需要一个 TempateColumn。大致：

<TemplateColumn Context="item">
    <span style="background-color:rgb(@((int) (item.MyValue * 255)), 50, 50)">
        @item.Value.ToString("F2")
    </span>
</TemplateColumn>