How to clear a TextBox in MVVM?

问题:

I have a TextBox in a DataTemplate declared as follows:

<TextBox Grid.Row="1" Grid.Column="1" Margin="0,4,0,0">
<i:Interaction.Triggers>
    <i:EventTrigger EventName="LostFocus">
        <cmd:EventToCommand Command="{Binding DataContext.NotesEnteredCommand,
                            RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}">
            <cmd:EventToCommand.CommandParameter>
                <MultiBinding Converter="{StaticResource SimpleMultiValueConverter}">
                    <Binding Path="Row.OID" />
                    <Binding Path="Text" RelativeSource="{RelativeSource FindAncestor, AncestorType=TextBox}" />
                </MultiBinding>
            </cmd:EventToCommand.CommandParameter>
        </cmd:EventToCommand>
    </i:EventTrigger>
</i:Interaction.Triggers>

<TextBox.InputBindings>
    <KeyBinding Key="Enter" Command="{Binding DataContext.NotesEnteredCommand, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}">
        <KeyBinding.CommandParameter>
            <MultiBinding Converter="{StaticResource SimpleMultiValueConverter}">
                <Binding Path="Row.OID" />
                <Binding Path="Text" RelativeSource="{RelativeSource FindAncestor, AncestorType=TextBox}" />
            </MultiBinding>
        </KeyBinding.CommandParameter>
    </KeyBinding>
</TextBox.InputBindings>

What this TextBox basically does is execute a MVVM-Light RelayCommand when the Enter key is pressed or when losing focus.

My problem is that I cannot figure out a way in MVVM to clear the TextBox's Text value through XAML in the above two scenarios. It's very easy with in code-behind, but I can't figure it out in MVVM.

Any ideas?

回答1:

If the text is part of your data layer and application logic, a string should exist in your Model or ViewModel and be cleared from there

For example,

<TextBox Text="{Binding NewNote}" ... />

and

void NotesEntered(int oid)
{
    SaveNewNote(oid);

    NewNote = string.Empty;
}

If it's part of the UI layer only, it should just be cleared with code-behind. It's perfectly acceptable to have UI-specific logic in the code-behind the UI, as that still maintains the separation of layers.

NewNoteTextBox_LostFocus(object sender, EventArgs e)
{
    (sender as TextBox).Text = string.Empty;
}

NewNoteTextBox_KeyDown(object sender, KeyEventArgs e)
{
    if (e.Key == Keys.Enter)
        (sender as TextBox).Text = string.Empty;
}

回答2:

You can use a UpdateSourceHelper. This really helped me out calling an event with no code-behind. See here http://www.wiredprairie.us/blog/index.php/archives/1701

All you have to do is create a class "UpdateSourceHelper", connect it with your xaml like this

xmlns:local="using:WiredPrairie.Converter

and bind it to your TextBox (or whatever you want to bind to)...

<TextBox Height="Auto" Margin="0,6" Grid.Row="1" TextWrapping="Wrap" TabIndex="0" 
     Text="{Binding Value}" 
     local:UpdateSourceHelper.IsEnabled="True" 
     local:UpdateSourceHelper.UpdateSourceText="{Binding Value, Mode=TwoWay}"/>

If you want call LostFocus Event in the Helper, you simply have to add these 2 lines in your Helper:

tb.LostFocus += AttachedTextBoxLostFocus;
tb.LostFocus -= AttachedTextBoxLostFocus;

So it would look like this:

TextBox tb = (TextBox)obj;
    if ((bool)args.NewValue)
        {                           
            tb.LostFocus += AttachedTextBoxLostFocus;
        }
    else
        {
            tb.LostFocus -= AttachedTextBoxLostFocus;
        }

Right click on AttachedTextBoxLostFocus and generate the method. Now you can handle the Event like a code-behind event.