Blazor DataGrid では、ImageColumn を利用することで、列に画像を表示することができます。

下記例では、Photo 列、Flag 列で ImageColumn を利用しています。

<DataGrid Height="100%" Width="100%" RowHeight="50" @ref="@DataGridRef"
          DataSource="Employees"
          AutoGenerateColumns="false"
          ActivationMode="GridActivationMode.Cell">

    <ImageColumn IsEditable="false" Width="100" Field="Photo" PaddingTop="5" PaddingBottom="5" PaddingRight="10"
                 HorizontalAlignment="@CellContentHorizontalAlignment.Stretch" />

    ...
    
    <ImageColumn IsEditable="false" Width="@("*>110")" Field="CountryFlag" HeaderText="Flag"
                 PaddingTop="5" PaddingBottom="5" PaddingRight="10"
                 HorizontalAlignment="@CellContentHorizontalAlignment.Stretch" />

    ...
</DataGrid>

実行結果

Photo 列と、Flag 列に画像が表示されました。

Tagged:

製品について

Ignite UI for Blazor