Ribbon LostFocus + NumericUpDown issues

Question

I am using the Extended WPF toolkit and would like to update values whenever the user types something in (PropertyChanged)

However, when using the IntegerUpDown (or any NumericUpDown control for that matter) the value will only be updated on enter key press or if you press the up down buttons on the control OR the control loses Focus. This has been "by design" as stated by the developer here:

http://wpftoolkit.codeplex.com/workitem/16544

"This is by design. The source will only be updated when the value is incremented/decremented, on the Enter key press, or lost focus."

Setting the UpdateSourceTrigger to any value (ie PropertyChanged) has no effect, which has also been documented in this SO thread:

DecimalUpDown (Extended WPF toolkit) - Source only gets updated on lost focus

However i am running into serious issues with this behavior when using it in combination with a ribbon, which somehow doesnt actually fire a LostFocus when it is opened. So putting any command in the ribbon depending on a value that is bound to a NumericUpDown will never work as expected.

I was thinking of triggering the LostFocus event myself whenever the user opens up the ribbon but that seems to be ugly and will probably not work all the time.

I am looking for an elegant solution to this problem, i'd really rather not want to download the source code and modify it. I either want to modify the NumericUpDown control to actually update the value on PropertyChanged (can this be done using additional XAML / Behaviors / Triggers only?) or find an elegant way to trigger the LostFocus event whenever i want to without actually ruining the user experience.

Has anyone found a solution for this?

Answer 1

I have solved this issue by overriding the default template of the control

<Style x:Key="EnhancedNumericUpDown" TargetType="Control">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Control">
                    <ext:ButtonSpinner x:Name="Spinner"
                                    IsTabStop="False"
                                    Background="{TemplateBinding Background}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    AllowSpin="{Binding AllowSpin, RelativeSource={RelativeSource TemplatedParent}}"
                                    ShowButtonSpinner="{Binding ShowButtonSpinner, RelativeSource={RelativeSource TemplatedParent}}">
                        <ext:WatermarkTextBox x:Name="TextBox"
                                          BorderThickness="0"
                                          Background="Transparent"
                                          ContextMenu="{TemplateBinding ContextMenu}"
                                          FontFamily="{TemplateBinding FontFamily}" 
                                          FontSize="{TemplateBinding FontSize}" 
                                          FontStretch="{TemplateBinding FontStretch}"
                                          FontStyle="{TemplateBinding FontStyle}" 
                                          FontWeight="{TemplateBinding FontWeight}" 
                                          Foreground="{TemplateBinding Foreground}" 
                                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          IsReadOnly="{Binding IsReadOnly, RelativeSource={RelativeSource TemplatedParent}}"
                                          MinWidth="20"
                                          AcceptsReturn="False"
                                          Padding="0"
                                          SelectAllOnGotFocus="{Binding SelectAllOnGotFocus, RelativeSource={RelativeSource TemplatedParent}}"
                                          TextAlignment="{Binding TextAlignment, RelativeSource={RelativeSource TemplatedParent}}"
                                          TextWrapping="NoWrap" 
                                          TabIndex="{TemplateBinding TabIndex}"
                                          Text="{Binding Text, RelativeSource={RelativeSource TemplatedParent}, UpdateSourceTrigger=PropertyChanged}"
                                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                          Watermark="{Binding Watermark, RelativeSource={RelativeSource TemplatedParent}}"
                                          WatermarkTemplate="{Binding WatermarkTemplate, RelativeSource={RelativeSource TemplatedParent}}" />
                    </ext:ButtonSpinner>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

I changed the Template Binding of the Text property to include the trigger

  Text="{Binding Text, RelativeSource={RelativeSource TemplatedParent}, UpdateSourceTrigger=PropertyChanged}"