Clear TextBox's text on button click in MVVM-CodePudding

I'm working on a search box solution where there is no binded text as I'm using the Text property as parameter for the search command. And that part works just fine.

Now I would like to clear the text in the TextBox using a "clear button" set at the end of the TextBox.

I tried with EventTrigger, but the StoryBoard block the Command and does not set the text to nil.

Below is my code. Any idea?

<!--Search Box-->
<Grid Grid.Column="0">
    <TextBox x:Name="FilterText">
        <TextBox.InputBindings>
            <KeyBinding  Key="Enter" Command="{Binding FilterDataCommand}" CommandParameter="{Binding ElementName=FilterText, Path=Text}"/>
        </TextBox.InputBindings>
    </TextBox>
    <Button HorizontalAlignment="Right" Width="20" Height="20" Margin="5,0" Style="{StaticResource ButtonTransparentStyle}" Command="{Binding ClearSearchCommand}">
        <Button.Triggers>
            <EventTrigger RoutedEvent="Button.Click">
                <BeginStoryboard>
                    <Storyboard>
                        <StringAnimationUsingKeyFrames Storyboard.TargetName="FilterText" Storyboard.TargetProperty="Text">
                            <DiscreteStringKeyFrame KeyTime="0:0:1" Value=""/>
                        </StringAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Button.Triggers>
        <Image Source="/VisionRanger;component/Images/Icons/icon.clear.dark.png" Stretch="UniformToFill" Margin="4,3,2,4" Opacity="0.5"/>
    </Button>
</Grid>
<!--Search Button-->
<Button Grid.Column="1"  Style="{StaticResource ButtonTransparentStyle}" Margin="5,0,0,0" Width="25" HorizontalAlignment="Left"
    Command="{Binding FilterDataCommand}" CommandParameter="{Binding ElementName=FilterText, Path=Text}">
    <Image Source="/VisionRanger;component/Images/Icons/icon.search.dark.png" Stretch="UniformToFill"/>
</Button>

CodePudding user response：

The Text property is not animatable, see Remarks in the documentation. In the reference source, the FrameworkPropertyMetadata is initialized with isAnimationProhibited set to true.

A solution would be to bind a MyFilterTextProperty property to the Text property of the TextBox in TwoWay mode (which is the default).

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

Then in your command ClearSearchCommand you could clear MyFilterTextProperty.

public void ExecuteClearSearchCommand(/*...parameter.*/)
{
   MyFilterTextProperty = string.Empty;
   
   // ...other code.
}

An alternative is to clear the TextBox using a custom TriggerAction. Install the Microsoft.Xaml.Behaviors.Wpf NuGet package. Create a custom trigger action like this. It exposes a dependency property Target that the TextBox can be bound to. If an event occurs, it clears it.

public class ClearTextTriggerAction : TriggerAction<Button>
{
   public static TextBox GetTarget(DependencyObject obj)
   {
      return (TextBox)obj.GetValue(TargetProperty);
   }

   public static void SetTarget(DependencyObject obj, int value)
   {
      obj.SetValue(TargetProperty, value);
   }

   public static readonly DependencyProperty TargetProperty = DependencyProperty.RegisterAttached(
      "Target", typeof(TextBox), typeof(ClearTextTriggerAction), new PropertyMetadata(null));

   protected override void Invoke(object parameter)
   {
      GetTarget(this)?.Clear();
   }
}

In XAML you simply attach the behavior and bind FilterText

<Button HorizontalAlignment="Right" Width="20" Height="20" Margin="5,0" Style="{StaticResource ButtonTransparentStyle}" Command="{Binding ClearSearchCommand}">
    <b:Interaction.Triggers>
       <b:EventTrigger EventName="Click">
          <local:ClearTextTriggerAction Target="{Binding ElementName=FilterText}"/>
       </b:EventTrigger>
    </b:Interaction.Triggers>
    <Image Source="/VisionRanger;component/Images/Icons/icon.clear.dark.png" Stretch="UniformToFill" Margin="4,3,2,4" Opacity="0.5"/>
</Button>

The b XML namespace for XAML bahviors must be included.

xmlns:b="http://schemas.microsoft.com/xaml/behaviors"