Property updated with every keystroke

Hi,

 I am currently testing your WpfPropertyGrid. I want to use it in an Editor to replace my custom controls. I use commands to update properties, so that I can undo changes. To use the WpfPropertyGrid with commands, I wrote proxies that create the commands which then update the real properties. My problem with the WpfPropertyGrid is that it changes string-properties with every keystroke. In my case that means that a new command is created with every keystroke, which is not very useful. Is it possible to only change properties when the propery field loses focus, e.g. if tab is pressed or return?

 
Greetings,

Michael
 

Hi Michael,

You can do this using a BuiltInEditorStyle and styling the Template property, something like this:

<Style x:Key="NonAutoUpdated" TargetType="Control">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate>
        <TextBox Text="{Binding Value}" />
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

And wiring it up to the grid like this:

<ms:PropertyGrid>
  <ms:PropertyGrid.BuiltInEditorStyles>
    <ms:BuiltInEditorStyle EditorKey="{x:Static ms:PropertyGrid.SimpleTextEditorKey}"
                           Style="{StaticResource NonAutoUpdated}" />
  </ms:PropertyGrid.BuiltInEditorStyles>
</ms:PropertyGrid>

Unfortunately, it turns out that this doesn't work too well as written (the user has to click in the text box twice, which is confusing and unfriendly).  Fortunately, you can get around this with a little kludge: in the TextBox declaration, hook up the MouseUp event as follows:

<TextBox Text="{Binding Value, UpdateSourceTrigger=LostFocus}" MouseUp="TextBox_MouseUp" />

And in the code-behind:

private void TextBox_MouseUp(object sender, MouseButtonEventArgs e)
{
  ((TextBox)sender).Focus();
}

You may also want to call TextBox.Select in the MouseUp event handler -- at the moment this code always positions the caret at the beginning of the text, which may not be appropriate for your application.  You will also want to apply some cosmetics to the TextBox to make it fit nicely into the grid, e.g. setting BorderThickness="0".

Hope this helps! 

Hi Ivan Turns out this post might help me, as i am struggling with the same issue.

But

(a) I can't get it to run (thought it does compile)... is it possible there is a typo in the XAML? I am getting an XML Parser exception pointing to the line with

 <ms:BuiltInEditorStyle EditorKey="{x:Static ms:PropertyGrid.SimpleTextEditorKey}"
 

in it.

(b) Assuming I can get this to run: can you give me a hint as to why it works at all?  I don't see anything in the new code that refers to not sending change event until field loses focus....?

Thanks,

Paul M

The XamlParseException is due to a breaking change we made in preparation for 2.0.  See http://www.mindscape.co.nz/forums/Thread.aspx?ThreadID=1304 for what you need to change in the code above (and for why we made the change).

The reason it works is because the default binding behaviour of TextBox.Text is to update the source on lost focus instead of on property changed.  Thus:

<TextBox Text="{Binding Value}" />

is equivalent to:

<TextBox Text="{Binding Value, UpdateSourceTrigger=LostFocus}" />

whereas the built-in editor's binding is:

<TextBox Text="{Binding Value, UpdateSourceTrigger=PropertyChanged}" />

I have a similar need. But, rather than going through the hoops described above, my ideal solution would be to call some validation code at the time the user tries to click a button to leave the form.  It's clear to me how to validate the properties in question, but not clear to me how to hook up validation error messages and visual indications within the grid at that point in the process.

Ivan, Based on your advice (2nd post in the thread) I'm attempting validation as follows:

           <Style x:Key="NonAutoUpdated" TargetType="Control">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <TextBox MouseUp="GridTextBox_MouseUp" BorderThickness="0">
                                <TextBox.Text>
                                    <Binding Path="Value" UpdateSourceTrigger="LostFocus">
                                        <Binding.ValidationRules>
                                            <ExceptionValidationRule />
                                        </Binding.ValidationRules>
                                    </Binding>
                                </TextBox.Text>
                            </TextBox>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <Trigger Property="Validation.HasError" Value="true">
                        <Setter Property="ToolTip"
                            Value="{Binding RelativeSource={RelativeSource Self},
                            Path=(Validation.Errors)[0].ErrorContent}" />
                    </Trigger>
                </Style.Triggers>
            </Style>

The property now updates correctly only when focus is lost. However, for testing I've made my validation code always throw an exception. The display doesn't show the red border (naturally since i've set border thickness to zero) but also the tooltip doesn't seem to ever get set. 

Documentation suggests that this kind of exception validation should work. Do you have any example code that would shed some light on this? 

You might need to set the tooltip on the text box rather than on the containing control itself.  We have some samples of displaying validation errors in the CustomizationWalkthrough sample and in the Templating sample on the Alloy and Obsidian pages.  Let me know if these don't help.

Sorry for the delay in replying, by the way -- we have been tied up with a conference.

I'm trying to accomplish the same thing, but the above suggestion doesn't really work. The behavior I observe is that the TextBox is refocused each time the mouse is pressed and none of the usual mouse/TextBox behavior works. For example, I can't click and drag to select a text range, I can't double click to select all text in the TextBox, etc. Is there a better solution to this problem?

Hello Ryan,

Here is an alternative approach.  First, create an editor template which is a text box bound without the PropertyChanged trigger:

    <DataTemplate x:Key="NonAutoUpdating">
      <ms:TextBox Text="{Binding Path=Value, ValidatesOnDataErrors=True, ValidatesOnExceptions=True}"
                  IsEnabled="{Binding Path=Editable}"
                  BorderThickness="0" Margin="0" Padding="0" VerticalAlignment="Center" />
    </DataTemplate>

Then hook this up to the required types as a type editor:

      <ms:PropertyGrid.Editors>
        <ms:TypeEditor EditedType="sys:String"
                       TemplateBindingMode="WrappedValue"
                       EditorTemplate="{StaticResource NonAutoUpdating}" />
        <ms:TypeEditor EditedType="sys:Int32"
                       EditorTemplate="{StaticResource NonAutoUpdating}" />
      </ms:PropertyGrid.Editors>

(where the sys: xmlns is mapped in the obvious way)

Note that for the String type you must specify TemplateBindingMode because you need value editing behaviour (TypeEditor defaults to subproperty editing for reference types, which is not desirable for strings).