Editing Indicator in DataGrid Row Header

Editable grids will quite commonly show an indicator in the row header area to indicate that a row is currently being edited. This is trivial to achieve using Microsoft’s WPF DataGrid.

 GridEditing - Edit Indicator

All that is needed is a DataTemplate assigned to the RowHeaderTemplate property of the DataGrid. The template simply shows or hides the editing image based upon whether the current row is being edited.

<SolidColorBrush x:Key="gridLineBrush" Color="#FFCDEFFE"/>
<DataTemplate x:Key="rowHeaderTemplate">
    <StackPanel Orientation="Horizontal">
        <Image x:Name="editImage" Source="Images/Edit.png" Width="16" Margin="1,0" Visibility="Hidden"/>
    </StackPanel>
    <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type toolkit:DataGridRow}},Path
=Item.IsEditing}"
Value
="True"> <Setter TargetName="editImage" Property="Visibility" Value="Visible"/> </DataTrigger> </DataTemplate.Triggers> </DataTemplate> <Style TargetType="{x:Type toolkit:DataGrid}"> <Setter Property="GridLinesVisibility" Value="All"/> <Setter Property="HorizontalGridLinesBrush" Value="{StaticResource gridLineBrush}"/> <Setter Property="VerticalGridLinesBrush" Value="{StaticResource gridLineBrush}"/> <Setter Property="RowHeaderTemplate" Value="{StaticResource rowHeaderTemplate}"/> <Style.Resources> <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/> <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black"/> <SolidColorBrush x:Key="{x:Static toolkit:DataGrid.FocusBorderBrushKey}" Color="{StaticResource gridLineBrush}"/> </Style.Resources> </Style>

There is an IsEditingRowItem property on the DataGrid but unfortunately its private. As it happens my base model class has an IsEditing property as part of its IEditableObject implementation. So I simply bind the visibility of the image to that.

#region IEditableObject Members

public void BeginEdit()
{
    IsEditing = true;
}

public void CancelEdit()
{
    IsEditing = false;
    // RollbackPropertyValues( _preEditValues );
}

public void EndEdit()
{
    IsEditing = false;
}

#endregion

 

What did you think of this article?




Trackbacks
  • No trackbacks exist for this entry.
Comments

Leave a comment

Submitted comments will be subject to moderation before being displayed.

 Enter the above security code (required)

 Name

 Email (will not be published)

 Website

Your comment is 0 characters limited to 3000 characters.