DataGrid inplace editor like MemoEdit based on ComboBox

Question

My goal is creating an inplace editor in WPF datagrid column to edit large texts.

My datasource is a DataTable that can contain data from different tables and fields, that's why i have no any defined types to bind to. In my example it has 1 column named "Test". Now i wrote some XAML code to define my column:

<ControlTemplate x:Key="ExtendedTemplate">
    <StackPanel>
        <TextBox Text="{Binding Test}" Width="200" Height="100" AcceptsReturn="True" TextWrapping="Wrap"/>
    </StackPanel>
</ControlTemplate>                

<DataGrid x:Name="grid" ItemsSource="{Binding}" AutoGenerateColumns="False">
    <DataGrid.Columns>
        <DataGridTemplateColumn Header="TEST Column" Width="200">
            <DataGridTemplateColumn.CellEditingTemplate>
                <DataTemplate>
                    <ComboBox IsDropDownOpen="True">
                        <ComboBoxItem Template="{StaticResource ExtendedTemplate}"/>
                    </ComboBox>
                </DataTemplate>
            </DataGridTemplateColumn.CellEditingTemplate>
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Test}"/>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>

Here is my test datasource:

Source = new DataTable("Test");
Source.Columns.Add("Test");
Source.Rows.Add("Item 1 - large amount of text ...");
Source.Rows.Add("Item 2");
Source.Rows.Add("Item 3");
grid.DataContext = Source;

This works fine, but the last thing i need to do is to decorate grid cell while it is in edit mode and i'm typing text in expanded combo:

It is important: First - combobox isn't binded to any ItemsSource, but single ComboBoxItem exists for any cell and contains text from that cell.

Second - i can't define DataTemplate to SelectedItem because ComboBox.SelectionBoxItemTemplate Property is read only.

Does anybody know how can i replace datatemplate for SelectionBoxItem to something like this?

<DataTemplate>
    <TextBlock Text="{Binding Test}"/>
</DataTemplate>

I tried to create custom style for combobox with command "Edit template - Edit a copy...". There is a lot of markup and i don't want to post it here. Here is a small part edited by me.

<ContentPresenter ContentTemplate="{StaticResource SimplestTemplate}" 
                  ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" 
                  Content="{TemplateBinding SelectionBoxItem}" 
                  ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}"
                  IsHitTestVisible="false"
                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                  VerticalAlignment="Stretch"
                  HorizontalAlignment="Stretch"/>

It doesn't work, because id don't know how to write my "SimplestTemplate" that should bind data to my "Test" field.

Answer 1

I achieved my goal by creating a style, derived from ComboBox, and overriding its ContentPresenter ContentTemplate. It works ok, but i stopped my work on it, because there are many additional features, that need to be implemented (such as resizing popup editor, automatic grid cell refreshing, assigning commands to hotkeys to work with editor with keyboard only etc.). At last i decide to use third-party component (this one).

As an answer to my question i post my final XAML markup:

Resources:

<Window.Resources>

    <DataTemplate x:Key="SimplestTemplate">
        <Grid>
            <TextBlock Background="White" Foreground="Black" Text="{TemplateBinding Content}"/>
        </Grid>
    </DataTemplate>

    <ControlTemplate x:Key="ExtendedTemplate">
        <StackPanel>
            <TextBox Text="{Binding Test}" MinHeight="100" Height="Auto" MinWidth="{TemplateBinding Width}" Width="{Binding MinWidth}" TextWrapping="Wrap"/>
        </StackPanel>
    </ControlTemplate>                

    <Style x:Key="MyComboBoxStyle" TargetType="{x:Type ComboBox}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ComboBox}">
                    <Grid x:Name="MainGrid" SnapsToDevicePixels="true">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/>
                        </Grid.ColumnDefinitions>
                        <Popup x:Name="PART_Popup" AllowsTransparency="true" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom">
                            <Themes:SystemDropShadowChrome x:Name="Shdw" Color="Transparent" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=MainGrid}">
                                <Border x:Name="DropDownBorder" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}">
                                    <ScrollViewer x:Name="DropDownScrollViewer">
                                        <Grid RenderOptions.ClearTypeHint="Enabled">
                                            <Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
                                                <Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=DropDownBorder}" Height="{Binding ActualHeight, ElementName=DropDownBorder}" Width="{Binding ActualWidth, ElementName=DropDownBorder}"/>
                                            </Canvas>
                                            <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                                        </Grid>
                                    </ScrollViewer>
                                </Border>
                            </Themes:SystemDropShadowChrome>
                        </Popup>
                        <ContentPresenter ContentTemplate="{StaticResource SimplestTemplate}"
                                          ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" 
                                          Content="{TemplateBinding help:ComboboxHelper.BindedText}" 
                                          ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}"                                               
                                          IsHitTestVisible="false"
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                          VerticalAlignment="Stretch"
                                          HorizontalAlignment="Stretch"
                                          Grid.ColumnSpan="2"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>      
</Window.Resources>

Grid column template:

<DataGridTemplateColumn Header="TEST Column" Width="200">
    <DataGridTemplateColumn.CellEditingTemplate>
        <DataTemplate>
            <ComboBox IsDropDownOpen="True" Style="{StaticResource MyComboBoxStyle}" FocusVisualStyle="{x:Null}" help:ComboboxHelper.BindedText="{Binding Test}">
                <ComboBoxItem Template="{StaticResource ExtendedTemplate}"/>
            </ComboBox>
        </DataTemplate>
    </DataGridTemplateColumn.CellEditingTemplate>
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Test}" TextTrimming="CharacterEllipsis"/>
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

To show clipped text in cell i created a simple attached property. It cuts all "\n" symbols in text to make it single-line.

public static class ComboboxHelper
{
    public static readonly DependencyProperty BindedTextProperty = DependencyProperty.RegisterAttached("BindedText", typeof(string), typeof(ComboboxHelper));

    public static string GetBindedText(DependencyObject obj)
    {
        string s = (string)obj.GetValue(BindedTextProperty);
        s = s.Replace(Environment.NewLine, " ");
        return s;
    }

    public static void SetBindedText(DependencyObject obj, string value)
    {
        obj.SetValue(BindedTextProperty, value);
    }
}