Custom Cells using XAML Templates

In the following section learn how to implement Custom Cells using XAML templates in FlexGrid .NETand .NET Framework versions.

.NET Framework

If you prefer to create custom cells in XAML instead of writing code, you can do that as well. The Column class has CellTemplate and CellEditingTemplate properties that you can use to specify the visual elements responsible for showing and editing cells in the column.

For example, the XAML code below defines custom visual elements used to show and edit values in a column. Cells in that column are shown as green, bold, center-aligned text, and edited using a textbox that has an edit icon next to it:

<c1:C1FlexGrid x:Name="_fgTemplated"> 
  <c1:C1FlexGrid.Columns> 
    <!-- add a templated column --> 
    <c1:Column ColumnName="_colTemplated" Header="Template" Width="200"> 
      <!-- template for cells in display mode --> 
      <c1:Column.CellTemplate> 
        <DataTemplate> 
          <TextBlock Text="{Binding Name}" 
           Foreground="Green" FontWeight="Bold" 
           VerticalAlignment="Center"/> 
        </DataTemplate> 
      </c1:Column.CellTemplate> 
      <!-- template for cells in edit mode --> 
      <c1:Column.CellEditingTemplate> 
        <DataTemplate> 
          <Grid> 
            <Grid.ColumnDefinitions> 
              <ColumnDefinition Width="Auto" /> 
              <ColumnDefinition Width="*" /> 
            </Grid.ColumnDefinitions> 
            <Image Source="edit_icon.png" Grid.Column="0" /> 
            <TextBox Text="{Binding Name, Mode=TwoWay}" Grid.Column="1" /> 
          </Grid> 
        </DataTemplate> 
      </c1:Column.CellEditingTemplate> 
    </c1:Column> 
  </c1:C1FlexGrid.Columns> 
</c1:C1FlexGrid>

.NET

If you prefer to create custom cells in XAML instead of writing code, you can do that as well. The GridColumn class has CellTemplate and CellEditingTemplate properties that you can use to specify the visual elements responsible for showing and editing cells in the column.

<c1:FlexGrid x:Name="_fgTemplated">
    <c1:FlexGrid.Columns>
        <!-- add a templated column -->
        <c1:GridColumn ColumnName="_colTemplated" Header="Template" Width="200">
            <!-- template for cells in display mode -->
            <c1:GridColumn.CellTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding FirstName}" Foreground="Green" FontWeight="Bold" VerticalAlignment="Center"/>
                </DataTemplate>
            </c1:GridColumn.CellTemplate>
            <!-- template for cells in edit mode -->
            <c1:GridColumn.CellEditingTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Image Source="edit_icon.png" Grid.Column="0" />
                        <TextBox Text="{Binding FirstName, Mode=TwoWay}" Grid.Column="1" />
                    </Grid>
                </DataTemplate>
            </c1:GridColumn.CellEditingTemplate>
        </c1:GridColumn>
    </c1:FlexGrid.Columns>
</c1:FlexGrid>

Note: Use GridColumn.CellTemplate to customize the content of non-header cells for a specific column.
To customize cell content more broadly, override GridCellFactory.GetCellContentRenderFragment. This approach enables you to generate custom content for any cell type (including column header cells) across all columns. As a result, the cell factory provides a more general and foundational mechanism for defining cell content.
When you override cell content by using the cell factory, some default grid functionality may be replaced and therefore not displayed.
In some scenarios, the cell factory approach can offer slightly better performance because it may bypass portions of the grid’s default rendering logic.